These prototyping tools are doing some heavy lifting for experience designers. I put them to the test to decide which tool would most enhance my workflow. I love software that helps me work more efficiently while improving the outcome of my UX efforts. All of these tools have the potential to do just that so let’s take a closer look.

 Framer:

framer.com

Framer is a powerful prototyping tool and my top choice as for a piece of software that will enhance my capabilities. I loved Framer’s intuitive interface, smart layers, interaction library, and flexible CoffeeScript coding structure. Framer also stands out for providing both strong prototyping tools and reliable testing via a native iOS companion app.

GOOD:

  • Excellent for testing medium to high-fidelity mockups on real devices
  • Best for final-stage testing of the customer journey
  • Integration with the iOS app is seamless and worked the first time I tested
  • Animations, transitions, states in custom code can make the experience feel native

BAD:

  • Not good for low-fidelity wireframes
  • Not suitable for flowcharts or mapping IA
  • Is not designed for building other diagrams

 UXPIN:

uxpin.com

UxPin is a lot like Framer so I won’t dive into too many details. This is another great product with a unique approach to design systems and reusable components. One of our main takeaways was that UxPin is more than twice the price of Framer at $30/month per user vs. $12/month for Framer. If the cost per user is not a concern, then you might want to see if UxPin’s unique design system functionality would be of benefit to your team.

GOOD:

  • Good for testing low to high-fidelity design concepts
  • Easy to convert low fidelity to high fidelity
  • Can build and test in any browser (no app)
  • Collaborative – multiple users can work on a single project
  • Can add interactions to elements, can mimic CSS animations
  • Additional design system functionality is very nice

BAD:

  • Not as intuitive, need to watch tutorials just to get started
  • Can’t create flow charts or other diagrams

 Sketch:

sketchapp.com

If your team is looking for a photoshop replacement – perhaps something easier to learn – then Sketch is a great tool for your team pick up and review. Sketch includes libraries of pre-built UI elements to help make the process quick. The downside: prototyping functionality is only available through plugins such as InVision’s Marvel which will increase costs.

GOOD:

  • Good for creating high-fidelity design concepts
  • The symbols panel saves reusable elements like logos, icons, cards, etc

BAD:

  • Prototyping Interactivity is provided by plugins, not Sketch
  • The mobile app doesn’t provide helpful features and rarely works

 Axure:

axure.com

Axure has a slightly different focus from the other tools on this list: low-fidelity design iteration. The Axure work-space uses a sticky grid system, enabling users to mock up layouts quickly. The main takeaway with Axure is that it won’t always suffice for pixel-perfect design concepts or high-fidelity interaction. Axure has limited support animations, and even basic interactions can be complicated to configure and sometimes produce undesirable results.

If you also need a great tool for building diagrams or flowcharts Axure should be on the top of your list.

GOOD:

  • Great for building complex flowcharts and other diagrams
  • Excellent for creating low-fidelity wireframes and medium fidelity prototypes for early-stage testing
  • Adequate for illustrating minimal interactivity
  • The interface is snappy and refreshingly easy-to-use

BAD:

  • Interactivity is often clumsy and not easily executed
  • Native device testing is not supported
  • Not ideal for rigorous, final-stage experience testing

 InVision Studio

I waited nearly five weeks to be given early access to the InVision Studio Beta and my first impressions are overwhelmingly positive. InVision studio positions itself as a one-tool-fits-all solution for UX prototyping and while there is a slight learning curve to using the advanced interactions, I was able to open a new project and pretty much just get straight to work. The UI takes cues from other prototyping software like Sketch and Framer so if you have experience in any of those tools you shouldn’t have any trouble here.

The main takeaway from my limited time with InVision is that InVision wants to streamline the prototyping process and strip away as much complexity as possible. InVision Studio integrates tightly with other InVision products like DSM which will make it a very compelling choice for many teams.

Summary

Someday we may have one tool to serve all our UX needs, but for now, I am going to keep using a mix of the tools above. I need Axure for building slick diagrams fast. I also will be learning Framer and Invision Studio so I can execute more sophisticated interactive prototyping.

If your team is looking for a new prototyping tool you will find dozens of options out there. I only had time to review these six tools but each of them offers a little different experience. Your team will undoubtedly have a unique set of requirements and should test the tools that you believe will fulfill your needs.

I have omitted InVision Studio from this final comparison because it is still in Beta.

Framer

UXPin

Sketch

Axure

Low-Fidelity ✔︎ ✔︎ ✔︎ ✔︎
High-Fidelity ✔︎ ✔︎ ✔︎
Easy To Use ✔︎ ✔︎
Interactive Prototypes ✔︎ ✔︎
Animations ✔︎ ✔︎
Reusable Elements ✔︎ ✔︎ ✔︎
Native App Testing ✔︎ ✔︎
Collaboration ✔︎ ✔︎ ✔︎
Diagrams ✔︎