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.
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-fi wireframe?
In this 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.
Why is rapid prototyping 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 or stakeholders. Interactive prototypes that mimic real-life experiences have been proven to generate better feedback, earlier in the design process.
How does rapid prototyping 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.
Start 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. This is as simple as copying and pasting thanks to our Sketch import plugin.
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 design 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.
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 help you easily kickstart a design, without having to start 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 maker 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 prototype in a matter of minutes.
Drag any of the components onto the canvas to quickly create different micro-interactions and gesture-based transitions.
Test different states on the canvas and allow people to actually interact with the UI elements of your prototypes.
Use real data in your prototypes to stress-test designs and fill it with real data—pulled from your own database or public APIs.
Prototyping tools in Framer
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.
Good for: click-through, forms, UX flows, dropdowns, user testing
For a quick prototype, you can hookup 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
Good for: hi-fidelity mockups, carousels, swiping
The Page tool is another versatile and customizable out-of-the-box tool in Framer.
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 it to life.
In this video lesson, you can learn how to create a date picker with the Page 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.
Enjoyed this blogpost? Check out some of our other resources:
Want more design articles?
Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.