Figma is an entirely browser-based interface design tool, and one that we’re increasingly recommending to Designlab students.
Not only is the platform free—Figma also allows you to collaborate on a file in real with others (like your mentor!)
With the release of Figma 3.0, you now have access to a raft of powerful prototyping tools within Figma itself. You can learn about the basics of prototyping in our popular Figma 101 free email course—and in this post we’ve got four tips to help you experiment with more advanced prototyping functionality.
Work through these steps to create a functioning sticky nav bar in your Figma prototype, as well as an iOS-style modal, floating action button, and slide-in hamburger menu! These interactions can all help you to rapidly create higher fidelity, more realistic prototypes that you can then deploy in user testing for your project.
These techniques are great for students and professionals alike!
Create a sticky nav bar
Want your users to have full control over how they navigate your website? With a “sticky” nav bar, the element follows the user as they scroll! To create one in Figma, just follow these steps:
1. Create your main page. For this example, we created a 1440 x 1890 frame for a fictional travel company’s website. We added a landing section with a tagline and search bar above the fold, then some trip items arranged in two columns below the fold. Make sure to create enough vertical content to scroll through.
2. Create your nav bar. We added a 1440 x 96 rectangle on top of the main page, including a quick logo on the left, and some nav items on the right. We then grouped all these elements together, and labeled them “Header” in our Figma file.
3. Make your nav bar sticky. First, make sure your header group is selected. On the right-hand side of the Figma interface, you’ll see three tabs: Design, Prototype, Code. In the Design tab, under the section called “Constraints”, check the box that says “Fix position when scrolling.” You’ll notice a small change in your layer list on the left: Your header group will now have a “Fixed” label above it, while all other content in your frame will be nested below a “Scrolls” label.
Last, see it in action! Click the Play/Present icon in the top-right of the Figma interface (it’s just to the right of the blue “Share” button). This will open your file as a prototype in a new tab. Try scrolling, and watch as your nav bar… goes nowhere!