The Product Designer’s Guide to Design Tools
An analysis on thirteen UI/UX Design Tools
As a designer, the tools you choose to use can have a huge impact on your process and workflow and the number of options to choose from can be overwhelming. Below is a summary of the various design and prototyping tools I researched when helping my design team figure out which tool we should adopt (for how we made the final decision, read this).
Here is a chart summarizing each tool’s prototyping and design ability:
I divided the tools below into two groups — UI/UX design tools and prototyping tools — but it is important to keep in mind that there is some overlap in functionality.
UX/UI Design
Figma
Pros: Best design tool for collaboration and no need to worry about saving versions and history.
Cons: Difficult to transition to from Sketch because symbols/components are built very differently.
Unique Features: Component primitives. If users follow the system of creating components from primitives, then updating your designs is effortless and instantaneous.
Sketch
Pros: Simple and easy to learn; a staple in the product design industry.
Cons: Definitely need to supplement prototyping with another tool and lacks decent collaboration and hand-off features.
Unique Features: Smart layout tool allows you to customize how your symbols respond and resize, reducing the number of symbols you need to make and times you need to detach a symbol .
Adobe XD
Pros: Easy connectivity to other Adobe Cloud apps so you can easily edit images in XD through Photoshop without navigating away from XD and utilize AfterEffects for inserting animations.
Cons: Difficult to export from Sketch to XD and components are difficult to use since you have to keep track of the original master components (which could be spread across different workspaces) and they’re hard to customize.
Unique features: Beta version of live collaboration, and a share mode in which you can select what screens to share, with who, and set permissions. XD also provides scenario-based presets to create sharable links for your designs (designer, developer, user testing, presentation, custom).
UXPin
Pros: Live collaboration and a nice dashboard to view projects, statuses, versions/iterations, permissions, and contributors’ history. Also has more prototyping abilities compared to other UX/UI design tools.
Cons: Tool and tutorials were outdated, so there was a concern about maintenance and support.
Unique features: Can use Javascript to create computational components and can dynamically update text elements, capture data from inputs, or store user preferences to adjust the prototype. You can also import html web pages to you design and it has an accessibility feature.
Invision Studio
Pros: Can fine tune animation effects and timing for prototype.
Cons: Can’t live collaborate on a design file, and prototypes can get clunky when trying to preview on a device.
Unique Features: Freehand space where anyone with link can view screens and draw/write in any edits or comments.
*Note: Invision Studio is most commonly used as a prototyping tool in the design industry despite containing many features of a UI/UX product (component library, drawing, responsive resizing, etc.). Prototyping-wise, it’s not as good as many other prototyping-specific tools, which is why I decided to group it into UI/UX design category.
Prototyping
Protopie
Pros: Gets as close as possible to creating what looks like a real product without coding by customizing animations, timing, and formulas (a feature that makes it possible to create more dynamic prototypes).
Cons: N/A. Haven’t seen any!
Unique Features: Numerous phones can interact with each other in the same prototype and prototypes can connect to the phones’ sensors.
Framer
Pros: Create really high fidelity prototypes via code overrides and building out coded components in React.js.
Cons: Steep learning curve; easy to do really basic prototyping, but you have to learn a lot to create more high fidelity interactions and transitions.
Unique Features: Can connect prototype to an API, making the prototype emulate a real product.
Proto.io
Pros: There are advanced interaction triggers and parallel, sequential interactions. In addition, variables can be used for conditional logic or for storing and displaying data across the screens of your project, etc.
Cons: Custom components have to live in Dropbox.
Unique Features: Can integrate user testing and screen recording.
JustInMind
Pros: Can integrate with Illustrator, Photoshop, user testing tools, and Atlassian.
Cons: The collaboration model doesn’t protect against overriding other collaborators’ changes if you’re editing at the same time.
Unique Features: Can instantly export your project to clear specifications documents, along with the visuals needed for easy interpretation. All the information in your prototypes can be exported to customizable documents. You can even create customized document templates.
Marvel
Pros: A lot of pre-provided stock images, icons, and assets, making it great for non-designers who are interested in creating mockups.
Cons: Limited to web design and contains only basic prototyping transitions.
Unique Features: Usability testing and screen recording.
Webflow
Pros: Has a lot of web-specific triggers and animations, and you can add other animations/transitions and parallax effects based on the screen’s scrolling and state.
Cons: More of a no-code webpage editor than a design tool.
Unique Features: Can live collaborate and easily export designs to CSS, HTML, and Javascript
Origami
Pros: Can customize logic for your prototype and provides a library of interactions users can utilize. In addition, patches (patches take input and conditions, do something, and then produce an output/action) can perform calculations, multiple types of comparisons, and produce multiple outputs.
Cons: Takes a lot of time to learn because it is conceptually very different from most design tools.
Unique Features: Can connect prototype to a phone’s camera, microphone, and haptics.
Principle
Pros: If you import the same Sketch file from before with updates, it will recognize that and make according changes.
Cons: Basically just an animation tool since it lacks enough features to be a good design or prototyping tool; only allows users to use auto animate transitions.
Unique Features: Drive feature that allows you to set an element to change in different ways based on how other elements, and there is built in screen recording feature that you can export as a GIF.
I hope this information will prove to be helpful for other designers who are trying to figure out which of the many tools out there is worth investing in! Feel free to comment your personal thoughts and experiences with these tools .
