updated
What device frames can I use in Studio?
There are many device frames to choose among for Studio prototypes, and these three frame settings are available for all Studio presets:
- Shadow: Add a subtle shadow effect to the edges of the viewport.
- Border: Fill the area with a color.
To change the color, open the preview modal, click the settings cog icon (
), and then click the color box below Appearance.
- None: The area will be completely white.
Available device frames
Outlined in the table below, Studio has additional frame options for specific presets.
| Preset | Available Frame Options |
|---|---|
| Web > Web X Large | Select a frame:
|
| Web > Web Large | Select a frame:
|
| Web > Web Medium | Select a frame:
|
| Web > Web Small | Select a frame:
|
| Phone > iPhone XS Max | Select a frame:
|
| Phone > iPhone XS | Select a frame:
|
| Phone > iPhone XR | Select a frame:
|
| Phone > iPhone 8 Plus | Select a frame:
|
| Phone > iPhone 8 | Select a frame:
|
| Phone > iPhone SE | Select a frame:
|
| Phone > Galaxy S7 | Select a frame:
|
| Phone > Galaxy S8 | Select a frame:
|
| Phone > Google Pixel 2 | Select a frame:
|
| Phone > Google Pixel 2 XL | Select a frame:
|
| Tablet > iPad Air | Select a frame:
|
| Tablet > iPad Air | Select a frame:
|
| Tablet > iPad mini | Select a frame:
|
| Tablet > iPad Pro 11" | Select a frame:
|
| Tablet > iPad Pro 12.9" | Select a frame:
|
| Tablet > Nexus 9 | Select a frame:
|
| Watch > Apple Watch Series 3 38mm | Select a frame:
|
| Watch > Apple Watch Series 3 42mm | Select a frame:
|
| Watch > Apple Watch Series 4 40mm | Select a frame:
|
| Watch > Apple Watch Series 4 44mm | Select a frame:
|
| Watch > Moto 360 | Select a frame:
|
| Computer > 27" iMac | Select a frame:
|
| Computer > 13" MacBook Air | Select a frame:
|
| Computer > 15" MacBook Pro | Select a frame:
|
| Computer > MS Surface Book | Select a frame:
|
| Computer > Dell XPS 15 | Select a frame:
|
| Computer > Dell XPS 13 | Select a frame:
|
| TV > HD | Select a frame:
|
| TV > UHD | Select a frame:
|
| Social Media > Twitter Post | Select a frame:
|
| Social Media > Twitter Header | Select a frame:
|
| Social Media > Facebook Post | Select a frame:
|
| Social Media > Facebook Cover | Select a frame:
|
| Social Media > Instagram Post | Select a frame:
|
| Social Media > Instagram Story | Select a frame:
|
| Social Media > Dribble Shot | Select a frame:
|
Setting your device frame
To set your device frame in the inspector panel:
- Select one or more artboards.
Remember to select a device in the Preset dropdown of the inspector panel, as the preset affects which frame options you can use. - Under Preview in the inspector panel, click Frame and select the frame you want to use.
- If you want to override those device frame settings when previewing the artboard in Studio, open the preview modal, click the settings cog icon (), and select the Override artboard settings checkbox.
