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.