Rapid Prototyping: A Guide for UX DesignersRapid Prototyping: A Guide for UX Designers

If we put the rapid back in prototyping, would you go interactive? Learn how to design a realistic prototype in 5 minutes, no code needed.

avatar

Peri Langlois

December 6, 2019

Regardless of what type of design you do, validating your work early and often is generally considered good form. Prototypes serve the singular purpose of moving you closer toward a solution. Given that, interactive prototypes are indisputably the quickest way to test not just how things look, but also how they feel. The downside here is the upfront time investment and technical knowledge. Well, what if you could create a high-fidelity prototype on the canvas, in the same amount of time as a low-fidelity wireframe?

In this rapid prototyping guide, we’ll walk you through Framer’s set of interactive canvas tools and pre-made component packages to show you how to turn a visual wireframe into a high-fidelity interactive prototype, no code needed.

What is rapid prototyping?

We define rapid prototyping as the act of quickly laying out UI screens or user flows and adding interactivity so that designers, potential users, and stakeholders can test a concept. Designing UI dictates how something should look, whereas rapid prototyping dictates how it should feel and behave. If done right, it will make sure everyone is on the same page and save a lot of time in the product design process.

Why is it so important?

The emphasis here is on rapid. Explore different states, test micro-interactions, and validate entire user flows. The goal here is to find pain points in your ideas and spot confusing user experiences, refining them well before development. In this way, your first stages of rapid prototyping become a form of research.

The power of rapid prototyping can also be seen in the next phase of the design process, when you demo your prototype to teammates, stakeholders or users. Interactive prototypes that mimic real-life experiences have been proven to generate better feedback, earlier in the design process. Getting this kind of high-quality feedback is crucial in order to build good, user-centered products.

How does it work?

We’ve talked about why you should do, so now let’s get into the how. Rapid prototyping is only worth doing if it can be just that—fast and high-fidelity. In Framer, you can use the out-of-the-box interactive tools to create a mock that is interactive from the start. You can also use public packages such as Magic Move or Switch to add advanced transitions and interactions without using code. Other component packages like Google Forms, Data Stack (JSON files or APIs), or Mapbox allow you to quickly populate your prototypes with real, live data to create prototypes that are almost indistinguishable from the real deal.

Components for rapid prototyping

Get started with rapid prototyping in 5 minutes

Step 1: Import from Sketch

You can start from scratch in Framer. But if you already have designs in progress, you can easily migrate your static designs from Sketch into Framer to kickstart the rapid prototyping process. This is as simple as copying and pasting thanks to our Sketch import plugin.

Import designs from Sketch

Step 2: Add interactivity to your prototype

Using the ‘Replace with’ feature, swap out static symbols or elements from your Sketch designs and replace them with interactive components. Install these from our selection of public packages, or use one of your team’s shared private packages.

Step 3: Share your prototype

Once your prototype is interactive, you can share it with your fellow designers, or anyone else you’d like feedback from—copywriters, developers, and product managers. In order to share your prototype, you can use a few different methods. The Live Preview feature allows you to share your project’s Preview window through a temporary URL. If you want to preview the prototype from anywhere at any time, you can export a Web Preview and upload the folder to a service that can host static websites.

Preview your prototypes
Enjoying this post?

Sign up here to get content on prototyping, design, and the latest Framer updates delivered to your inbox.

Components for rapid prototyping

Components are a great resource for rapid prototyping. They help you easily kickstart a design and bring up the fidelity, without having to do it from scratch. The beauty of components in Framer is that they can also contain pre-built interactions and give you the ability to easily add live data. In many cases, the component creator has also added custom UI to allow you to customize details in the properties panel. Components are bundled as packages and they’re free, one-click install, and work directly on the canvas. You can browse, search, and install thousands of components, available under the Packages tab in the app. Here are some of the best packages for adding UI elements, interactions, and interactive components.

Quick UI elements

Use these starter packs to easily insert pre-built UI elements and design a realistic, high-fidelity prototype in a matter of minutes.

UI tools

Easy animations

Drag any of the components onto the canvas to quickly create different micro-interactions and gesture-based transitions.

Easy animations

Interactive elements

Test different states on the canvas and allow people to actually interact with the UI elements of your prototypes.

Interactive elements

Live data

Increase the fidelity of your prototypes by using real data-a great way to stress-test designs. You can pull data from your own database or any public API.

live data

Prototyping tools in Framer

Rapid prototyping is a core element of Framer, so we’ve actually built interactive tools into our UI. The Link, Page, and Scroll tools can be found in the Tools panel. These out-of-the-box tools allow you to design on the canvas at the level of fidelity previously only achieved with code. Here are three ways to design with interactivity, right on the canvas.

Design flows with the Link tool

Good for: click-through, forms, UX flows, dropdowns, user testing

For a quick prototype, you can hook up frames and design components using the Link tool. To make your prototype interactive, simply select a frame, then click the target frame to form a link. Once the connection is made you can choose from different properties to create particular transitions. The six link transitions include Push, Overlay, Modal, Flip, Fade, and Instant.

In Framer, there’s no need to create separate hotspots in your prototypes—simply link elements directly to frames. So if you have a button made out of a frame and link that to the next screen, you can experiment with different transitions to quickly spin up a new flow.

In this video course, you can learn how to create an interactive user journey and mock up interactions between elements right from the Framer canvas

Create high-fidelity prototypes with the Page tool

Good for: hi-fidelity mockups, carousels, swiping

The Page tool is another versatile and customizable out-of-the-box tool in Framer to help you in the rapid prototyping process.

You might just associate the Page tool with creating carousels, but the exposed properties allow you to be much more creative. You can hook up any type of content to the Page tool and use five out-of-the-box effects, including cube, cover flow, wheel, and pile, to bring your prototype to life.

In this video lesson, you can learn how to create a date picker with the Page tool.

Add scrollable content with the Scroll tool

Good for: panning, zooming

The Scroll tool can be used to design for the actual dimensions of a device, so there’s no need to preview long frames of content that won’t fit on a screen. Adding scrolling to your prototypes is as easy as defining a scrollable area and then connecting it to any frame of content. The properties of the Scroll tool also allow horizontal, vertical and multidirectional scrolling in the same frame, so you can also use the Scroll tool to create cool effects such a panning or zooming on an image in a prototype.

If there are any terms mentioned within this post that you don’t understand, check out the Framer glossary.


Hopefully this article has helped straighten out some question marks around rapid prototyping. If you enjoyed this, check out some of our other resources:

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.