Frames and Graphics: A not-so-short guide

With our Athens release, we’ve replaced Artboards with two new containers — Frames and Graphics. Together with Stacks, they represent the biggest shift to designers’ workflow in Sketch in years. Internally, we’ve taken to saying that Sketch “feels like a new app”.

So — what are frames? How are they different from artboards? What are graphics? Where does this leave groups? What happens to your documents and workflow?

We’ll get to all of this, but let’s start with the problem we wanted to solve.

Why did we build Frames and Graphics?

Picture this: you’re designing a user profile card for a web app.

1. You draw a background rectangle, add text and buttons, then group them. You add an icon, then move the card but the icon is left behind — it was on top of the group but not inside.
2. You fix that in the layer list, then resize the card, but everything stretches. So you undo, then pin and fix size every layer in the card, and check that it resizes properly.
3. Later on, you ⌘-click on the card and move it, but only the background rectangle moves. So you undo, hit Esc to select the card, and move it.

I could go on, but you get it. It’s a lot of tripwires. Maybe you learned to avoid them, or just accepted them — even still, it’s tedious at best, and frustrating at worst. This isn’t always the case, though. If you were designing an icon, those same behaviors would actually feel natural.

The key challenge is that interface work and graphical work are really quite different in their mechanics. Sketch has historically favored graphical work — that’s why designing a simple profile card requires so much intentionality.

The rectangles-and-groups workflow wasn’t great for interface work, and it didn’t play well with stacks. But we didn’t want to flip things entirely and make graphical work feel like an afterthought. We wanted both interface and graphical work to have proper, purpose-built support. Our solution was to give each its own container:

• Frame: a container for interface design and layout work.
• Graphic: a container for icon, illustration, and other graphical work.

Frames 101

Frames have a few important qualities:

1. They’re nestable. They may contain and be contained by other layers.
2. They support styling. Fills, borders, rounded corners, shadows, it’s all there.
3. They reparent layers. Adding or moving something onto the frame nests it in the frame.
4. They define their size. Typically a fixed size, but can also fit contents with stack layout.

If you’re familiar with Sketch, you can think of frames as a natural evolution of artboards. In fact, artboards no longer exist. When you open an existing document in Athens, your artboards and symbol sources are now frames.

How to create a frame

Press F, use the Insert menu or toolbar button to use the Frame tool, then:

• Draw a frame with whatever size you want
• Pick a template in the Inspector to insert as a top-level frame
• Or click on the canvas to insert a frame the same size as the last one you interacted with.

You can also wrap your selection in a new frame with ⌘F.

We call frames you place directly on the canvas top-level frames. Frames you draw within other frames are called nested frames. Top-level frames display their name on the canvas, and a single-click selects their contents.

Frames have an explicit size (width and height), and don’t automatically size to fit their contents. You can use Size to Fit ⇧⌘F, but your frame won’t automatically resize as its contents change. You can set stacks (frames with stack layout applied) to always fit their contents.

You can position layers partly, or even fully, outside the frame’s bounds. A frame’s “Clip content” property controls whether out-of-bounds content is visible or not. Having content out of bounds can like this can be useful in prototyping.

How to style frames

You can style frames much like shapes, with opacity, corners, fills, borders, shadows. You can also give them a blur and tint. You can also apply Layer Styles.

Frames may get a default style depending on how you make them:

• Inserting a top-level frame gives it a white fill.
• Inserting a nested frame gives it a blue fill — this alternates between two shades, so multiple nested frames contrast.
• Wrapping your selection in a frame ⌘F will give it no styles.

Frames on the canvas always reflect their styles. If a top-level frame only appears white if it has a white fill — if it has no fill, its background is transparent.

Sometimes, you’ll want a top-level frame to have a fill so you can better see its contents, but the fill isn’t part of your design. In this case, disabling “Include fills as content” in the Inspector means it won’t show up in exports, prototypes, or instances (if it’s a symbol).

Finally, there’s some nuance to how shadows work: if a frame has a single shadow, and no fills, borders, or blur, the shadow applies to its contents (like groups). Otherwise, the shadow applies to the frame itself.

Frames, layers, and parenting

