MenuToggle Menu

Importing Designs from Figma

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

  • Via the plugin (recommended): Install the ProtoPie plugin for Figma and open the plugin in Figma.
  • Legacy import: First, open the Figma file you want to import. Then, open ProtoPie Studio and select Import from the File menu.

Key Differences Between Plugin and Legacy Import

The ProtoPie plugin for Figma allows you to:

  • Import one or multiple sections, 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.
  • Import Auto Layout properties.
  • Import Figma components as reusable, linked components with variant support (Component Mode).
[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 9.5.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.

Here’s what’s new with the import experience:

Items are now imported individually and appear in ProtoPie Studio as soon as they’re ready. Previously, all items were processed at once and only became visible after everything finished—this update makes importing faster and more seamless.

Supported Properties

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

Learn more about layer properties in ProtoPie.

The plugin also supports importing these elements:

  • Sections
  • Main components - when Component Mode is enabled, main components are imported directly to your ProtoPie Library as reusable components
  • Component instances - stay linked on the canvas as references to Library components
  • Component variants - imported as separate components with variant support

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.

Importing Flattened Layers

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

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.

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

[object Object]
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]
Component Mode

Enable Component Mode in the plugin to import Figma components as reusable, linked components in ProtoPie.

Component Mode ON

When Component Mode is enabled:

  • Main components are exported directly to your ProtoPie local Library
  • Instances remain on the canvas as linked references to Library components
  • Variants are imported as separate components with full variant support
  • All nested components within your selection are automatically imported, preserving hierarchy and linked relationships

Component Mode OFF

When Component Mode is disabled:

  • All layers are imported as Scenes or Objects
  • Components are not preserved—they're treated as regular containers
  • To use Figma components in ProtoPie, you'll need to convert containers to components manually after import

Note: Component Mode works with Scene and Object export types. It does not apply to Flattened exports.

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]
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.
  • Component overrides made in ProtoPie (when using Component Mode).

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.

Re-export behavior with Component Mode:

  • When re-exporting from Figma, ProtoPie updates the component's visual properties (size, position, fill, stroke, text, layer order) only if the layer hasn't been edited in Studio. Instance links to Library components are preserved on reimport.

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.

Legacy Figma Import

The legacy import allows you to import all layers, or only those marked for export, from your Figma files. This function requires ProtoPie 9.1.0 or higher due to recent structural changes in Figma. Learn more about marking for export in Figma.

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

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!

FAQs

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

    Are you having trouble importing your designs to ProtoPie? Here are some troubleshooting steps:

    • Ensure you have the latest versions of Figma, Sketch, and Adobe XD installed, along with their respective ProtoPie plugins.
    • Make sure you use a fast and stable internet connection with enough bandwidth.

  • Why certain layers from Figma were imported incorrectly?

    If you notice that some layers haven't been imported correctly, it could be due to unsupported properties. We recommend checking out our import documentation, which provides detailed information on the supported properties when importing designs from Figma, Sketch, or Adobe XD.

  • I received a message saying “Not supported” when exporting my design. What does it mean?

    This message appears when a selected layer contains elements or properties that ProtoPie doesn’t fully support during export. While you can import these layers from Figma, they might not render or function as expected in ProtoPie due to limitations in feature compatibility.

    error while exporting from figma

  • What type of layers are supported?

    Frames, sections, and most basic layers can be exported without issues. However, some elements like slices or FigJam connectors aren’t supported for export. If you're working with those, try converting them to frames or standard layers before exporting.

  • What happens with partially supported properties?

    Some design properties in Figma are only partially supported by ProtoPie. While they won’t block export, they might not work as intended after import. Here are some common cases:

    • Multiple fills: These are exported as editable SVGs. If you want more control, consider separating each fill into its own layer or keeping just the top or bottom fill.
    • Advanced stroke settings: These are also exported as SVGs. To ensure consistency, you can convert strokes into rectangles before exporting.
    • Layer blur or inner shadow: These effects are ignored during export. If needed, flatten the layer to PNG—just note that this version won’t be editable in ProtoPie.
Back To Top