If you have your designs already prepared in Figma, you can import them in Proto.io and easily start prototyping and adding interactivity without the need of starting from scratch.
Importing from Figma
To import your designs from Figma:
- Select the Frames you would like to import into your Proto.io prototype
- Access the "Proto.io" plugin from Figma's "Plugins" menu
- Choose your preferred settings, and "Export"
- Drag and drop the exported ".proto.io" file on your Proto.io project's canvas or in the side panel's "Project Assets" section
How it works
The selected top-level frames in Figma are converted into Proto.io Screens.
By default, the hierarchy of all nested groups, frames, components, and layers, as you have set it up in Figma, is maintained and transferred into Proto.io, and layers are exported as individual images. That allows you to easily attach interactions on individual layers in Proto.io, or animate individual layers or groups.
Importing interactions
Any prototype interactions created in Figma that are also supported by Proto.io will also be imported. You can turn this setting OFF in the Export settings.
Keeping Proto.io in Sync with updates to your Figma designs
If you make changes to your Figma designs, you can simply Export again and import the updated Frames into your Proto.io. As soon as you do that, all screen/layer images in the previously created screens will be updated to the updated designs.
The Proto.io Editor will prompt whether you also wish to re-create the Frames as new screens. This may be required if major changes have been made to the designs.
Modal in Proto.io when you re-upload an export that contains frames you had previously imported
Also see video: Using the Proto.io Design Plugin for Figma.