It is very easy to make the Figma prototype responsive. Here’s a quick guide on how to do it:
- Inside your Figma design canvas, find and select the component you want to use as the navigation button.
- After that, head over to the right-side panel and click the 'Prototype' tab.
- Hover your mouse cursor to the selected component.
- Next, grab the 'Add' icon and drag it to one of the prototype frames you wish to use.
- 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.
- Do the same series of steps for the other navigation button.
- Once done, right-click the navigation component and select 'Copy'.
- Subsequently, right-click the first prototype frame and select 'Paste Here'. After that, paste the navigation component into the other prototype frame.
- Finally, click the 'Present' button at the top-right corner to view and check the output.
- 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.