As you work with frames, you’ll notice a few things:

• When you draw a frame around existing layers, they become children of that new frame.
• When you insert a new layer, it becomes a child of the closest frame that surrounds it.
• When you drag a layer around, its parent frame changes.

You don’t even need to learn these rules because we’ve made it visual. When you select a layer, we highlight its parent frame with a dashed border. When you create or move layers, we highlight their new parent frame with a solid border.

Parenting aims to keep the visual hierarchy on the canvas in sync with the hierarchy in the layer list. By aiming to have the two match automatically, you don’t have to fiddle so much with the layer list, nor keep an up-to-date mental model of your layer hierarchy.

In practice, if an element looks to be inside another on the canvas, it should be inside it in the layer tree — so when you move it, everything within it (and only within it) moves too.

In cases where you don’t want Sketch to automatically parent a layer for you, you can press the Space bar to skip reparenting. Or, you can adjust the hierarchy in the layer list.

Selecting frames and their contents

You can select a frame by clicking anywhere within its bounds, including in empty space, even (unlike groups) if it doesn’t have visible styles. If a top-level frame has contents, clicking within its bounds will select that content. Holding ⌘ and clicking will select any frame directly.

To quickly select contents within a frame, press X, then click-and-drag to draw a marquee selection. This selects any layers within it, at any level, but not the frame itself. You can also hold X as you click-and-drag.

If you’ve selected a frame (or any other container), you can press Enter to select all its children. Select All ⌘A selects all other layers in the same container as the layer you’ve selected — or all top-level layers on the page if you haven’t selected anything. These actions are also in the Select menu when you right-click a layer on the canvas.

Working within frames

Aside from being the container for stack layout, what makes a frame purpose-built for interface design is how you work with its contents. Add a layer to a frame and you’ll notice two things:

• Drop-down menus for Width and Height in the Inspector.
• Next to them, a rectangular control with an A surrounded by four T-shaped lines; and on the canvas, dashed lines from your selection to a dashed box around the parent frame.

These elements control sizing and pinning— two vital ingredients for layout work in frames. We’ve made some very important changes here that affect all layers in Sketch.

Sizing options for frame contents

Sizing controls how a layer’s size responds to its parent’s size, or the layer’s own contents. We’ve long had ways to control a layer’s size, but we’ve made some big improvements here.

Sizing is standardized and prominent

A layer’s width and height can be either Fixed, Fit, Fill, or Relative, depending on the context:

• Fixed: the layer’s size is absolute, and won’t proportionally adjust when you resize its parent. It may still resize if you pin it to its parent on both ends — more on this below.
• Fit: the layer’s size will always fit its contents. Available for stacks and text.
• Fill: the layer’s size will fill its parent. Available to layers inside stacks.
• Relative: the layer’s size is relative to its parent. When its parent resizes, it will too.

This combines the two different properties we had: the Fix Size control in the Resizing panel, and the text-only Auto Width / Auto Height / Fixed Size segmented control in the Text panel.

Fixed is the default sizing option

Every new layer will have a Fixed Width and Height, except for text layers you create by clicking or pasting — those default to Fit.

When you resize a frame, layers with default sizing settings (Fixed or Fit) won’t proportionally resize with it. This is a better starting point for interface work.

We’ve built some other conveniences to work with sizing:

• When hovering or dragging an edge/corner of a layer, we show Fit or Fill for the layer’s width and height next to the cursor. Fixed and Relative dimensions just show their size.
• Directly resizing a Fit sized layer changes it to Fixed on the resized axis(es).
• Double-click an edge/corner of a frame, graphic, or text layer to resize to fit its contents. This also changes the layer’s sizing to Fit, if it supports it. You can also do this via ⇧⌘F, the Inspector, the Layer menu, or the Command Bar.
• On layers in stacks, which support Fill, you can ⌥-double-click an edge/corner to set it to Fill.

Pinning frame contents

Pinning controls how a layer’s position responds to its parent’s size, as well as the layer’s own size. This only applies to frames that aren’t stacks, where pinning is out of the picture.

Like sizing, we’ve long had a pinning system, but made some big improvements to it.

By default, layers have top-left pins

