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. 

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.

1. Open ProtoPie and click on the Import icon in the top-left corner.
2. Select Figma from the options.
3. ProtoPie will ask for permission to access your Figma files. Click Proceed to browser to open Figma in a new browser window.
4. If you're not already, you'll need to log in to your Figma account.
5. Once signed in, click the Allow Access button to give ProtoPie permission to access your files.
6. When you're done granting access, you can close the browser window, or click the Go to ProtoPie button to open the ProtoPie app.

Import your designs from Figma

You'll now be able to import your Figma designs into ProtoPie. Learn more about ProtoPie's import options in their Import documentation (external link).

You can import frames from any file you have opened or edited in the last twelve hours.

Import new designs

1. Open ProtoPie
2. Click on the Import button in the top-left corner.
3. In the frame dropdown, select the frame you want to import.
   
4. Choose the Import Size as required.
5. Choose to import All layer structure, or Only layers marked for export. Select All layer structure to import all layers.
   
6. Click Import to start the process.
7. ProtoPie will download the rendered layers into your current file. This will maintain the same layer order as in Figma.
   

Re-import 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
  
  

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 your account settings in Figma.

1. Login to your Figma account and open the File Browser
2. Click on your name in the top-left corner and select the Settings tab.
3. Scroll down to the Connected Apps section.
4. Click Revoke access next to the ProtoPie integration: