Import

ProtoPie supports importing your designs from Sketch on macOS, and Adobe XD and Figma, both on macOS and Windows, with just a few clicks.

Currently, we are working on the ProtoPie plugins allowing you to import your designs from Figma, Adobe XD, and Sketch, in a much faster and more flexible way.

In the long term, we will deprecate the legacy imports and focus on the plugins instead.

The ProtoPie plugins for Figma and Adobe XD are already available. The plugin for Sketch is coming soon.

Get Started

  • Legacy: Open the Sketch or Figma file that you would like to use for importing and open ProtoPie Studio. Select "Import..." from the file menu in ProtoPie.

  • Plugin: Install the ProtoPie plugin for Figma or Adobe XD, and open the plugin in the tool that you'd like to import from.

Figma Import (Plugin)

With the new 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.

Differences with the legacy Figma import?

  • 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.

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

The ProtoPie plugin for Figma requires ProtoPie 5.2 or higher.

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

Import 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.

Import 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.

Import 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.

Import 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.

Re-Import

Generally, re-imported 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, re-importing would not affect this particular object.

  • If you changed the layer hierarchy after importing, re-importing 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 re-imported, 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.

Figma Import (Legacy)

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.

You can 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

Sketch Import

ProtoPie provides a variety of ways on how you can import your designs from Sketch on macOS. You can customize the importing process by importing every layer or only the layers that have been set as "exportable" from Sketch.

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

Artboard

Select the artboard from Sketch that will be imported

Import Size

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

All layer structure

All layers from an artboard are imported in a folder structure

Exportable layers

Only layers that have been set to "exportable" are imported

Overwrite positions of layers

Overwriting position values of layers when re-importing an artboard from Sketch

Overwrite sizes of layers

Overwriting size values of layers when re-importing an artboard from Sketch

Update layer orders and grouping structure

Update layer orders and grouping structure when re-importing an artboard from Sketch

Remove layers deleted in Sketch

Remove layers that have been deleted in Sketch when re-importing an artboard from Sketch

Adobe XD Import (Plugin)

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

Control what you import. Import artboards as scenes, and objects with the same layer hierarchy, positioning, and constraints as in Adobe XD.

Differences with the legacy Adobe XD import?

  • Import one or multiple artboards and objects.

  • Import artboards 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.

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

The ProtoPie plugin for Adobe XD requires ProtoPie 5.3 or higher.

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

Import as Scenes

Import an artboard in Adobe XD as a scene in ProtoPie while keeping the same name. It's possible to import one or multiple artboards as scenes at once. Importing artboards as scenes is based on Adobe XD's layer hierarchy.

Import Objects

Import objects with the same layer hierarchy, positioning, and constraints as in Adobe XD. It's possible to import one or multiple objects at once.

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

Import as SVG

Import vector layers in Adobe XD 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.

Import Text Layers

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

Re-Import

Generally, re-imported artboards and objects from Adobe XD would replace what was imported before. However, there are some exceptions to consider.

  • If you changed some properties of an imported object in ProtoPie, re-importing would not affect this particular object.

  • If you changed the layer hierarchy after importing, re-importing 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 re-imported, unless you select only this specific layer in Adobe XD 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 an artboard from Adobe XD as 2 scenes in ProtoPie. Import this once and duplicate the scene to create a second one.

Adobe XD Import (Legacy)

Only available in ProtoPie 5.2 or lower.

ProtoPie provides a variety of ways on how you can import your designs from Adobe XD 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 Adobe XD. Learn more about marking for export in Adobe XD.

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

Artboard

Select the artboard from Adobe XD that will be imported

Import Size

Set the magnification factor for layers. This can be changed based on the size of the selected artboard in Adobe XD

All layer structure

All layers from an artboard are imported in a folder structure

Only layers marked for batch export

Only layers that have been marked with "batch export" in Adobe XD are imported

Overwrite positions of layers

Overwriting position values of layers when re-importing an artboard from Adobe XD

Overwrite sizes of layers

Overwriting size values of layers when re-importing an artboard from Adobe XD

Update layer orders and grouping structure

Update layer orders and grouping structure when re-importing an artboard from Adobe XD

Remove layers deleted in Adobe XD

Remove layers that have been deleted in Adobe XD when re-importing an artboard from Adobe XD

FAQs

Back To Top