Importing from Sketch & Photoshop - Tips for improving performance

Importing large Sketch or Photoshop files into Proto.io using the Proto.io 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 larger screens

This is caused because by default, all layers from Sketch or Photoshop 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 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. Moving 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.

Sketch 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

If you are looking to optimise your prototype to the maximum, or if you don't need individual layers for animations, you can group each screen under a single image and use Proto.io "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 Proto.io 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 Proto.io and this adds to the amount of layers and images loaded in the Editor and Player.

 

Have more questions? Submit a request