If you’re designing screens for a mobile app, pages of a website, or putting together a UI, you’ll want to use Frames 
to organize your work. Frames are a container for interface design and other layout work. They can hold both an entire design and individual parts of it.
On this page
Useful Shortcuts
| F | Insert a frame |
| ⌘F | Group selection in a frame |
| ⇧A | Auto-pin selected layers |
| ⌥⇧A | Auto-pin contents of a frame |
| ⌘ while resizing | Resize frame without adjusting contents |
| ⌥⌘ Arrow keys | Adjust frame using your nudge preferences without changing its contents. |
Inserting frames
Press F to use the Frame tool. You can also go to Insert > Frame in the menu, toolbar, or look for ‘frame’ in the Command Bar. When you insert a frame, it gets a white fill by default.
With the Frame tool you can:
- Click and drag on the Canvas to draw a new frame.
- Select a template from the Inspector to create a new frame from it.
- Click on the Canvas to insert a new frame with the dimensions of the last top-level frame you interacted with.
Press F to insert a frame with the dimensions of the last selected top-level frame.
You can also wrap your current selection in a new frame. Press ⌘F, or use Arrange > Group as Frame in the menu bar or Group > Frame in the toolbar. Wrapping your selection will give it no fill.
When you insert or draw new layers, we’ll highlight the parent frame on the Canvas to show where they’ll be placed. If you draw a new frame around existing layers, these will be reparented to the new frame.
Styling frames
Frames support all types of appearance properties like opacity, corners, fills, borders, shadows, inner shadows, blurs, and tints. You can also apply Layer Styles to frames.
Nesting frames
Frames can contain other layers, including other frames. By nesting frames you can design, separate and organize parts of your design individually, and bring them all together later on. This is particularly useful when working with Stacks.
Nesting frames helps you break down and organize complex layouts.
When you draw a nested frame we automatically give it a distinctive blue fill to help distinguish it from its parent. You can turn this fill off, or change it in the Inspector. Nested frames have Clip contents turned on by default, but you can disable it anytime.
Sizing & Resizing
By default, new nested frames and layers have a fixed width and height, so they will not resize when their container does. You can adjust these settings using the dropdown menus labeled Width and Height near the top of the Inspector, just below the position and size fields.
How the different sizing options of frames work
Double-click the edge of any frame to resize it to fit its contents. If you double-click on the corner handle you will resize to fit both width and height simultaneously. Alternatively, you can press ⇧⌘F to resize width and height to fit contents.
You can resize a frame to fit its contents by double-clicking any of the edges.
Frames sizing options are as follows, with some available depending on context:
- Fixed. The frame will have a specific size defined on the Canvas or in the Inspector.
- Fit. The frame will always size to fit its contents. This is available in Stacks and text elements.
- Fill. The frame will always size to fill its container. Available in Stacks.
- Relative. The frame will resize relative to the size of its parent.
Hold ⌘ to resize a frame without changing the size of its nested layers, regardless of their resizing options. Alternatively, you can use the Edit 
button in the toolbar, or head to Layer > Edit in the menu bar.
Pinning layers
By default, every layer you create inside a frame will be pinned to the top and left of its container, this includes other frames.
Manually setting pins can be time-consuming. To speed things up, you can auto-pin a layer by clicking the “A” icon in the pinning controls in the Inspector. You can also head to Layer > Pin > Auto Pin, or press ⇧A. This will apply the most relevant pins based on that layer’s position within a frame (e.g. a layer in the bottom-right of the frame will get bottom and right pins).
Quickly auto-pin layers pressing ⇧A.
Alternatively, to speed things up further, you can auto-pin all the contents in a frame by choosing Layer > Pin> Auto Pin Contents in the menu bar or ⌥⇧A.
Use ⌥⇧A to quickly auto-pin everything inside a frame.
Auto Pin is not a persistent setting, but a one-time action, so you’ll need to repeat this any time you want to auto-pin new layers you’ve added to your frame.
Pins now apply in more scenarios than only resizing the layer’s parent container. When you edit a layer’s width and height values, resize it with arrow keys, swap Symbols, and use different paste actions, we’ll respect where your layer is pinned, so your design remains laid out as you have it.
Coordinates & Rulers
Coordinates and rulers are relative to the closest frame of the selected layer or element. This means that if you have a frame or graphic within a frame, the coordinates will reflect the distance to this frame and not to the top-level frame.
Rulers are relative to the closest frame of the selected element
Rulers will automatically update their 0-point to the closest frame when selecting a nested frame.
Rulers update their starting point based on the selected frame.
Working with frames
- Apply a fill to frames instead of using rectangle shapes as background layers in groups and frames.
- Press F to insert a frame equal in size as the last one you interacted with (top-level frame) on the Canvas. You’ll see a dashed line to indicate the size of the frame.
- When you drag a layer around, it will be nested in and out of frames as your move it.
- We’ve expanded the layer selection overlay to include dashed lines for its pinned edges, and a dashed box around its parent frame.
- To temporarily hide all selection highlights, just hold Space when idle.
- Use ⌥⌘ and press the arrow keys to resize a layer by your default nudge amount. Use ⇧ to resize by the larger nudge amount.
