Editorial resource · Reviewed 4 August 2026
Figma production glossary
Searchable, plain-language definitions with an example and related mission for each term.
Our method
Selections prioritise current production mechanics, practical construction, and independence-building for designers who already understand visual fundamentals. Every entry is a free, official Figma resource.
- Auto Layout
- A parent-child layout system controlling flow, padding, gaps, alignment, and resizing.Example: A card row where the parent owns the gap between cards, so adding a fifth card never requires moving the others by hand.Related mission: Auto Layout →
- Hug contents
- A dimension that follows the size of a frame's children.Example: A button set to Hug on width grows automatically when its label goes from “Save” to “Save changes”.Related mission: Auto Layout →
- Fill container
- A child sizing rule that accepts available space from an Auto Layout parent.Example: A search field set to Fill inside a toolbar stretches or shrinks as the toolbar's width changes.Related mission: Auto Layout →
- Constraint
- A rule that pins or scales a child when a non-Auto-Layout parent resizes.Example: A logo pinned to the top-left corner stays there when the frame is resized, instead of drifting.Related mission: Foundations →
- Component
- A maintained source of reusable structure and defaults.Example: Editing a button's main component once updates every button instance that uses it.Related mission: Components →
- Instance
- A contextual use of a component with controlled overrides.Example: Ten button instances share one main component but each can have its own label text.Related mission: Components →
- Variant
- A bounded component option such as size, hierarchy, or state.Example: A button's primary/secondary/tertiary hierarchy is a variant, not three separate components.Related mission: Components →
- Component property
- A text, Boolean, or instance-swap control exposed on a component for safe, non-detaching edits.Example: A Boolean property named “Show icon” lets an instance owner hide the icon without deleting a layer.Related mission: Components →
- Variable
- A reusable value that can be aliased, scoped, and applied to supported properties.Example: A spacing variable used across ten components updates all of them when its value changes.Related mission: Variables →
- Semantic token
- A variable named for intent, such as `text/primary`, rather than its raw value.Example: `action/primary` describes a role; `blue/600` describes a raw colour — the token can point to a different primitive after a rebrand.Related mission: Variables →
- Mode
- An alternate value for the same variable, used to switch context such as light/dark or density.Example: A spacing variable can hold a compact value in a “Dense” mode and a roomier value in the default mode.Related mission: Variables →
- Collection
- A group of related variables — and their modes — that Figma organises together.Example: A “Primitives” collection might hold every raw colour, spacing, and radius value the library uses.Related mission: Variables →
- Scope
- A restriction on which properties a variable is allowed to bind to.Example: Scoping a spacing variable to gap and padding keeps it out of a colour picker where it would never apply.Related mission: Variables →
- Dev Mode
- Figma's developer-oriented inspection and handoff surface; access can depend on seat type.Example: A developer inspects a bound variable's name and resolved value directly, instead of asking a designer for a hex code.Related mission: Prototype & handoff →
- Handoff annotation
- A written note explaining behaviour Dev Mode inspection alone can't show — a state trigger, motion intent, or a screen-reader note.Example: “Disabled until a target is selected, re-enables immediately on selection” next to a disabled button variant.Related mission: Prototype & handoff →