When you create a new layer, it gets top and left pins by default. So, when you resize a frame, its contents (with default pins) aren’t repositioned, but stay put on the top-left. Along with fixed size, this is a better starting point for interface work.

Auto Pin can speed things up

When making a fluid design, you don’t want all layers to be pinned to the top-left. You’ll more likely pin layers to the edges they’re closest to, which is tedious to do manually. For this, we’ve added Auto Pin. It automatically applies pins for you, taking into account the layer’s sizing and position relative to its parent container.

To use Auto Pin, click the [A] button at the center of the pinning control in the Inspector, or press ⇧A. Small markers around the button indicate which pins Auto Pin will apply, giving you a helpful preview.

In the frame section header, you’ll find a button to auto pin a frame’s entire contents at once. Hovering the button shows an on-canvas preview of which pins apply. You can also find this as “Auto Pin Contents” in the menu or Command Bar, or via the shortcut ⌥⇧A.

Pins work beyond resizing

Pins don’t just apply when resizing a layer’s parent. When you edit a layer’s width or height, 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.

Finally, we’ve added some more conveniences to pinning:

• When you align a layer to an edge or center of its container (e.g. Align Right or Align Vertically), we’ll adjust the pins accordingly.
• There are options to quickly set all, none, or default pins for a layer when you right-click the Inspector’s pinning controls, via the Layer > Pin menu, or the Command Bar.
• If you have a layer pinned to one edge, ⌥-clicking the opposite edge in the pinning controls switches the pin instead of adding both. If neither side is pinned, ⌥-click pins both; if both are pinned, ⌥-click removes them.
• To temporarily hide the dashed lines indicating pins and parent container, hold Space (Space-drag to pan also hides the highlights).

How sizing and pinning work together

When you resize any frame (including top-level frames), it adjusts its contents based on their pinning and sizing settings. This might affect contents within those contents, and so on.

With the default sizing and pinning settings (fixed/fit size, top-left pinned), not a lot happens; the frame resizes, but everything in it maintains its size and position, relative to the top-left.

However, with the right pinning and sizing settings, you can have your designs fluidly adapt:

• Fixed or fit layers pinned to one end keep their size and stay put there
• Layers pinned to both ends adjust their size to maintain their distance to the edges
• Unpinned layers adjust their position proportionally (you’ll want this on centered layers)
• Relative size layers proportionally resize with the frame.

Sometimes you want to resize your frame but have nothing inside it change, and we’ve built a few ways to do that. You can:

• Hold ⌘ when resizing the frame with your cursor
• Use ⌥⌘-arrows to resize by your nudge amount (add ⇧ for a bigger nudge)
• Press ⌘⏎ to enter edit mode on a frame. You can also double-click the frame’s background, press Edit in the toolbar, or Layer > Edit. From here, you can resize it, or use the arrow keys to move a frame’s bounds in relation to its contents.

Using Size to Fit on a frame will also leave its contents as-is, fitting the frame around them.

Frames and prototyping

Given frames have a fixed size, this makes them perfect containers to scroll in. You can enable scrolling for any frame — both top-level and nested frames — via the Inspector’s Prototype tab, the Prototype menu, or the Command Bar.

For scrolling to work, the frame’s contents must extend beyond its bounds, otherwise there’s nothing to reach by scrolling. You can use the “Clip content” checkbox to show or hide out-of-bounds content on the canvas — but that doesn’t affect the scrolling behavior.

With top-level frames, having lots of content out of bounds can be hard to work with, so you can define their scroll viewport (the area you’ll scroll in when you play your prototype). There are two choices:

• Frame: the default option, covered above. The frame bounds define the scroll viewport size, and any out-of-bounds content scrolls within it.
• Custom: you can set a width and height for the scroll viewport, or use a template’s size, and then make your frame taller or wider to define how far it scrolls. This is how scrolling artboards worked.

We’ve removed the option to make scrolling groups. Existing ones will continue to work, but you won’t be able to make new ones, and we encourage you to convert these to frames.

Coordinates, rulers, guides and paste

There are a few more things we’ve done to make working with frames feel great.

Layers’ X and Y coordinates are relative to their frame

