Importing from Sketch & Photoshop - Tips for improving performance

Importing large Sketch or Photoshop files into using the Design Plugins for Sketch or Photoshop 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 Sketch or Photoshop are brought into 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 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 to 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 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

Sketch layers - Group with "@" character in front of its name 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

If you don't need individual layers for animations, or you are looking to optimize your prototype to the maximum, or you can group each screen under a single image and use "Interaction area" components and other native components to add interactivity to your prototypes.

Best practices:

  • For best performance, only bring in individual "Image" layers for the layers that you will be using in in Interactions or State Changes and Transitions. 
  • Only sync the Pages and Artboards that are needed in your prototype. When syncing, all Pages and Artboards are created as and this adds to the number of layers and images loaded in the Editor and Player.


Have more questions? Submit a request