Importing Designs from Figma

Importing Flattened Layers

You can flatten layers in Figma before exporting to ProtoPie for better visual fidelity.

Option 1: Export

Clicking the Export button behaves differently based on what you’ve selected and the export type you choose—Scene, Object, or Flattened.

For example, if you select a frame and choose the Scene export type, the structure of that section will be converted into a ProtoPie scene. Any properties that ProtoPie doesn’t fully support will be brought in as SVG layers.

Note: If your imported design appears different from Figma due to unsupported properties, try reimporting it using the Export as Flattened option for a more visually accurate result.

Option 2: Export as Flattened

Use the Flattened export type to bring your design into ProtoPie as a simplified, merged image. This is especially useful when visual fidelity matters more than layer-level detail.

You can flatten individual layers or combine multiple layers into one before importing. This makes it easier to manage interactions and maintain visual consistency in Studio.

The final resolution of the flattened image will follow the density setting in ProtoPie.

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.

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.

Importing Auto Layout

ProtoPie supports importing basic Auto Layout properties from Figma. Advanced settings are also imported to match the original design. However, editing these settings in ProtoPie Studio may reset them, affecting the layout.

For objects with rotation values other than 0, ProtoPie sets the origin to (50, 50) during import to ensure accurate positioning.

Reimporting designs

When reimporting frames or objects from Figma, most layers are updated automatically. However, changes made inside ProtoPie are preserved and won’t be overwritten.

Things that won’t be updated on reimport:

• Objects you’ve modified in ProtoPie (e.g., size, position, style).
• Layers you’ve moved within the layer panel (e.g., added to a scroll container).
• Deleted layers—unless you select and import them again from Figma.

Additional tips:

• To create duplicates of a scene or object, import once and duplicate it in ProtoPie.
• Reimporting always follows the most recent export type (Scene, Object, or Flattened).
• If the design doesn’t appear as expected, try reimporting it using the Flattened option.

How ProtoPie keeps track of imported layers:

• Each object imported from Figma has a unique internal ID.
• Only objects from the same file and original import can be reimported and updated.
• Switching the export type (e.g., from Scene to Flattened) replaces the previous import with the new format.

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