For example: a layer you place 8px away from the top-left corner of its parent frame will show X:8 and Y:8 in the Inspector, even if that parent frame is nested many levels deep. Groups don’t affect this, so the coordinates of a layer within a group are still relative to the frame.

Paste on containers pastes inside them

If you have a container selected (frame, graphic, group) the standard Paste action ⌘V will place layers inside the container — which is a change for groups. To paste as a sibling of the container, you can Paste Over ⇧⌘V, or select its parent then Paste inside it.

Paste respects pinned edges

When you cut/copy a layer and paste it elsewhere, we preserve how it was laid out originally. For example, copying a layer pinned 20px from the right edge of its frame and pasting it in another container, places it 20px away from the right edge. If this isn’t possible (because you’re copying from a large frame to a much smaller one, for example), we’ll place it at the center.

We’ve also added Paste and Replace ⇧⌘R, which replaces a layer you’ve selected with what you’re pasting. In this case, we preserve the pins and position of the original layer you’re replacing.

Frames define ruler origin and ‘own’ their guides

We’ve covered how frames and graphics define the coordinate origin for their contents, and the same is true for the origin of rulers, which is the top-left corner of any frame you select.

If you select a layer and place a guide, it’s ‘owned’ by its containing frame. If you select a frame and want to place a guide inside it, just be sure to select something in it first.

Since each frame contains its own guides, moving a frame brings any guides it owns with it. When you select a layer, you’ll see the guides of its containing frame, plus the guides of all its ancestor frames up the layer tree.

Grids work similarly: each frame has its own grids that you can independently control.

What are graphics?

Graphics share many qualities of frames: they’re nestable, support styling, reparent layers, and have their own size. You create them in a similar way (just press G) and selection works exactly the same.

At surface level, their differences will seem small:

• Their selection handles are circular, not square.
• Top-level graphics don’t export their white fill by default.

The real difference — and graphics’ entire raison d’être — is what happens with their contents.

How graphics work

As a reminder, here’s how Frames handle their contents:

• Frame contents have visible layout properties (sizing and pinning).
• Frames resize their contents based on sizing and pinning properties.
• Frames support Stack Layout and Smart Layout (legacy).

The story is pretty different with Graphics:

• Graphics don’t have visible layout properties (only text has sizing options).
• Graphics resize their contents proportionally (and so do their groups).
• Graphics don’t support Stack or Smart Layout.

In other words, Graphics deliberately invert the qualities that make frames great for interface and layout work. There are no layout properties at play, no pin highlights on the canvas, a tighter Inspector with more room for styles, and no-frills proportional resizing. The result is a purpose-built container for icons, illustrations, and other graphical work.

How to use graphics

So, where may you find yourself using graphics?

• Design icons and illustrations in isolation. Press G, and you’ll find graphic-specific templates in the Inspector with common sizes for icons and more, or just draw a graphic.
• Use them as symbols. Indeed, graphics can be symbols. Place them in frames or anywhere else. Instances will also proportionally resize, which is great if you use scalable icons.
• Design in-situ. You may prefer to design a new icon right where it’ll be used in a UI element. Graphics are nestable, so you can draw one inside a frame, then design your icon there.

We care a lot about icon design and illustration, so it was important for us to create a workflow where it can flourish. That said, you may feel like some things are missing, like having graphics scale, not just proportionally resize; or browsing graphic symbols separately. We feel the same! We’re not making any concrete promises here, but we do consider this release to be the very beginning of the graphics story.

What about groups?

After reading so much about frames and graphics, you may be wondering: “What’s the point of groups now?”. It’s a fair question, but yes — groups still have a role to play in Sketch.

First, let’s look at how groups behave within our new containers.

How groups work with frames and graphics

Previously, groups would adjust their contents based on resizing constraints — the default was for them to be off, so contents would resize proportionally, unless you’d set things otherwise. With Athens, frames and graphics set these rules — and groups simply follow them:

• Frames have sizing and pinning, so groups adjust contents based on those settings.
• Graphics resize proportionally, so groups resize contents proportionally too.

How to use groups

So, what are groups useful for? This answer differs for frames and graphics.

