Importing from Adobe XD - Tips for Improving Performance

Importing large Adobe XD files into Proto.io using the Proto.io Design Plugin for Adobe XD can sometimes have an effect on 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 Adobe XD are brought into Proto.io as individual "Image" components during the import process, which could result 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, eg. a "Button" group/layer
  • To facilitate Layer transformations using States and State transitions, eg. Animating a layer between two states

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

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

mceclip8.png

mceclip9.png

Adobe XD Layers - Group with "@" character in front of its name

Proto.io Layers - Group imported as a single image

 

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 as a single image

If you don't need individual layers for animations, or you are looking to optimise your prototype to the maximum, you can bring just one single image for each Screen, using the "Export each Artboard 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 Adobe XD will be maintained, transferred as "Interaction area" components in your export.

Best practices:

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