Many designers and design teams have a go-to prototyping tool, but it’s important to be thoughtful when it comes to choosing the right tool for the job. Starting each phase of a project with the right software can save you and your team hours of work and frustration.
Figma – Best for Design Teams
Figma is has made a huge splash as a newcomer to the prototyping scene, but it is now the software of choice for many notable design teams. Figma is a powerful and feature-rich, cloud-based, all-in-one design, prototyping and sharing tool.
Overview of Figma
Strengths: Team collaboration, Design system control / implementation, Realtime designing and prototype in one software
Drawbacks: Pricey for one person
Use it for: Wireframing, Design, Prototyping, Collaboration, & Creating / Implementing design systems
Notable features: Powerful vector tools, Auto-layout, Easy sharing & export with code, Smart interactions, Real-time embedded commenting, Lots of plugins
You should use Figma when
You are kicking off a new project with a team and utilizing a design system. Figma will really simplify your workflow – you can use it for wireframing, design, prototyping, and hand-off all in one program.
Adobe XD – Best for Adobe Loyalists
Adobe XD is one of the most powerful and feature-rich tools on the market. However, the hefty price tag associated with the Adobe Creative Cloud makes it out of reach for many individuals and smaller teams.
Overview of XD
Strengths: Easy to use, Lots of automation, Integrations with Slack, Jira, Trello, and Zeplin
Drawbacks: Pricey for one person and small teams
Use it for: Wireframing, Design, & Prototyping
Notable features: Auto animation, Components & States, Coediting, Zeplin compatibility, Lots of plugins
You should use XD when
You are kicking off a project solo or with a small team. You can design and prototype all within XD, but when you are ready to hand off to development, you’ll have to export your file to Zeplin instance.
Sketch – Best for the Design Phase
Sketch has been a beast on the design scene for years now. They were the first widely adopted interface design tool on the market. Since their emergence they have been an industry favorite for their rich and powerful design features. For that reason, many of the popular prototyping tools have easy Sketch integration, making them the best starting point.
Strengths: Powerful design tools, Collaborative workflow, Good general purpose prototyping features
Drawbacks: Not the best for detailed interactions
Use it for: Designing, Collaborating, General Prototyping
Notable features: Libraries, Symbols, Lots of plugins, Lots of Integrations
You should use Sketch when
You are in the design phase… while Sketch is one of the most powerful design tools on the market, it is really only good for the most basic of prototyping. The bottom line is, if you need to design interactions and hand off for development, Sketch should be used as a starting point for your designs, and then exported to a more powerful prototyping tool depending on your objective.
Framer X – Best for Designer/Dev Hybrids
Framer – now Framer X markets itself as a Hackable design tool, meaning it is perfect for designers who are also developers (and vice-versa). When first arrived on the scene, it gained a reputation for being a powerful tool with a steep learning curve, favoring those who were comfortable using JS. Since then, it has become much more intuitive for non-coders with a beginner-friendly interface and easy to use while maintaining it’s powerful capabilities.
In a bid to compete with Figma, they are in the process of launching a web tool with realtime collaboration features. You… Stay tuned!
Overview of Framer
Strengths: Team collaboration, Design system control / implementation, Realtime designing and prototype in one software, A scaleable team plan, Online crash courses
Drawbacks: Pricey for individuals and small teams
Use it for: Component design, Prototyping, Interaction Design, Editing & exporting code
Notable features: Framer for web (in beta), Component design, Flexible layouts, Intuitive scrolling design, Transition motion effects, In-app store
You should use Framer when
You need a powerful prototyping X development tool for creating and coding React based component and interaction design. You don’t need to know any coding to use Framer X, but it certainly helps in order to get the most out of the feature set.
Principle – Best for Animating Micro-interactions (Maybe?)
When Principle first hit the market, they were the first popular prototyping software to focus on custom interaction design. Since then, many other programs including Framer, XD and Invision Studio, which now includes a timeline-based animation tool, have made waves in the interaction department.
Strengths: Powerful animation tools
Drawbacks: Bulky, flat pricing – $179 per license with one year of updates
Use it for: Animations and micro-interactions for demo purposes
Notable features: Timeline, Magic interactions, Principle mirror, Sketch integration
You should use Principle when
You have completed the design phase in Sketch and are ready to animate your components. Note: Principle works well for interaction demos, but if you need exporting code for developers, you’re better off animating in Framer.
Marvel – Best for Demo Work
Marvel is an easy-to-use tool for creating realistic prototypes without code. It is a great option for creating prototypes for of presentations and pitch work, and even for validating ideas with user testing.
Overview of Marvel
Strengths: Sketch integration, Easy prototyping, User testing
Drawbacks: Not the best for implementation
Use it for: Prototyping for demos, User testing
Notable features: Prototype user testing, Sketch integration, Developer handoff
You should use Marvel when
You have completed the design phase in Sketch and you need to quickly create an interactive prototype for demo purposes. It can also help you design and test user interactions. While it does have developer handoff features for designs, it isn’t great for handling interaction design handoff. You’re better off using Framer.
InVision Studio – Most Powerful (In Theory)
Despite it’s awkward rollout, InVision Studio might turn out be the best on the market. Studio Platform, Studio’s public API, promises to boost productivity and enrich users’ workfows by allowing users to create and share apps. The model seems akin to Sketch’s Plugin Library, but used for prototyping.
Strengths: Open source App Library (coming soon), A strong design community with learning tools, resources, and inspiration
Drawbacks: Many promised, but still unreleased features
Use it for: Wireframing, Design, Prototyping, Animating interactions, Collaboration
Key Features: Studio Platform App Store (in beta), Realtime commenting, Globals syncing, Time editing, Seamless component swapping, Mobile device mirroring
You should use InVision when
You need a powerful all-in-one tool for creating detailed, interactive, animated prototypes.
Zeplin – Best for Developer Handoff
Zeplin is not exactly a prototyping software in the true sense of the word, but it is a great tool for handing off prototypes to developers. It is a great way to supplement other software that is lacking in the the handoff feature set. It has integrations for Sketch, XD, and Figma, meaning you can seamlessly import your prototypes into a Zeplin instance, and Zeplin will automatically generate stylesheets, code, and exportable assets.
Strengths: Breezy interface, Designer / Developer collaboration, Competitive pricing, No need to know any code
Drawbacks: Properly prepping design files for import can be a bit cumbersome
Use it for: Developer handoff
Notable features: Integrations, Dynamic stylesheets, Auto-generated code & assets, Lots of extensions
You should use Zeplin when
You have already designed your prototype in Sketch, XD, or Figma, and you are ready to hand off to development
Proto.io – Honorable Mention
Proto.io was a competitor on the prototyping scene when it first came out, but recently it has frankly, been left in the dust by most of its competitors. While it still has a following, it is not a stand-out in any particular department these days.
Strengths: User-friendly interface, No need to know coding Vector-based animation
Drawbacks: A bit behind the curve in terms of feature set
Use it for: Wireframing, Design, Prototyping, Animating
Key Features: Sketch integration, User testing tools, Vector-based animations, Realistic Apple Watch components
Just in case you’re still not sure…
There are many, many options
There are many prototyping tools that we haven’t tried yet. Just to name a few:
Webflow
UXPin
Origami Studio
Prott
What’s your favorite prototyping workflow?
Have you tried any new prototyping tools? Do you have a favorite workflow involving any of these programs? Tell us about it in the comments!
Written by Karen Wittekind for Full Swing Digital
Karen earned a degree in Fine Arts from Indiana University, Bloomington.
She has 10+ years of professional experience and has worked with organizations big and small, including several Fortune 500 companies.
© Karen Wittekind. All rights reserved.