In graphics, groups continue to be just as useful in designing icons, illustrations and more. They combine related elements together, so you can move them at once, and resize them as a whole.

In frames, you’ll likely use groups a lot less, but they can still be helpful. If you want to keep some layers together in a container that doesn’t have its own style or size, and isn’t a stack, then groups are a great choice.

For example, if you have a few bits of text within a frame that you want to nudge together. In this case, if you group those text layers and then need to nudge one a couple of pixels down, you won’t have to adjust the group to stop it clipping because groups don’t impose their own size.

A new design workflow

Frames and graphics will be a major upgrade to your design workflow. While we’ve kept long-time habits in mind — our own designers would’ve complained otherwise — there’s a need for some adaptation. To help you in that process, I’ll:

1. Explain what happens when you open existing documents
2. Highlight changes to watch out for, even in existing documents
3. Give you some tips to adopt a frames-and-graphics workflow.

Opening existing documents with Athens

When you open an existing document, Sketch does very little to it:

• Artboards become frames. They get a white fill if they didn’t have a background color. Any which had scrolling get vertical scrolling with their original template as a scroll viewport. Symbol sources also become frames, since they were technically artboards too.

• Layers adopt the new sizing properties:

  • Artboards: Now frames, get Fixed width and height.
  • Text: Fit sizing replaces “auto”. Non-auto sizes follow the rules below.
  • Other layers: Get Fixed or Relative width/height based on their Fix Size constraint — if it was enabled for an axis, that axis is Fixed; if disabled, it’s Relative.

Everything else remains as-is: groups are still groups, pins remain unchanged, and so on. We didn’t want to massively upend your documents, and think it’s best if you remain in control of upgrading them to a frames-and-graphics workflow.

When you open an old document, you may see a suggestion to Convert Groups to Frames. This walks you through groups that we think could benefit from becoming frames — you can convert them individually, skip them, or convert all. If it’s not the right time, dismiss it, and it won’t show up again in that document. You can find this feature at any time in the File menu.

You can also change any group to a frame or graphic via the group section header, Arrange > Container menu, or Command Bar.

New ways, old documents

There are some notable changes to working with existing layers in pre-Athens documents:

• Resizing top-level frames adjusts their contents. Previously, this was an opt-in property. If the frame’s contents have relative sizing or aren’t pinned, which is likely, resizing the frame will adjust them. So, set all the frame’s children to fixed size and pin (or auto-pin) them. Or hold ⌘ to resize the frame without adjusting its contents.
• Detaching symbols gives you a frame. Previously, this would give you a group.
• The ⌘ modifier changed. It now resizes a container without adjusting its contents. To rotate a layer on the canvas, hover just outside its bounds until the rotate cursor appears. To ignore snapping when resizing or moving a layer on the canvas, hold ⌃.
• Multiple shortcuts changed. Searching layers is now ⌥⌘F, since ⌘F wraps layers in a frame. Toggling fills is now ⇧F, sinceF activates the Frame tool. See all changes in the changelog.

Embracing a whole new workflow

Hopefully frames and graphics should make sense to you, but old habits die hard. With such a big shift in workflow, it’s normal to take a little time to adapt. Here are our best tips to help with this:

1. Know your types. Frames for interface and layout work. Graphics for icons, illustrations, and other graphical work. Groups for further layer organization.
2. Press F to draw UI. Pressing R may be the hardest habit to break, but has the biggest payoff. Embracing frames for interface work makes your life easier, without all those pesky tripwires.
3. Let Auto Pin do it. Fixed size being the default, pins are what you’ll tweak the most if doing freeform layout — and Auto Pin saves you a lot of time. Get used to ⇧A, you’ll appreciate it.
4. Stacks, stacks, stacks. We didn’t cover it here, but stacks are a layout powerhouse: buttons, menus, navigation, lists, whole screens… they do it all. Go read about it. You’ll hit ⌘L a lot.

We hope you agree this release makes Sketch feel like “a whole new app”. Start using frames and graphics, and you’ll soon wonder how designing in Sketch worked any other way.

We’re excited to see what you create with Frames, Graphics, and Stacks, so give Athens a spin and let us know how it’s shaping your workflow — your feedback drives what we build next.