Half of learning Figma is learning its vocabulary. The other half is noticing when that vocabulary changes, because it does. "Absolute position" is now Ignore auto layout. "Layout grids" are now layout guides. Tutorials from a couple of years ago still use the old names, which is confusing when the button you're looking for doesn't exist anymore.

This glossary uses the names in Figma's current English interface, grouped by topic, roughly in the order you'll run into them. Keep it open in a tab.

The file

Frame. A container with its own properties. It can clip its content, be resized, hold auto layout, and be exported. Almost everything you build should live inside a frame.

Group. A loose bundle of layers with no properties of its own. Its size is whatever its contents add up to. Handy for moving things together, not for building layouts.

Section. A top-level container for organizing the canvas. Its name stays readable when you zoom out, which makes it good for separating flows or stages of work.

Page. A tab inside a file. Use pages to split big chunks of work, for example foundations, components and screens.

Thumbnail. The frame you choose to represent the file in the file browser.

Layout

Auto layout. Figma's system for arranging children automatically when content changes. It follows the same model as CSS Flexbox.

Flow. The direction of an auto layout frame: vertical, horizontal or grid.

Grid flow. An auto layout flow with real rows and columns, where children can span several cells. Good for galleries and dashboards.

Hug contents. The frame shrinks or grows to fit what's inside it.

Fill container. The child stretches to take the space its parent gives it.

Fixed width / height. A set size that doesn't change.

Minimum and maximum width / height. Limits on how far a layer can shrink or grow, even while set to Fill. The key to layouts that work at any screen size.

Gap. The space between children. Setting it to Auto spreads leftover space evenly between them.

Padding. The space between a frame's edges and its content.

Wrap. In the horizontal flow, children that don't fit drop to the next line.

Constraints. Rules that pin a layer to the edges or center of its parent, deciding how it behaves when the parent is resized.

Ignore auto layout. Takes a single child out of the auto layout flow so it can sit on top (a badge on an avatar, a close button in a corner). Formerly called absolute position.

Layout guides. Visual columns, rows or grids drawn over a frame to help you align things. Formerly called layout grids. Unlike the grid flow, they don't move anything by themselves.

Text

Type scale. A short list of font sizes with a consistent relationship between them.

Scale ratio. The fixed factor between one size in a type scale and the next.

Line length (measure). How many characters fit on one line. For comfortable reading, roughly 45 to 75.

Auto width / Auto height / Fixed size. The resizing modes of a text box. Auto width grows sideways with the text, Auto height keeps its width and grows downward, Fixed size stays put no matter what.

Color and variables

Design token. A design value with a name and a purpose, such as a color, a spacing step or a corner radius.

Primitive. A raw value, named by what it is: blue/600. Not meant to be applied directly to screens.

Semantic. A named decision that points to a primitive: color/action/primary. This is what you actually apply.

Variable. Figma's mechanism for storing reusable values, and its way of doing design tokens. The basic types are color, number, string and boolean.

Collection. A group of variables, for example "primitives" or "semantic".

Mode. One column of values inside a collection, such as light and dark, or comfortable and compact. How many modes you get per collection depends on your plan.

Alias. A variable whose value is another variable. Aliases are how semantic variables point to primitives.

Contrast ratio. The difference in luminance between two colors. WCAG level AA asks for at least 4.5:1 for normal text.

Components

Main component. The source of truth. Change it and every copy changes.

Instance. A linked copy of a main component.

Override. A local change made on an instance, like different label text, that doesn't affect the main component.

Variant. One version of a component inside a set, defined by values such as size, state or type.

Component property. A control exposed on instances. The main kinds are variant, boolean, text and instance swap.

Slot. A placeholder area inside a component that you can fill with your own content on each instance, without detaching it. Figma rolled out native slots as a beta.

Interactive component. A component whose variants are wired to each other, so its instances react in prototypes (a checkbox that toggles, a button that shows its hover state) without extra prototype connections on every screen.

Library. A published file whose components, styles and variables other files can use.

Atomic design

Atom. The smallest unit that still does a job: an input, an icon, a button.

Molecule. Two or more atoms working together, like a search field.

Organism. A complete, functional section, like a header.

Template. A page skeleton without real content.

Page. A template filled with real content.

Vectors and icons

Vector network. Figma's vector model, in which a single point can connect to more than two segments, unlike a traditional path.

Boolean operations. Union, subtract, intersect and exclude: ways of combining shapes into a new one.

Flatten. Turns a boolean result (or any vector group) into a single vector layer.

Live area. The part of an icon's canvas where drawing is allowed to go.

Safe area. The part of a design that always stays readable, even when it's scaled or cropped.

Optical correction. Manual adjustments so that different shapes look the same size, even when their measurements differ. A circle usually needs to be a bit larger than a square to look equal.

Prototyping

Trigger. What starts an interaction, such as a click, a hover or a delay.

Overlay. A layer that appears on top of the current screen (a menu, a modal) without navigating to a different frame.

Smart animate. Animates the differences between layers that have the same name on two frames.

Easing. The speed curve of an animation: how it starts and how it lands.

Spring. An animation curve based on physical parameters, which gives movement a slight bounce.

Variables in prototypes. Values the prototype can store and change as people click through it, such as items in a cart.

Handoff

Dev Mode. Figma's inspection view for developers, with measurements, code snippets and variables.

Handoff. The package that lets someone build your design without having to ask you anything.

Annotation. A note attached to a layer that travels with the design into Dev Mode.

Code Connect. A link between a Figma component and its real counterpart in a codebase, so developers see the actual component code.

MCP server. Figma's server for the Model Context Protocol, which lets AI coding assistants read a design along with its components and variables.

Changelog. A running record of what changed, when, and why. Not a Figma feature, but a habit every shared library needs.