How to Make the Figma Prototype Responsive

‍

‍

It is very easy to make the Figma prototype responsive. Here’s a quick guide on how to do it:

‍

1. Inside your Figma design canvas, find and select the component you want to use as the navigation button.
2. After that, head over to the right-side panel and click the 'Prototype' tab.
3. Hover your mouse cursor to the selected component.
4. Next, grab the 'Add' icon and drag it to one of the prototype frames you wish to use.
5. Configure the Interaction settings properly to create a responsive connection. As for the Trigger, use 'On Click'. Meanwhile, select 'Navigate To' for the Action. You can customize the rest of the settings based on your preferences.
6. Do the same series of steps for the other navigation button.
7. Once done, right-click the navigation component and select 'Copy'.
8. Subsequently, right-click the first prototype frame and select 'Paste Here'. After that, paste the navigation component into the other prototype frame.
9. Finally, click the 'Present' button at the top-right corner to view and check the output.
10. After completing these steps, your Figma design will become responsive based on your prototype inputs. Simply click the navigation component to see how your design responds.