Frames and Shapes

Overview

Frames are smart layout containers that can be used for screens and interface elements like buttons and navigation bars. Use Frames to create screens and nested Frames to create interface elements.

Shapes, on the other hand, are simple SVG elements that can be grouped, though they don’t inherit any constraints. See a full comparison below.

Frames

Shortcut: F

Automatic Nesting: Yes

Layout Constraints: Yes

Targetable in Code: Yes

Used for: Screens and Interfaces

Element: DIV

Wrapping Frames: CMD + Enter

Shapes

Shortcuts: R (Rectangle), O (Oval), P (Path)

Automatic Nesting: No

Layout Constraints: No

Targetable in Code: Yes

Used for: Icons and Illustrations

Element: SVG

Adding Groups: CMD + G

Why are they different?

Framer is both a layout and drawing tool in one. Layout is defined using Frames that allow you to quickly set up the structure of an interface, including automatic layout rules that depend on the Frame’s size and position.

Icons or illustrations typically need a fixed layout between the different elements. For example, if you draw an icon, you’ll always want each element to scale proportionally, so layout rules don’t really make sense here. To position an icon within an interface, simply wrap it in a Frame by hitting CMD + Enter .

FAQ

Can Frames be nested?Yes. Frames can be nested within Frames to define layout elements like navigation bars, tab bars, cards, buttons, and more.

How do I make my icons adaptive?Add a Frame (CMD + Enter ) to make your icons scale automatically with your UI.

Can I export Frames to SVG?Yes. If a Frame only contains SVG Shapes, it can be exported as SVG.

Can I export SVGs with a custom viewbox?Yes. If a Frame contains a single SVG element, it can be exported as SVG. By resizing the Frame, you can influence the Viewbox.