Figma’s Inline Navigation Prototype

Figma added a new prototype for inline navigation. Now you can able to scroll to any section with the same artboard. This cuts out the excess screens and reduces the chaos in the prototype preview.

Inline Navigation In Figma:

In the latest update, Figma added Inline Navigation to the prototype. With this, it's easier to navigate to a particular section within the same artboard.

Prototype output of inline navigation

Composing:

This prototype is very much easy to achieve. Follow the upcoming steps to make inline navigation.

Step 1: You need two frames in an artboard to achieve inline navigation. One frame is to trigger the prototype and another is to respond to the trigger.

Triggering and responding frames for inline navigation

In the above example, I have used a floating button as a triggering frame and a Jan month in the calendar as a responding frame

.Step 2: To enable scrolling, select the frame, and choose vertical scrolling in the overflow behavior section.

Figma’s right panel inside the prototype

Note: Switch from design to prototype to enable overflow behavior panel.

Step 3: Click the triggering frame and point the prototype head to the responding frame and choose On tap and Scroll attributes in the prototype panel.

Figma’s Prototype panel

Choose Animate in the animation panel and give ease type and time as you wish.

I hope you have succeeded in making inline navigation. This is the very first attempt of mine to use this feature in Figma and I try to make many more prototypes with these awesome features and share them with you. Cheers!!

Know more about Figma.