Tips for Improving Performance when importing from Design tools

Importing large Design files into Proto.io using the Proto.io Design Plugins can sometimes affect performance:

• The Web preview and the mobile preview on the apps may take longer to load 
• The Editor may start to feel more sluggish for screens with hundreds of layers

This is caused because, by default, all layers from the Design Tool are brought into Proto.io as individual "Image" components during the import process, resulting in a very large amount of Image assets and layers if a large design file is imported.

The Proto.io Design plugins do this by default to easily allow:

• Adding interactions on an individual layer, e.g., a "Button" group/layer
• To facilitate Layer transformations using States and State transitions, e.g., Animating a layer between two states

Tip: You probably need to apply this on just a small number of layers!

Import fewer layers using the '@' character

You can improve performance by marking layers that you won't need to use for interactions or animations to be imported into proto.io as a single image. To achieve this, add the "@" character in front of their parent group's name. This will transfer fewer, easier-to-manage images into Proto.io.

Example usages:

You can use the "@" character to:

• Group the layers making up an icon into an "Icon" image
• Group the "Rectangle," "Text," and "Icon" layers making up a Button into a "Button" image
• Group the various layers making up a Header into a "Header" image
• Group all the layers that will not be interactable into a "Background" image

Export each artboard/frame as a single image

If you don't need individual layers for animations, or you are looking to optimize your prototype to the maximum, you can bring just one single image for each Screen, using the "Export each Artboard/Frame as a single image" setting (found under "Advanced settings").

You can then use Proto.io "Interaction area" components and other native components to add interactivity to your prototypes. Any prototyping interactions already in place in the Design Tool will be maintained, transferred as "Interaction area" components in your export.

Note: The option to "Export artboard/frame as a single image" is currently only available in the Proto.io Plugin for Adobe XD and Figma.

Best practices:

• For best performance, only bring in individual "Image" layers for the layers you will be using in Proto.io in Interactions or State Changes and Transitions, using the "@" character.
• Only export the Artboards/Frames that are needed in your prototype. All exported Artboards/Frames are created as Proto.io screens and this adds to the number of layers and images loaded in the Editor and Player.