The New Generation of Prototyping Tools (Part 2/2)

Lowering the Cost of Decision Making

This is part of a two-part series on prototyping tools. Part 1 explored tools that were well suited for responsive projects and ones that require transitions and animations. If you haven’t read Part 1 yet, please read it here.

It’s been about a year since I wrote Part 1 of this article, and a lot has changed in the prototyping tools space since then. There are new tools, a plethora of acquisitions, and some innovations introduced to existing tools. Before diving into the latest thinking, let’s review the current state of the prototyping tools market. Then we’ll take a closer look at components and how you expose prototypes to the real world.

Prototyping Tools Landscape

My framework to evaluate prototyping tools: complexity and power vs. effort

It became pretty clear to me that tools were choosing a philosophy along a complexity/power vs. effort spectrum. The graph above is based on my observations. Generally, the simpler the tool (complexity) the less time it takes to build a prototype (effort). However, simpler tools allow for fewer customizations within your prototype (power). Here are a few examples of tools that fit in each category:

  • Hotspot — InVision, Marvel, UXPin
    PowerPoint or Keynote prototyping on steroids.
  • Map — Craft, Adobe XD
    Organize art boards and link parts of your prototype visually. This is particularly exciting, because it can get you to think about building Spatial Interfaces.
  • Responsive — Weld, Hype Pro
    Describing what happens at multiple breakpoints can be easier when you build a prototype.
  • Timeline — Atomic, Principle
    Use an advanced timeline to keyframe transitions or interaction-based animations (e.g., drag objects) to achieve the next level of fidelity in your prototype.
  • Logic — Origami
    Use Origami’s patches to capture interactions, compute logic, and draw objects to the prototype viewer. Facebook has just released Origami Studio, which is a ground-up rebuild with no dependency on Quartz Composer.
  • Code — Framer
    With the all new auto-code features inside Framer Studio, this is the most powerful prototyping tool. Of course, it requires coding skills, but Framer is trying to make onboarding easier for designers.

Back to the original purpose of this post: what’s new in prototyping? There’s been a progression from isolated prototyping tools to collaborative environments that allow external interaction with the real world (e.g., APIs, apps, phone camera). This helps us prototype faster, reduce redundancies, and make our prototypes feel more real. Instead of focusing on one tool at a time, I thought it would be best to focus on new concepts while highlighting a few tools that execute them well.


One additional benefit of components — I hear from my developer friends that they think of building designs in terms of components. They abstract out the details of individual elements and search for shared elements to reduce effort and increase maintainability in their code base. If you start thinking this way, it may be easier to communicate with developers and build your designs.

Components are brand new to Atomic and Principle. Theoretically, you could create your own component libraries to be used in Origami (if you organize patches really well) and Framer (by creating modules). In fact, Uber designers use Framer modules to build a fully responsive Uber prototype to test the impact of any new designs.

Because Atomic has built a game-changing components feature that can be easily shared across the team, I’ll create an example in their tool to demonstrate the real power of components.

Create Your Master View

Add placeholder elements

Select Elements and Create a Component

Create a component

Within this component, I’ll create the icons for each view and label them.

Finish adding elements to the navigation component

Customize the Component

Duplicate and modify component pages for each selected state

Next, let’s create hotspots to navigate between each page and copy them to each page of the component.

Add hotspots to switch navigation component pages when clicked

Add Page Actions

I can add a page action that listens for which page is active in the navigation component. Based on what it hears, the main prototype will switch to the corresponding view.

Add page actions in the main prototype to switch pages

There are other good uses of page actions, like automatic advancing. For instance, I created a launch screen. Upon loading, the prototype shows users this launch screen, then automatically moves to the home view with a page action.

Page actions can be used for automatic advancing

Collaborate with Your Team

Create a component for each view so your team can divide and conquer
Component library that can be shared with the team.

This feature is especially helpful when you’re in a time crunch during a design sprint to get your prototype finished in under a day. Organizing your prototypes with components also keeps the complexity down and chance for errors low. Debugging prototyping behavior is not fun!

Using Nested Components

A heart animation appears when double-tapping/clicking on this component
Nest the heart component inside the home page component

To recap what we’ve built here, below is the overall structure of the prototype with each component marked. By using components, we were able to break down the complexity into meaningful chunks. I glanced over many nuances in the design, so feel free to look at the prototype yourself and play with the source to dig deeper.

Designing and thinking in terms of components is paramount when building products. As John Maeda writes in his 2016 Design in Tech Report, designing systems and using computational design practices is where the future of design is heading.

Exposing Prototypes to The Real World

New advances with prototyping tools are narrowing the gap between what was possible before and what required serious engineering effort. For example, Craft allows you to quickly add interactive elements, access to your device camera or photos, external websites, and other device apps (Messages, Mail, Phone).

Prototyping with Your Device Camera

Use camera photos in Craft by renaming a layer to “_photo”

Here’s what the prototype looks like in action:

A prototype showing how to take a photo and post it to Instagram

While Craft Prototype is in beta, you may experience some unexpected behaviors. When I was putting this example together, I ran into some trouble adding input fields then syncing the prototype to my device; and layering objects above the photo from my device camera. As Craft Prototype matures, I’m sure this will become more stable.

A Prototype that Remembers and Communicates

Prototyping, while a helpful activity in deciding what to build, comes at a cost — whether that is mental, temporal, or financial. Like I mentioned in Part 1 of this article, we should all strive to express our ideas in as little time as possible. I hope you’re able to harness the power of these new prototyping capabilities to lower the cost of your decision making.

Follow me on Twitter at @KunalsLab or right here in Medium so you don’t miss the article. Please let me know if you found the post valuable with your 👏. Thanks!

Product Designer • @SlidesUp (@ycombinator SUS'17) to help you at conferences