Intro

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

Get Started

Open the Sketch, Adobe XD or Figma file that you’d like to use for importing and open ProtoPie Studio. Select “Import...” from the file menu in ProtoPie.

sketch import

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

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 CC
Remove layers that have been deleted in Adobe XD when re-importing an artboard from Adobe XD

Figma Import (Beta)

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

FAQ

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

    The fact that Figma is an online interface design tool brings its own set of challenges regarding ProtoPie its integration with Figma. Hence, importing a frame from Figma into ProtoPie could take longer than importing an artboard from Sketch or Adobe XD. Possible reasons for this are an affected latency depending on how far away you are located from Figma's server as well as your own internet connection.

    Make sure that you have a fast internet connection with enough bandwidth to ensure the best performance. Furthermore, we will keep working with Figma to improve any possible issues.

  • Why have some layers been imported from Figma incorrectly?

    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. This frame that you just re-imported will appear as one layer in ProtoPie.

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

Other Options

Recently used

The recently used tools and settings are shown here.

Re-import from Recently used

The recently used tools and settings are imported.

Language selector
TOP