Component
A reusable design element in Figma with one main definition. Any changes to the main component update every copy of it across the file instantly.
Instance
A linked copy of a Figma component that inherits the main component's styles but can have its own text or icon overrides without breaking the link.
Variants
A system for grouping related Figma components by named properties like size and state. All versions live in one component set for easy management.
Auto Layout
A Figma layout rule that makes frames resize automatically when their contents change. It works like CSS flexbox for design files.
Variables
Named values for colors and spacing stored in Figma that can switch instantly between modes like Light and Dark. They connect design directly to code tokens.
Hierarchy
The visual order of elements on a screen arranged so the most important information is seen first. Size, weight, and contrast create hierarchy.
Affordance
A visual signal that tells a user how to interact with something. Good affordance means users know what to do without being told.
Negative Space
The empty area around and between design elements. Used well, it makes layouts breathe and draws attention to what matters most.
Wireframe
A low-fidelity layout sketch that shows structure and content placement without real colors, images, or final copy. Used for fast ideation before visual design.
Mockup
A high-fidelity static design that shows exactly how a screen will look, with real colors, typography, and images. Used to get visual approval before building.
Design Token
A named value for a visual property, like `color.primary` or `spacing.md`. Tokens connect your design file and codebase so they stay in sync.
Accessibility Label
A text description added to an element so screen readers can describe it to users who cannot see the screen. Required for images, icons, and custom controls.
Building toward a role? Browse career pathways that map terms to jobs.