Master Figma Frames and Auto Layout to Supercharge Your Design Workflow

What Is Figma?

Figma is a browser‑based, all‑in‑one design tool that supports UI design, prototyping, cloud sync, real‑time discussion, development collaboration, and shared libraries.

Frames: The Core Concept

Frames are not just simple artboards; they act as containers (similar to HTML

div

) that can nest, constrain, and style elements, enabling dynamic and responsive layouts.

Object Relationships

Figma mirrors the DOM tree with three relationships: Parent , Child , and Sibling . This hierarchy is analogous to JavaScript’s DOM and the “grouping” principle in the pyramid method.

Frame Types

Top‑level frame : Acts as the main canvas (similar to Sketch’s artboard) and can only be a parent.

Nested frame : A frame inside another frame, serving as both parent and child.

Shape‑layer frame : Provides size, corner radius, fill, stroke, and effects like a regular rectangle.

Why Use Frames Over Groups?

Constraints : Frames retain layout when the parent size changes, while groups distort.

Multi‑functionality : Frames combine artboard, group, and shape functions, reducing layer count and maintenance cost.

Clipping : Frames offer a simple “clip content” option for cut‑out effects.

Practical Example: Creating a Button

Using groups requires six steps (text, rectangle, style, ordering, alignment, grouping). Using a frame reduces this to four steps (text, create frame, set constraints, define size and style). The frame method produces fewer layers and adapts automatically.

Practical Example: Icon with Clip

Traditional group + mask workflow needs five steps. With a frame, you only need to draw the shape, create a frame with clipping enabled, and apply styles—three steps total, with half the layer count.

Common Frame Issues and Solutions

1. Elements Move When Changing Frame Height

Cause: Groups lack constraints, so they stretch with the parent. Solution: Hold

cmd

while dragging to detach.

2. Elements Jump Out of the Frame While Dragging

Cause: Frame’s snapping logic. Solution: Hold the space bar while dragging to keep the element as a child.

3. Top‑Level Frames Show Names

Cause: They are top‑level canvases, not nested. Solution: Drag the frame into another frame to make it a child.

Auto Layout: Figma’s Game‑Changing Feature

Auto layout lets you define a layout rule (e.g., 20 px spacing, left alignment) so that when child elements change size or order, the parent automatically adjusts, dramatically increasing design efficiency.

Creating and Removing Auto Layout

Press

Shift+A

or click the “Add” button to create;

Shift+Alt+A

or the “Remove” button to delete.

Auto Layout Types

Side‑by‑side (parallel) : Elements align horizontally or vertically based on initial placement.

Containment : A larger frame becomes the container for smaller elements.

Auto Layout Settings

Direction : Choose horizontal or vertical.

Spacing between children : Set a uniform distance (e.g., 24 px).

Padding (inner spacing) : Define top, right, bottom, left values either uniformly or individually.

Alignment : Control child alignment and distribution within the parent.

Nesting Auto Layouts

When a single auto layout cannot satisfy multiple directions or spacings, select the desired children and press

Shift+A

to nest another auto layout inside.

Tips for Adding/Removing Items

Hide layers instead of deleting to preserve auto‑layout structure.

Set opacity to 0 for placeholder elements.

Conclusion

Figma’s browser‑based nature, the power of frames, and the flexibility of auto layout together enable designers to work faster, maintain cleaner layer structures, and focus on creative tasks rather than repetitive layout work.