Frames: Figma's Take on the Artboard

Chapter 2 introduced Figma and Penpot side by side. This chapter starts working with each tool's own actual building blocks, beginning with Frames — a concept that looks at first like Vector Graphics' own artboards, but does genuinely more.

What a Frame Is: More Than Just a Canvas Boundary

A Frame is a rectangular container that holds other design content — shapes, text, images, components — clipped to its own boundary by default. At first glance it looks exactly like Vector Graphics' own artboards from Chapter 9 of that course: a defined area representing one screen or composition. That similarity is real, but only half the picture.

Frames as Artboards: The Familiar Half

Just like an artboard, a Frame can represent one distinct screen or composition — a mobile login screen, a desktop dashboard view, a component variant — with several Frames laid out side by side on the same canvas, each independently exportable, exactly matching the multi-composition convenience Vector Graphics' own Chapter 9 described.

Frames as Responsive Containers: The Genuinely New Half

Unlike a plain artboard, a Frame can also define how its own contents behave when the Frame itself is resized — constraints controlling whether a child element stays pinned to an edge, scales proportionally, or stretches to fill available space. This responsive-container behavior has no real equivalent in Illustrator or Inkscape's own artboards, which simply mark a fixed area with no built-in resizing logic for what's inside them.

Nesting Frames: Building Hierarchical Layouts

Frames can be nested inside other Frames, building up a layout hierarchy that mirrors how a real interface is actually structured — a card component Frame nested inside a list Frame, nested inside a full screen Frame. This nesting is a genuinely common, everyday pattern in UI design work, reflecting how real interfaces are built from smaller reusable pieces rather than one flat, unstructured canvas.

Frames in Penpot: The Same Dual-Purpose Concept

Penpot's own Frames (called Boards in its own interface) work the same way — a rectangular container doubling as both a distinct composition and a responsive parent for its own contents, following the design decisions Penpot deliberately borrowed from Figma's own model rather than the more independently-evolved approach Inkscape took relative to Illustrator.

Hands-On Exercises