5 Simple Ways to Improve Your Prototyping Workflow
As designers, we create prototypes for various reasons: testing with users, presenting realistic plans to stakeholders, and sharing ideas with developers.
Because prototypes are so important in the design process, it’s crucial to make them quickly and easily. To help you speed up your prototyping workflow, I’ve shared some of my favorite tips and tricks.
1. Speed Up Prototyping with Master Components
Imagine you’re designing a screen with a persistent navigation element, like a tab bar. You need to link each menu item to its specific screen, such as connecting the ‘home’ button back to the home screen. If this menu is repeated across multiple screens, as is often the case with tab bars, manually linking each item can become tedious and time-consuming.
Here’s a simpler solution: Early on, turn your menu into a master component. Once that’s done, link each menu item in the master component to the appropriate screen. From then on, every time you use that component, all the links will already be set up — no more repetitive work!
However, keep in mind that this method won’t work if you’re using a component from a team library. Since the master component is in a different file, you won’t be able to use this trick directly.
Instead, create a new master component in your file by using the instance from the library. Figma allows you to select layers within the nested component, so you can still link menu items without detaching the instance. I usually keep these repeated components off to the side of my design, making it easy to access and maintain links across screens.
2. Use Components to Manage Scrolling Content
When designing long scrolling screens with fixed elements like status bars, headers or footers, you can easily extend the frame by dragging its bottom edge down to fit the extra content. If the content exceeds the device’s viewport, Figma will automatically make the frame scrollable in prototype mode — super convenient!
But sometimes, you need to see what’s visible in the viewport before a user starts scrolling. This helps you understand which content is initially hidden when users first land on the screen. Since different devices have different viewport sizes, what’s visible can vary. To manage this, use a component.
Here’s how to check what content is visible in a scrollable frame:
- Turn your scrolling content into a component.
- Set up constraints for all the elements inside it.
- Ensure “Clip Content” is enabled in the properties panel (this is usually on by default).
- Switch to prototyping mode and set the scrolling direction by configuring the “Overflow Behavior.”
- Place an instance of this component into your design and resize it to fit the viewport.
Now, you can quickly see what’s visible for each device size and manage your scrolling content from a single component.
3. Simulate Interactions with Timed Delays and Overlays
Instant interactions in prototypes can sometimes feel too abrupt for users. To make them feel more natural, you can add small touches like simulating loading screens or adding short delays.
One easy way to do this is by using the ‘After Delay’ trigger, which causes an interaction to happen after a set amount of time. Timed delays work especially well with overlays, as shown in the form example below.
Imagine a user filling out a form. If the form immediately jumps to a confirmation page, it can feel jarring. Instead, by using overlays with timed delays, you can create a smoother experience. For example, after the user clicks the submit button, they could see a brief loading screen followed by a success message before the confirmation page appears. This sequence feels more natural and intuitive for the user.
4. Table of Contents for Easy Reading
Currently, Figma prototypes are limited to single pages, so you can have separate prototypes in one document, each with its own unique URL. But sometimes, you might want to share just one link that lets people explore multiple design options.
To do this in Figma, create a ‘Table of Contents’ frame at the start of your prototype. Then, link each item in the table of contents to a different user flow. Although Figma will treat all these flows as part of one prototype, users will see them as separate options to choose from at the beginning. Just keep in mind that all your user flows need to be on the same page for this to work.
5. Making the Most of Observation Mode
Have you tried Observation Mode in Figma? It lets you watch someone else’s screen while they present or work on a design. Just click on their avatar in the top right corner of the editor to see exactly what they’re seeing.
Observation Mode also works with prototypes. By clicking on your collaborator’s avatar, you can follow along with where they are in the prototype and what they’re doing. This is especially useful for remote user testing, allowing you to observe how users interact with your design. It’s also great for making sure everyone stays on the same page during presentations or meetings.
