Best Website Design Prototyping Tools

April 7th, 2021

5 minute read

Learn more about these 19 best prototyping tools for UX/UI designers and how you can utilize them in your work.

You wouldn't start building a house without a plan, so why would you start pushing your designs into the implementation stage without prototyping first? Prototyping is just like a blueprint because it lets you and your developers see a complete overview of your website or app before you start production.

Prototyping is a must-have in the design process because it helps you collaborate with your team and explore options without having to commit to a final version. This can help you make sure the UX/UI design is perfect before executing on a final product.

If you've avoided prototyping in the past because you wanted to avoid coding or programming, don't worry—most prototyping tools don't require you to have any coding experience! Here are 19 of the best prototyping tools for UX/UI designers, as well as some of the pros and cons that come with each.

1. Figma

Figma is a leading prototyping tool for UX/UI designers and is built to magnify collaboration so teams can build prototypes and design together. Since it's cloud-based, your work is automatically saved, and you never have to worry about losing a draft or version of a project you're working on. You can start with their free version and then work up to a $45/month version that your entire organization can use. If you're a Designlab student, you can get 1 year free ($144 value) of a professional Figma account via our Perks page.

Take our free Figma 101 course to learn both basic and advanced features to get the most out of one of the best prototyping tools on the market today.

Figma Prototyping Tool

The look and feel of the Figma interface is quite minimal, but it belies a set of powerful features.

2. Adobe XD

Adobe XD helps UX/UI design and development teams at the same time by giving access to a wide range of prototyping tools. Adobe XD is easy to set up and use, but also provides complex and detail-rich design tools. A personal starter version is free to use, or you can choose to pay $9.99 a month for the single app.

Try our free Adobe XD 101 course to learn how to use Adobe XD to create a prototype and enhance your UX/UI design skills in general.

Adobe XD Prototyping Tool

The Adobe XD Home screen gives you quick access to artboard presets, add-ons, cloud documents, and more.

3. Sketch

Sketch helps teams collaborate and create prototypes, but it's only available on Mac devices. Sketch also offers plugins that can help you simultaneously work on the same project with your team and allows for a variety of export options. Depending on how many licenses you need, Sketch can cost anywhere from $79 to $99 a year. As a Designlab student you get 50% off ($50 value) via our Perks page.

Learn to master Sketch with our free Sketch 101 course, which includes daily hands-on tutorials, free downloadable templates to use in Sketch, and even a Sketch cheat sheet.

Sketch Prototyping Tool

When working in Sketch, you'll spend most of your time looking at a screen layout like this.

4. Zeplin

Zeplin makes it easy to transfer your prototype to a final product. The UX/UI has a unique feel to it, but there are occasional issues when exporting designs. Zeplin offers a free version but can cost anywhere from $10.75 a month per user to $26 a month depending on the size and structure of your business.

5. Framer

Framer helps your team collaborate and focus on coding and design. Some new users complain about the interface and limitations of the program, but it provides all the flexibility and speed that is needed for designing prototypes. Framer offers subscription plans that range from a free version to a pro version that supports unlimited projects for only $20 a month for each editor.

6. MockFlow

MockFlow offers an offline mode, which makes it accessible even when your team doesn't have access to the cloud. Its strength is in creating wireframe designs that come with templates to help speed up the creative process. MockFlow offers a free basic version of their product, and for full access it costs up to $19 a month per editor.

7. Balsamiq Cloud

Balsamiq Cloud is a web app that focuses on rapid wireframing to give you the prototype quickly, which helps users and stakeholders focus more on the structure and idea rather than getting stuck on the smaller details that will be refined in later stages. That speed and accessibility does come at the cost of a rigid approach and fewer customization options however. Balsamiq Cloud can cost as little as $90 a year for two projects and up to $1,990 a year for 200 projects.

8. Webflow

Webflow comes with plenty of tutorials that help improve its ease of use for paid users. While it boasts a comprehensive design tool, it can be difficult to navigate for some less experienced users. Webflow lets you get started with your first two projects for free and then offers additional plans up to $42 a month for a pro account.

Learn more about Webflow in our webinar with a Webflow expert and Designlab mentor:

9. Flinto

Flinto allows you to infuse life into your prototype by helping you add animations. However, keep in mind that the animation process does take time, and there are some limitations when trying to create interactions between components in your prototype. Flinto starts with a free 30-day trial and then costs $20 a month per member.

10. Origami Studio

Origami Studio was created by the Facebook design team and is entirely free to use. Facebook designers wanted a prototyping tool that would work fast while still making rich experiences. Origami Studio does start to struggle when trying to build a multi-screen prototype, but really shows its strength when creating micro-interactions or highlighting a specific page in your prototype.

11. ProtoPie

ProtoPie is easy to learn and is streamlined to include the resources you need most when creating a prototype. However, from that streamlined approach there is a very limited selection of creative materials as part of it. ProtoPie is completely free for all teachers, students, and schools, or you can expect to pay anywhere from $11 a month to $42 a month.

12. UXPin

UXPin offers a wide range of tools to help developers reach the goals they are looking for, including conditional interactions, expressions, and interactive states. The con to using UXPin is that the design library is not updated, and UI components can feel outdated. The basic version of UXPin costs $19 per user a month, and there are advanced and professional versions that can cost up to $69 a month.

13. Axure RP 9

Axure RP 9 has a drag-and-drop UI, which makes it feel easy to manage. While it is built to be user-friendly, without some knowledge of coding it can be difficult to debug a prototype to make it function the way you want. Axure RP 9 costs $25 a month or $42 a month for a team version.

14. InVision

InVision focuses on repeatable and streamlined design workflow with design and prototype products before writing code. It has been known to have limited functionality and has limited viewing while creating CPU slowdown due to heavy files that are generated. For individuals and small teams, you can use InVision for free. For larger, more collaborative teams, it costs $7.95 per user a month. Get 6 months of InVision free ($90 value) via our Perks page.

InVision Prototyping Tool

InVision enables you to take designs from ideas to development in one unified platform.

15. Principle

Principle aims to provide an interactive, realistic visual prototype to go alongside static mockups and wireframes. While it is a powerful tool, it's a Mac-only software, making it only available to work or view on a Mac or iPhone. Principle costs $129 a year.

16. JustInMind

JustInMind allows you to create high-resolution prototypes and helps you get started with a variety of templates, but can have some difficulty with sharing and exporting the completed prototype. JustInMind lets you only pay for individual prototyping users at $19 a month per user or $39 a month for their enterprise version.

17. Marvel

Marvel has a free version that is limited to one user and one project and also has paid options for $12 to $42 a month. Marvel has a clean and simple UI and allows for collaboration. It provides a great general base for prototyping, but is quite limited when it comes to micro-interactions and other advanced functions.

18. MockPlus

MockPlus lets you build prototypes with real design files, publish your projects to the cloud, and share with your team with a single link. While it can create prototypes in a few seconds, the prototypes will lag when tested on mobile, plus require a complete download every time they are viewed. MockPlus iDoc's basic program is free to use and covers 10 users and 10 projects. They offer additional versions for $5.95 per user a month up to $12.95 per user a month.

19. Atomic

Atomic provides a flexible foundation for an entire team to collaborate on, with additional widgets and add-ons to help you get the experience you're looking for. However, exporting with Atomic is non-existent and requires a third-party tool to showcase your prototype. Atomic is a browser-based prototyping tool that costs between $15 and $35 a month.

If you're ready to start learning how to use prototyping tools like Figma and Sketch, we encourage you to explore our UX Academy Foundations course.