This article covers key aspects of preparing prototypes before importing them using the Pathway Figma plugin.
Pathway repeats the logic of Figma, allowing you to create prototypes just as you always have. We offer 2 options of importing prototypes — via link and via plugin. We have an article where we compare the specificities of both options, you can check it our by following this link.
In this article you can find some essential tips to ensure your Figma prototype aligns perfectly with Pathway's capabilities when imported via our plugin:
1. Use the "Fit Width" Mode:
All prototypes in Pathway are presented in Fit Width mode. Ensure you set this option before verifying the functionality of your prototype.
2. Trigger and Interaction Compatibility:
Currently, Pathway supports the On Click and While Hovering triggers, the Navigate to and Show overlay interaction types. While animation support is on the horizon, please be aware that for now, all transitions will be converted to the Instant format.
How to import your Figma prototype?
Bringing your Figma prototype into Pathway is a straightforward process. Follow these steps to seamlessly integrate your creation:
1. Check that your prototype uses "Fit Width" Mode:
Ensure that your Figma prototype is set to display in Fit Width mode.
2. Run the plugin:
Run the Pathway Figma plugin within Figma. Simply right-click on your screen, navigate to Plugins, and locate the Pathway plugin.
3. Select Your Starting Point:
Designate the starting step within your prototype. If any unsupported triggers or interactions are detected, the plugin will assist you in making the necessary replacements.
4. Click "Import":
With your selections in place, click "Import." This action will generate the required code.
5. Paste the code:
Paste the generated code into the Figma block within your Pathway test, then click "Import."
You're all set! Your Figma prototype is now imported to Pathway.
Try out importing your prototype via link — here’s an article where we share the details of how to prepare your prototype with this option. If you encounter any challenges during the process or have questions, our dedicated support chat is just a message away. We're here to ensure your experience is as smooth as possible.