Presets

Presets are pre-defined Artboard sizes of real world screen sizes devices.
Once you’ve defined Auto-Layout on your design, you can easily change Artboard sizes to these presets.

iOS

Device Width Height Scale
iPhone 4 320 480 2
iPhone SE 320 568 2
iPhone 7 375 667 2
iPhone 7+ 414 736 3
iPad Air 768 1024 2
iPad Pro 1024 1366 2

Scale means that the number of pixels is multiplied according to the scale value.

  • For example in iPhone 7 the screen size is 375x667 points, but 750x1334 actual pixels since Scale is 2.

Android

Device Width Height
Android Phone 360 640
Android Tablet 7’ 600 960
Android Tablet 9’ 768 1024
Android Desktop 1280 850

Web

Device Width Height
Desktop HD 1440 1024
Desktop 1024 1024
Tablet Portrait 768 1024
Mobile Portrait 320 1024

Custom

Presets Editor

The Plugin comes with a default collection of presets mentioned above. However you can easily add, edit, import and export your own presets.

Import

  1. Click “Platform” -> “Custom”
  2. The “Presets Editor” shows up, click “Import”
  3. Navigate and select the collection json file
  4. Done!

Export

So you’ve made the effort to create a perfect collection of presets and now your colleagues are jealous. Lucky enough you can become the hero of the day by just exporting your collection and sharing it with them.