'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Set prototype device and background settings
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
Before you start
Who can use this feature
Available on any team or plan.
Anyone with can edit access to the file can adjust prototype settings.
You can control how a prototype appears to users in both presentation view and inline preview. This can help make a prototype feel more realistic, or on-brand.
Access prototype settings
To access prototype settings:
- Deselect any objects by clicking an empty part of the canvas.
- Select the Prototype tab in the right sidebar.
- Device: Customize the device type, orientation, and model used in presentation view.
- Background: Set the background color when playing prototypes in presentation view.
- Flows: View and manage prototype flows on the current page. Learn more about prototype flows →
Device
Use Device settings to place your prototype in a realistic container. You’ll see the device container when you play your prototype using inline preview or presentation view.
Device
Figma has a number of popular device presets. The dimensions of your prototype frames will define what options are available.
-
Frame preset: If you used a frame preset, Figma will select a device that matches that preset. You can select another device if desired. For example, if you use the iPhone 15 Pro Max frame preset, Figma will select the iPhone 15 Pro Max as the device too.
- Presentation view: All device type frame presets are available
- Inline preview: Only mobile device (phone, watch, and tablet) frame presets are available
- Custom Size (Fit): A custom size automatically scales the design, so that it fits within the screen you are viewing the prototype on. Only applicable in presentation view—if you select Custom size, you won’t see a device when playing a prototype in inline preview.
- Presentation (Full): Displays the prototype at a size that allows it to be displayed on the screen in its entirety. Only applicable in presentation view—if you select Presentation, you won’t see a device when playing a prototype in inline preview.
Orientation
Control the orientation of the device in presentation view. Choose from:
- Portrait
- Landscape
Note: It's not possible to switch between orientations within a prototype. This is something to bear in mind if you have frames in your prototype across both orientations.
Model
Depending on the device you selected, you can specify a certain model. For example, the iPhone 15 Pro Max comes in four different colors.
Preview
View a preview of how the device will look in presentation view.
Background
Choose a custom background color to appear behind your selected device in presentation view.
For example, you might set the background to a neutral color to help users focus on the content, or use a brand color for extra polish.