To make it easy to peruse these different views, use a component. Devices with different viewport sizes will segment the content in different places. That gives you a sense of what content is initially cut off when users first navigate to that prototype frame. Handy, right?īut there are times when you want to see what's visible in the viewport by default (i.e. If the content exceeds the height of the viewport for the device you selected, Figma will automatically scroll the frame when in prototype mode. When you're designing longer scrolling screens with fixed elements, such as status bars, headers or footers, you can simply drag the bottom of the frame down to accommodate the extra content. I often place some of these repeated components off to the side, outside my mockups, as a convenient place to access them and maintain the linked connections to different screens. Figma allows you to deep select down into the nested layers within each component, so you can still link multiple menu items from the instance without it detaching from the master. Instead, create a new master component with the instance from your library inside it. Because the master component is located in a different file than yours, out of the gate, you won't be be able to leverage the previously mentioned tip.

One caveat: This doesn't work if you're dragging an instance of a component from a team library. Moving forward, any time you create an instance of the hamburger component, all the connections will automatically propagate! No more beating your head against a wall with busy work. Once you've done that, link each menu item of that master component to the appropriate frame. Early in your process, turn your hamburger menu into a component. If that menu is repeated across multiple screens, as tab bars often are, the tedious task of linking can take way longer than it should. You have to link each menu item to a specific frame (like linking the 'home' button back to the home frame). Let's say you're designing a screen with some sort of persistent navigation, like a tab bar. Use master components to speed up prototype connections To help streamline and speed up your prototype creation workflow, I collected a few of my favorite tips and tricks for you. As designers, we build prototypes for a lot of different purposes: Running user tests, presenting realistic plans to stakeholders, communicating intent to developers, the list goes on.īecause prototypes are so important across the design process, the experience of making them needs to be fast and easy.

Figma prototype