Importing From Figma

There are two ways to import your designs from Figma into ProtoPie.

• Plugin (recommended): Install the ProtoPie plugin for Figma and open the plugin in Figma.
• Legacy: Open the Figma file that you would like to use for importing and open ProtoPie Studio. Select Import from the file menu in ProtoPie.

ProtoPie Plugin for Figma

Download and install the ProtoPie plugin for Figma, which requires ProtoPie 7.0 or higher.

With the ProtoPie plugin for Figma, you have lightning speed and flexibility at your fingertips. Import your designs from Figma into ProtoPie, all done locally–without any latency.

Control what you import. Import top-level frames as scenes, and objects with the same layer hierarchy, positioning, and constraints as in Figma.

For the best performance, keep Figma open and visible on your desktop while importing your designs into ProtoPie.

First time? Try the ProtoPie plugin for Figma with this example file.

Supported Properties

• Visibility
• Lock
• Position
• Size
• Rotation
• Opacity
• Constraints
• Fill (solid color & image)
• Borders
• Shadow

Learn more about layer properties in ProtoPie.

Differences Between the Plugin and Legacy Import

The ProtoPie plugin for Figma allows you to:

• Import one or multiple frames and objects.
• Import top-level frames as scenes.
• Import what you selected.
• Import vector layers as SVG.
• Import text layers as SVG that can be converted to text layers.
• Import constraints as constraints.

Importing as Scenes

Import a top-level frame in Figma as a scene in ProtoPie while keeping the same name. It's possible to import one or multiple top-level frames as scenes at once. Importing top-level frames as scenes is based on Figma's layer hierarchy.

Importing Objects

Import objects with the same layer hierarchy, positioning, and constraints as in Figma. It's possible to import one or multiple objects at once. Whatever is not a top-level frame would appear as a layer or container in a scene.

Components and component instances in Figma are imported as containers. Convert them to components to keep them as components in ProtoPie. Learn more about components.

Importing as SVG

Import vector layers in Figma as SVG (Scalable Vector Graphics) in ProtoPie. To make their properties editable, just convert them to shapes after importing. ProtoPie does not support all SVG properties yet. Learn more about SVG layers.

Importing Text Layers

Import text layers in Figma as SVG in ProtoPie. To make their properties editable, convert them to text layers after importing. Learn more about text layers.

Importing Interactions

Import your prototypes’ interactions between frames from Figma to ProtoPie without any hassle.

ProtoPie automatically converts the interactions between frames in Figma into Jump responses upon importing. You no longer need to recreate transitions between scenes in ProtoPie before adding more complex interactions.

If your frames include any Smart Animate transitions, ProtoPie would import these as Jump responses with Smart transitions.

Learn more about the Jump response.

Reimporting

Generally, reimported frames and objects from Figma would replace what was imported before. However, there are some exceptions to consider.

• If you changed some properties of an imported object in ProtoPie, reimporting would not affect this particular object.
• If you changed the layer hierarchy after importing, reimporting would not affect this adjusted layer hierarchy. For example, you added an imported layer to a newly created scroll container.
• A deleted imported layer would not be reimported, unless you select only this specific layer in Figma and import this into ProtoPie.
• If you want to have duplicates of a scene or object, just import it once and duplicate it. For example, you want a top-level frame from Figma as 2 scenes in ProtoPie. Import this once and duplicate the scene to create a second one.

Legacy Figma Import

ProtoPie provides a variety of ways on how you can import your designs from Figma on macOS and Windows. You can customize the importing process by importing every layer or only the layers that have been marked for export in Figma. Learn more about marking for export in Figma.

Make changes to your designs in Figma and re-import your designs into ProtoPie. This means that you can go back and forth between Figma and ProtoPie, ensuring a seamless design and prototyping workflow.

Frame

Select the frame from Figma that will be imported

Import Size

Set the magnification factor for layers. This can be changed based on the size of the selected frame in Figma

All layer structure

All layers from a frame are imported in a folder structure

Only layers marked for batch export

Only layers that have been marked with "export" in Figma are imported

Overwrite positions of layers

Overwriting position values of layers when re-importing a frame from Figma

Overwrite sizes of layers

Overwriting size values of layers when re-importing a frame from Figma

Update layer orders and grouping structure

Update layer orders and grouping structure when re-importing a frame from Figma

Remove layers deleted in Figma

Remove layers that have been deleted in Figma when re-importing a frame from Figma

FAQs

• Why does it take so long to import my designs from Figma?

  UPDATE: try out the ProtoPie plugin for Figma, a revamped import experience to boost productivity.

  If you still use the legacy Figma import, see below.

  The fact that Figma is a browser-based interface design tool brings its own set of challenges. Hence, importing a frame from Figma into ProtoPie takes longer than importing from Sketch and Adobe XD. Possible reasons for this are affected latency as well as your own internet connection.

  Make sure you have a fast internet connection with enough bandwidth for the best performance.

• Why have some layers been imported from Figma incorrectly?

  UPDATE: try out the ProtoPie plugin for Figma, a revamped import experience to boost productivity.

  If you still use the legacy Figma import, see below.

  When a frame contains text layers, mask layers, and rotated layers, it is possible that they appear differently after importing due to technical limitations of Figma's API.

  You could work around this issue by doing the following:

  1. Add a frame in Figma covering all layers that have been imported incorrectly before.
  2. If these layers have visual effects such as shadow and blur, make sure the frame is big enough to contain the aforementioned layers.
  3. Put the aforementioned layers into the frame.
  4. Mark the frame as exportable.
  5. Re-import your frame into ProtoPie after selecting the "Only layers marked for export" option.
  6. The frame that you just re-imported will appear as one layer in ProtoPie.

  If this workaround does not work for you, it would probably be due to technical limitations of Figma's API. We recommend that you contact Figma directly.