Digital Prototyping

Types of Tools
Figma, XD, and Sketch are page-based prototyping tools and have excellent visual design components. Originally, interactivity in these tools was minimal and you would simulate interactivity by creating copies of screens where one or more elements changed. This is the ‘linking screens’ model below.

A different approach comes from a tool like Axure, in which you can program interactivity with built-in functions. In order to do so, you need to learn Axure’s interface, which can be time-consuming. Axure is very powerful and even allows you to hook up an actual database.

As strong as it is, these days Axure is used by only a fraction of the prototyping market, as shown by the graph below.

Digital Prototyping Basics
Page-based tools like Figma, Sketch and Adobe XD are similar in the way they support prototyping. The most common mechanism for interactivity is to connect screens by designating a clickable area on one screen, and linking it to another screen. Let’s take a look at this and other techniques.

Linking screens – Link screens together to allow a user to move to the next step in your flow. Or introduce new elements to a screen by making a copy of the screen image, adding new elements to the copied version, and linking the screens together. This is still the primary way to simulate interactivity in Figma, Sketch, and Adobe XD. It’s easy to:

  • Move from screen to screen in a user flow
  • Show overlays like popups
  • Expand content areas
  • Simulate dropdown lists


In the example below, the image that reads ‘Arctic’ is linked to the ‘Explore Topics’ screen. Clicking on the polar bear will bring Explore Topics into view. Thereafter, clicking on the back arrow returns to the original screen.

Components (Symbols in Sketch) are reusable pieces of your interface you can use throughout your product. The beauty of components is that when you create and then copy a component, changes to the original version will propagate to every place where it has been copied. 

For instance, early in your design you might not know what items will appear in your app’s final navigation bar. Start with a rough navigation bar, create a component and copy the component to all screens. As you change the original component, the newly-updated navigation bar will appear everywhere it has been copied.

Do the same for headers, logos, repeated images, buttons, and other objects.

Overlays – Page-based prototyping tools allow you to easily display popups or other overlays on top of part of a screen. These overlays can contain buttons, checkboxes, and other interactive objects that allow users to interact with them. However, if a user makes changes to an object in an overlay – such as clicking a checkbox – it requires a bit of effort to propagate those changes into subsequent screens in the product flow. You may need to create a parallel group of screens to show the effect of those changes.

You can customize an overlay’s on-screen position and animate them to make them slide in and out. You can easily define an object that closes an overlay, such as an ‘x’ object in the overlay.

An example of an overflow menu used as an overlay
This video introduces overlays in Figma
This video is a more advanced look at overlays

Animations – you can slide in menus (as overlays or new screens), slide screen images in and out, animate, dissolve, and other moves. Dissolve fades between 2 frames, Move In/OutPush and Slide In/Out are all common UI effects.

Figma’s Smart Animate is a way to connect two similar frames and get a fluid animation between them as if you animated it yourself.

Figma’s animation pane
This video demonstrates the different types of animations you can create in Figma
This video from Mizko shows you how to create sophisticated and advanced animations

Variants – This recent Figma development allows you to easily create and use checked and unchecked versions of checkboxes, on and off toggle switches that change when clicked, and different colored buttons to indicate a button at rest, on hover, when clicked, and disabled.

The following variant changes how an airplane seat is displayed on an seat map based on its state – available, selected, unavailable, or as the user hovers over it. It also has variants for two travel classes – Economy and Business class.

This Figma video introduces variants

Interactive components take variants a bit further by creating self-contained interactions.

The interactive component above allows you to switch between button states – checked and non-checked – with a single click. It’s explained in this video, which introduces interactive components using the checkbox example.

This video demonstrates the power of interactive components and how to create them.

Directing Users Through a Prototype 
Remember the earlier tip to prototype only what you need? You don’t need to make every interactive object functional. You don’t even need to make every instance of an object functional.

Here are a couple of ways to help your users understand the limitations of your prototype without causing confusion.

The following two images show easy overlays to help explain certain situations.

You also may want to create an overlay to hide cues.

Tools such as Figma normally clue users as to which items are interactive. If users click on a non-interactive item and then release the mouse, interactive items will be highlighted in blue. This tips  users off to which items are actionable.

This may not be desirable since once users know which objects are actionable, their behavior may change. Perhaps they would normally click on several on-screen items while hunting for the right one, but knowing that some of these are non-actionable might change that behavior. This might prevent you from learning about some user confusion with your design.

One way to counteract this is to make an area clickable and link it to a ‘This item is not interactive’ overlay as shown below. It’s a tiny bit tricky but here’s how to do it. The technique shown here doesn’t interfere with other objects on the screen, only the group of six images. If the user clicks on any image other than the polar bear, the screen at the right will appear.

Creating the Effect
I used two interactive areas to create this effect.

The outer layer is a frame – here shown inside a red border. At the left you will see it is called ‘Vertical Positioning Frame.’ It was created using auto-layout, but that’s not important for this tutorial.

In the Prototyping tab, I connected that outer frame to the greyed-out overlay called Non-Clickable Home.

The inner layer is Image 8, shown here inside a purple border. That is the ‘Arctic’ image, which is connected to the ‘Explore Topics’ page.

Figma works like CSS in that the most specific layer – here the inner image—takes precedence over the less specific, or outer layer. So, clicking on Arctic properly displays Explore Topics, while clicking anywhere else in the outer frame shows ‘Non-Clickable Home’.

Clicking on the ‘Sorry’ popup displays the original screen, returning it to its original state.

The dark background behind the popup at right is called a lightbox effect.

You can also disable Figma’s ‘blue highlight’ feature, but the technique described here may be useful in other situations as well.