Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


What device frames can I use in Studio?

Follow

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 (studio-preview-settings-gear-icon.png), 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:
  • Border
  • Shadow
  • None
Web > Web Large Select a frame:
  • Border
  • Shadow
  • None
Web > Web Medium Select a frame:
  • Border
  • Shadow
  • None
Web > Web Small Select a frame:
  • Border
  • Shadow
  • None
Phone > iPhone XS Max Select a frame:
  • Space Gray
  • Silver
  • Gold
  • Border
  • Shadow
  • None
Phone > iPhone XS Select a frame:
  • Space Gray
  • Silver
  • Gold
  • Border
  • Shadow
  • None
Phone > iPhone XR Select a frame:
  • Blue
  • Coral
  • Red
  • Silver
  • Space Gray
  • Yellow
  • Border
  • Shadow
  • None
Phone > iPhone 8 Plus Select a frame:
  • Space Gray
  • Silver
  • Gold
  • Border
  • Shadow
  • None
Phone > iPhone 8 Select a frame:
  • Space Gray
  • Silver
  • Gold
  • Border
  • Shadow
  • None
Phone > iPhone SE Select a frame:
  • Space Gray
  • Silver
  • Gold
  • Rose Gold
  • Border
  • Shadow
  • None
Phone > Galaxy S7 Select a frame:
  • Black
  • White
  • Gold
  • Silver
  • Border
  • Shadow
  • None
Phone > Galaxy S8 Select a frame:
  • Midnight Black
  • Orchid Gray
  • Coral Blue
  • Arctic Silver
  • Maple Gold
  • Border
  • Shadow
  • None
Phone > Google Pixel 2 Select a frame:
  • Clearly White
  • Just Black
  • Kinda Blue
  • Border
  • Shadow
  • None
Phone > Google Pixel 2 XL Select a frame:
  • Black and White
  • Just Black
  • Border
  • Shadow
  • None
Tablet > iPad Air Select a frame:
  • Gold
  • Silver
  • Space Gray
  • Border
  • Shadow
  • None
Tablet > iPad Air Select a frame:
  • Gold
  • Silver
  • Space Gray
  • Border
  • Shadow
  • None
Tablet > iPad mini Select a frame:
  • Gold
  • Silver
  • Space Gray
  • Border
  • Shadow
  • None
Tablet > iPad Pro 11" Select a frame:
  • Silver
  • Space Gray
  • Border
  • Shadow
  • None
Tablet > iPad Pro 12.9" Select a frame:
  • Silver
  • Space Gray
  • Border
  • Shadow
  • None
Tablet > Nexus 9 Select a frame:
  • Black
  • Border
  • Shadow
  • None
Watch > Apple Watch Series 3 38mm Select a frame:
  • Gold Aluminium / Cocoa
  • Aluminum / White
  • Rose Gold Aluminum / Midnight Blue
  • Space Gray Aluminum / Black
  • Stainless Steel / White
  • Space Black Stainless Steel / Black
  • White Ceramic / White
  • Border
  • Shadow
  • None
Watch > Apple Watch Series 3 42mm Select a frame:
  • Gold Aluminium / Cocoa
  • Aluminum / White
  • Rose Gold Aluminum / Midnight Blue
  • Space Gray Aluminum / Black
  • Stainless Steel / White
  • Space Black Stainless Steel / Black
  • White Ceramic / White
  • Border
  • Shadow
  • None
Watch > Apple Watch Series 4 40mm Select a frame:
  • Gold
  • Border
  • Shadow
  • None
Watch > Apple Watch Series 4 44mm Select a frame:
  • Gold
  • Border
  • Shadow
  • None
Watch > Moto 360 Select a frame:
  • Gold / Cognac
  • Silver / Black
  • Black / Black
  • Border
  • Shadow
  • None
Computer > 27" iMac Select a frame:
  • 27" iMac
  • Border
  • Shadow
  • None
Computer > 13" MacBook Air Select a frame:
  • 13" MacBook Air
  • Border
  • Shadow
  • None
Computer > 15" MacBook Pro Select a frame:
  • Silver
  • Border
  • Shadow
  • None
Computer > MS Surface Book Select a frame:
  • MS Surface Book
  • Border
  • Shadow
  • None
Computer > Dell XPS 15 Select a frame:
  • Dell XPS 15
  • Border
  • Shadow
  • None
Computer > Dell XPS 13 Select a frame:
  • Dell XPS 13
  • Border
  • Shadow
  • None
TV > HD Select a frame:
  • HD
  • Border
  • Shadow
  • None
TV > UHD Select a frame:
  • UHD
  • Border
  • Shadow
  • None
Social Media > Twitter Post Select a frame:
  • Border
  • Shadow
  • None
Social Media > Twitter Header Select a frame:
  • Border
  • Shadow
  • None
Social Media > Facebook Post Select a frame:
  • Border
  • Shadow
  • None
Social Media > Facebook Cover Select a frame:
  • Border
  • Shadow
  • None
Social Media > Instagram Post Select a frame:
  • Border
  • Shadow
  • None
Social Media > Instagram Story Select a frame:
  • Border
  • Shadow
  • None
Social Media > Dribble Shot Select a frame:
  • Border
  • Shadow
  • None

Setting your device frame

To set your device frame in the inspector panel:

  1. 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.
  2. Under Preview in the inspector panel, click Frame and select the frame you want to use.

    studio-device-frames-inspector-panel.gif
  3. If you want to override those device frame settings when previewing the artboard in Studio, open the preview modal, click the settings cog icon (studio-preview-settings-gear-icon.png), and select the Override artboard settings checkbox.

    studio-preview-override-device-frame.gif

Was this article helpful?

Still have a question?

Contact Us