Prototyping in 2020: How to choose the right tool for the job

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…

Flow chart to help choose prototyping software

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.

Show CommentsClose Comments

Leave a comment