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
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.
-
- Add a frame in Figma covering all layers that have been imported incorrectly before.
- If these layers have visual effects such as shadow and blur, make sure the frame is big enough to contain the aforementioned layers.
- Put the aforementioned layers into the frame.
- Mark the frame as exportable.
- Re-import your frame into ProtoPie after selecting the “Only layers marked for export” option.
- 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.
