ProtoPie and Figma
This feature has been developed by ProtoPie and is currently in Beta. For any questions regarding ProtoPie or the integration, please contact the team at ProtoPie.
ProtoPie allows you to create Prototypes for a wide spectrum of digital products. ProtoPie is available on both macOS and Windows.
You can use ProtoPie for the basics, as well as try your hand at advanced conditional interactions. With ProtoPie you can:
- Create interactions across multiple devices
- Build hardware integrations
- Use device- specific sensors, such as the gyroscope, compass, microphone, and proximity sensors.
The integration allows you to import your Figma designs right into ProtoPie. From there, you can turn them into realistic prototypes.
In this article we'll cover how to:
- Connect Figma and ProtoPie.
- Import your designs from Figma.
- Disconnect your Figma account from ProtoPie.
1 | Connect Figma and ProtoPie
You can import your designs from Figma into ProtoPie.
Before you can get started, ProtoPie will need permission to access your files in Figma.
You'll only need to connect the two apps once. Once you've given ProtoPie permission, you won't have to do this again.Open ProtoPie on your computer.
- Click the Import icon in the top-left corner:
- Select Figma from the options.
- ProtoPie will ask for permission to access your Figma Files. Click Proceed to browser to open Figma in a new browser window.
- If you're not already, you'll need to login to your Figma account.
- Once signed in, click the Allow Access button to give ProtoPie permission to access your Files:
- Once completed you can close the browser window, or click the Go to ProtoPie button to open the ProtoPie app.
2 | Import your designs from Figma
You'll now be able to import your Figma designs into ProtoPie .
Tip! You can import any Frames from your "recently used" Files. A recently used File is a File that you have opened and/or edited in the last 12 hours.
Learn more about ProtoPie's options when importing from Figma: https://www.protopie.io/learn/import/#Figma_Import
- Open ProtoPie.
- Click on the same Import button in the top-left corner
- In the Frame dropdown, select the Frame you wish to import
- Choose the Import Size as required
- You can choose to import All layer structure, or Only layers marked for Export. Select All layer structure to import all layers
- Click Import to start the process
- ProtoPie will download the rendered layers into your current File. This will maintain the same layer order as in Figma
Re-Import your Designs
You can also use the import process to re-import Frames.
This allows you to bring across any changes you've made to the original design in Figma.
When you go through the import process, you will see a heading called Re-import Options. This allows you to determine how you want ProtoPie to reimport Frames.
When you Re-Import, you can choose whether to:
- Overwrite [any changes to the] positions of layers
- Overwrite [any changes to the] sizes of layers
- Update layer orders and grouping structure
- Remove layers deleted or made invisible in Figma
3 | Disconnect your Figma account
If you want to change the Figma account associated with ProtoPie, or disconnect them entirely, you can disconnect ProtoPie from your Figma account.
You can do this from the Account Settings page in your Figma account.
- Login to your Figma account
- Click on your name in the top-left corner and choose Account Settings
- Scroll down to the Connected Apps section
- Click Revoke access next to the ProtoPie integration:
Note: Once disconnected, you can connect a different Figma account to ProtoPie. Follow our instructions above to Connect Figma and ProtoPie.