MenuToggle Menu

Importing Designs from Figma

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

Key Differences Between 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.
[object Object]

The ProtoPie Plugin for Figma

Import your designs from Figma into ProtoPie, all done locally–without latency.

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

Here are a few tips:

  • Keep both Figma and ProtoPie open and visible on your desktop while importing your designs into ProtoPie for the best performance.
  • When importing, use top-level frames as scenes and objects with the same layer hierarchy, positioning, and constraints as in Figma.

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.

Importing Flattened Layers

Starting from ProtoPie 7.10, you can now flatten layers in Figma before exporting them to ProtoPie.

[object Object]

Option 1: Export

When you click the "Export" button, you're essentially transforming the main structure of your selected sections into a scene. If there are any properties that ProtoPie doesn't support, they will be brought in as SVG layers.

Note: If the imported design looks different from Figma due to unsupported properties, reimport it using the “Export as Flattened” option.

Option 2: Export as Flattened

Choosing the "Export as Flattened" button lets you bring your Figma object into ProtoPie as a PNG image, flattened by the highest object.

You can also merge and import several layers into a single layer, which makes it easier to apply interactions inside Studio later. The density of the imported PNG file will match the setting you have in ProtoPie.

Note: The option to flatten layers is only available in ProtoPie version 7.10 or later.

Importing as Scenes

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

Importing Objects

Objects with the same layer hierarchy, positioning, and constraints in Figma can be imported one by one or in bulk. Anything not a top-level frame will 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.

[object Object]
Importing as SVG

Import vector layers in Figma as SVG (Scalable Vector Graphics) in ProtoPie. Convert them to shapes after importing them (Object → Make Editable) to make the properties editable. ProtoPie doesn't 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 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 will import these as Jump responses with Smart transitions.

Learn more about the Jump response.

[object Object]
Reimporting designs

When reimporting frames and objects from Figma, they will generally replace what was previously imported, but 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 it into ProtoPie.
  • If you want to have duplicates of a scene or object, import it once and duplicate it. For example, you want a top-level frame from Figma as two scenes in ProtoPie. Import this once and duplicate the scene to create a second one.
  • If you export an object using the "Export" button and then decide to re-export it using "Export as Flatten", all its layers will be swapped out for a single, flattened layer.
  • On the flip side, if you initially exported an object with "Export as Flatten" and later decide to export it again using "Export", it will be transformed back into an object with multiple layers.
  • No matter what, it will always come back in the same format as your most recent selection when you re-import.
  • Remember, though, that re-importing only works for objects within a scene.

Legacy Figma Import

The legacy import allows you to import all layers, or only those marked for export, from your Figma files. Learn more about marking for export in Figma.


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

panel figma import

Looking to improve your skills in managing large-scale projects and resources effectively?

Learn to import only essential assets from Figma or other design tools, optimize the prototype's performance, and reduce unnecessary clutter with our newest Mobile Game prototyping masterclass.

If you wish to explore further, join the ProtoPie Masterclass for free and learn advanced techniques and strategies to take your ProtoPie skills to the next level. Our expert instructor will guide you through the best practices for creating successful projects. Sign up now and become a ProtoPie power user!


Back To Top