Tips for Faster Prototyping in Figma and Sketch

“Drive it before you buy it!” is a common mantra shouted by car dealerships everywhere. And there’s something to it. Before you drop a paycheck on a downpayment, you want to know how the steering wheel feels in your hands, whether the vroom of the engine is healthy and if you can stand the sound of the blinker.

The same concept has been applied to prototyping tools like Figma and Sketch – they let your users get behind the wheel before they drive away with your design. As designers, prototyping is important for many purposes, including:

• Showing stakeholders accurate plans
• Performing user tests
• Gaining insights into pain points with your product
• Collaborating with other designers
• Communicating intent to developers

Prototyping needs to be quick and easy because it is so important to the design process. You want to get to the user testing phase so you can work out any issues. Here are tips to help you with faster prototyping in Figma and Sketch.

Figma

Figma is a browser-based interface design tool that allows real-time collaboration. It’s cloud software that lets you design and prototype at the same time, so you get earlier insights into what’s going right and where you need improvement.

For faster prototyping in Figma, try these tips:

1. Use Figma’s smart selection tool

When you’ve set up a grid, you want to maintain the spacing and look of it. But you may need to move items around within that grid to find the right setup. Figma’s smart selection tool lets you do that. Instead of re-aligning everything and slowing yourself down, simply select all of the elements you need to and then use the lines to adjust spacing. You can also reposition the elements by dragging them to a different box on the grid.

2. Speeding up prototype connections with master components

Linking menu items back to specific frames is tedious work that slows down the prototyping process. Instead of manually repeating this across multiple pages, set your hamburger menu as a component. When you do that, you can link the menu items of that master component to the frame, and new instances of the component will automatically occur. You can’t do this if you’re bringing in component instances from a group library. But you can create a new master component because Figma lets you deep select in the nested layers to link without detaching from the master.

3. Speed up scrubbing

When in the Properties panel, you can speed up scrubbing by hovering over any value then clicking and dragging to change the values. For more precise scrubbing, slide the values up and down. It’s smooth, quick and efficient.

4. Creating a sticky nav bar in three steps

Having a sticky navigation bar is one way to simplify the user experience – they can navigate where they need to go quickly and easily. To quickly create a sticky navigation bar, create your main page. Then create the bar by adding a rectangle on top of the main page. Include navigation items and your logo and group these elements together. When your header group is selected, choose the Design tab, then the section titled “Constraints.” From there, you can check the “Fix position when scrolling” box.

5. Easy duplicating of layers

If you’re on a Mac, there’s no need to mouse around and click on functions to get your layers duplicated. Simply select the layer and Option drag it. Then use Cmd + D to duplicate.

6. Simulate interactions with timed overlays and delays

End users may complain about an interaction that happens too quickly. It can feel abrupt and disorienting. With the “After delay trigger” option, Figma allows you to add elements of realism with short delays or simulated loading. The trigger duration will need to be set in milliseconds and applied to a top-level frame, not a specific layer or object, but doing this can save you time on trying to understand why the end user is struggling with the prototype.