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

With hundreds of tools to choose from now, how do you decide which tool is right for you? As the explosion of tools started in 2015, I wanted to understand the market using a framework that helped me evaluate my options.

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.

Components

If you’re familiar with Sketch, think of components as symbols. Components are reusable elements that stay in sync when you edit the master version. If you’re building new features for an existing product, think of components as a way to integrate your design system or style guide into your prototype. Building something new? Components can help you establish standards early on, while giving you the flexibility to make changes and have all your copies stay in sync.

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

Creating components from scratch starts with a normal design file and some up-front planning. Let’s recreate parts of Instagram since many are familiar with the app. Instagram has a few views with a navigation bar at the bottom, so let’s start there. I’m going to add some placeholder elements to set up my navigation.

Add placeholder elements

Select Elements and Create a Component

Now that I have some of the tab bar designed, I’ll create a component and iterate further in the component view.

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

The navigation bar has states to show which view you’re currently in. So, I’ll duplicate this component’s page and create selected states for each view.

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

Now that the navigation component handles switching states, I need a way for the view above to stay in sync. This is where Atomic has given us Page Actions to “listen” for events. Note that I’ve added several pages in my main prototype to represent each view.

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

The main structure of our Instagram prototype is complete. To make the rest of our prototype feel real, we’d still have to design each individual view. To speed up the process, I’ve created a component for each view. Now my team members can divide and conquer each view individually and have their changes automatically sync to the main prototype.

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

As you may have guessed, you can nest components inside each other. In our Instagram prototype, you can like a photo in multiple screens. I could create the heart animation as a component and allow my team to insert the heart within their own 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

Often times, we designers shy away from building the prototype we want because our designs are too complex — we hope the implementation comes out correctly in spite of omitting key details.

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

With Craft, I prototyped the photo-posting flow from Instagram. Feel free to download the Sketch source files for my prototype. Since my feed is not that interesting, I give thanks to Tobias van Schneider for his photos. I’m able to use my phone’s camera to take a photo and carry that photo through the rest of my prototype.

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

Another area that excites me is being able to give your prototypes a memory. By injecting real data, persisting state, or allowing real communication, you can prototype some experiences not possible with out-of-the-box tools. Since this topic requires a full article by itself, I recommend reading Marc Krenn’s article on using Framer with Firebase. Firebase is a web app platform that gives you a lot of the infrastructure to create complex prototypes for free.

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.

Next up: an article focusing on how to improve collaboration between designers and developers. Stay tuned!

Follow me on Twitter at @KunalsLab or right here in Medium so you don’t miss the article. Please recommend the post by clicking ? below if you found it valuable. Thanks!