Using the Frame Tool

What’s a Frame?

If you’re a designer, a Frame works quite similar to a Rectangle, but with a few exceptions. For example, it automatically nests, so if you draw a Frame on top of another Frame, it will try to group them together. You can still manually group a selection, but this is done by wrapping your selection in another Frame.

If you’re a developer, you can consider Frames to be <div> elements. They can have smart layout constraints, relative sizing and positioning, and can be converted to Stacks or Grids.

Drawing Frames

You can draw Frames by selecting the "Frame" tool in the top toolbar, or by pressing F. Then, you can click and drag onto your Page to draw a Frame. It will have a blue Fill color applied by default. You can customize the properties of Frames via the property panel on the right.

Nesting

If you draw a larger Frame, say one of 400x400, and you then draw another smaller Frame on top, like one that is 200x200, the smaller Frame will be nested within the larger Frame. You will be able to see this hierarchy reflected in the Layer Panel on the left as well.

This means that they are grouped instead of overlapping: if you select the outer Frame, you can move both of them at once. This also means you can position the inner Frame relative to the outer Frame. We often refer to this relationship as parent and child Frames, the parent being the outer Frame and the child Frame being the inner Frame.

If you select the inner Frame, you can pin it relative to the outer Frame. Or, you could give it a relative size: setting Width to 100% will make the inner Frame’s width match that of the Parent at all times.

Selection

By default, Framer has a "direct selection model". Meaning that if you select a layout containing nested Frames, the innermost Frame will be selected. If you want to select the outermost Frame, you can hold CMD (or CTRL on Windows) while clicking. Or, with a nested Frame already selected, you can hit ESC to jump your selection upwards to the nearest parent Frame.

These shortcuts will help you quickly manage Frames on the Canvas:

• ESC to select a parent Frame

• CMD + Click to select the outermost parent Frame

• CMD + Enter to wrap a selection in another Frame

• CMD + Delete to remove a parent Frame from your selection