Figma

Figma is a browser-based, real-time-collaborative interface design tool — notable for multiplayer editing (like a Google Doc, but for design files) and for exposing a real object model (components, variants, auto layout) that maps reasonably cleanly onto how a UI is actually built in code.

Core structure

• File → Page → Frame — a file contains pages; a page contains frames (Figma's term for an artboard — a fixed or responsive container representing a screen, section, or component boundary).
• Component — a reusable, master element; every place it's used is an instance, which inherits the master's structure/styling but can override specific properties. Editing the master component propagates to every instance — the direct design-tool analog of a shared UI component in code.
• Variants — group related components (a Button's primary/secondary/ disabled states, for example) into one component set with named properties, so a designer picks a variant from a dropdown instead of hunting for a separately-named component per state.

Auto layout

Figma's flexbox-like layout system: a frame with auto layout enabled arranges its children in a row or column with configurable gap, padding, and alignment, and resizes automatically as content changes — the direct design-tool counterpart to CSS Flexbox (see CSS). Getting auto layout right in the design file is what makes a "hug contents" / "fill container" sizing question map directly onto real CSS sizing behavior once built, rather than needing to be reverse-engineered from a static mockup.

Styles and variables (design tokens)

• Styles (older mechanism) — named, reusable color/text/effect values applied across a file.
• Variables — Figma's newer, more powerful token system: variables can hold colors, numbers, strings, or booleans, support modes (e.g. a light/dark mode pair, or a density mode), and can reference other variables (aliasing) — closer to how a real design-token pipeline (CSS custom properties, a Style Dictionary config) is structured than static named styles were.

Dev Mode

A dedicated inspection mode for developers: generates CSS/iOS/Android code snippets from a selected layer, surfaces exact spacing/color/typography values, and can show a diff between design versions. It doesn't generate production-ready component code on its own — that's closer to Figma Make's territory — Dev Mode is about accurate handoff and inspection of a human-authored design file.

Prototyping

Frames can be wired together with interactions (click, hover, drag) and transitions to simulate real navigation/flows without writing code — useful for user testing and stakeholder walkthroughs before a single line of implementation exists.

Common pitfalls

• Detaching an instance from its component to make a one-off tweak — breaks the link to the master, so future updates to the component no longer propagate to that instance; prefer overriding the specific property instead if the component supports it.
• Absolute positioning instead of auto layout for anything meant to be responsive — a design that looks right at one frame size but wasn't built with auto layout usually can't resize/reflow the way the eventual real UI needs to, and the mismatch surfaces at build time.
• Styles/variables applied inconsistently across a file — the same visual color defined as three separately-named styles is a common source of a design system silently drifting from itself.
• Treating a prototype's interactions as a functional spec — a click-through prototype demonstrates a happy-path flow; it doesn't specify error states, loading states, or edge cases unless those are explicitly designed too.

Learn more

• Figma Help Center
• Figma: Auto layout
• Figma: Variables
• Figma: Dev Mode
• Figma Make for Figma's separate AI prototype/app-generation product.