Frame, Stack, Grid

Basic Elements for Creating Layouts and Designs

Framer includes basic elements that serve as boxes to construct layouts. These are Frame, Stack, and Grid. They play an important role in building the structure of the design, similar to div in HTML.

Frame

A Frame is a box where child elements placed inside can be freely positioned (absolutely positioned). The position of child elements is determined by their distance from the top, bottom, left, and right edges. When implementing responsive designs, there can be challenges in flexibly placing them according to the size of the parent element. Generally, it will likely involve the implementations described next using Stack or Grid.

Stack

A Stack operates based on a flexbox. This is what is called auto layout in Figma. Child elements can be automatically laid out vertically and horizontally. It is also possible to set gaps and padding.
The inner child elements are positioned as position: relative. It is also possible to set Sticky, Absolute, and Fixed positioning.

As a characteristic, child elements behave either as Columns (vertical arrangement) or Rows (horizontal arrangement).

Columns

Rows

Grid

A Grid operates based on CSS Grid Layout. It defines rows and columns and provides a mechanism to place child elements within them. You specify the number of columns and rows and indicate how wide the child elements will be within that grid. The layout does not change when the window is made smaller, allowing for complex layouts with careful design, and sometimes making responsive implementations easier.

How to Add Each Box

You can add them from the toolbar at the top of the screen. Alternatively, you can use shortcut keys to quickly add them to the canvas, just like in Figma.

• Frame → F

• Rows → Shift + R

• Columns → Shift + C

• Grid → Shift + G