Figma

Definition: The dominant collaborative interface design tool, running in the browser and letting multiple designers and developers work in the same file at the same time.

How It Works

Vector-based design canvas, similar in spirit to Sketch or Adobe XD, but real-time collaborative by default, changes sync to every open viewer instantly
Components and variants let a Design System be built directly inside the design file: a Button component with size, state, and emphasis variants reused across every screen instead of redrawn each time
Auto Layout mirrors Flexbox behavior in the design tool, so a component resizes and reflows the way it actually will in code, instead of designers guessing
Dev Mode exposes exact spacing, colors, typography, and CSS-like properties so engineers can inspect a design without pinging the designer for every value
Figma Variables store values, colors, numbers, strings, booleans, that can be swapped per mode, powering light/dark themes and multi-brand files natively
Version history is automatic and granular, any past state of the file can be restored or duplicated without a manual “save as v2” habit
Plugins extend the tool for niche needs: exporting design tokens as JSON, generating accessibility contrast reports, syncing content from a CMS
REST API access lets external tools read file structure, styles, and components programmatically, powering integrations like automated design-lint checks
Comments and cursor presence let stakeholders leave feedback directly on a specific frame or element, tied to that exact spot rather than a separate email thread
Branching lets a designer work on an experimental version of a file without affecting the version everyone else sees, then merge it back like a code branch
Prototyping mode connects frames with clickable hotspots and transitions, turning a set of static screens into a clickable simulation without leaving the design file
Multiplayer cursors and named avatars show exactly who is editing what in real time, reducing the “who changed this” confusion common in async file handoffs
FigJam, Figma’s whiteboard product, handles upstream work like user flows, sitemaps, and brainstorming before a single pixel of UI gets designed
Libraries can be published and shared across an entire organization’s files, so a token or component update in the source library can be pulled into every consuming file with a visible changelog

Core Features at a Glance

Feature	Purpose
Auto Layout	Responsive, Flexbox-like resizing inside the design tool
Components and Variants	Reusable, linked UI building blocks
Variables	Themeable values, swappable per mode (light/dark, brand)
Dev Mode	Inspect exact values and export assets/tokens for engineering
Branching	Isolated experimentation without disrupting the main file
Prototyping	Clickable, linked-frame simulation of the real product

Under the Hood

Dev Mode is the seam between design and code. Instead of a designer manually writing a spec document listing pixel values, an engineer opens the same file in Dev Mode and reads exact values directly off the selected layer: padding, font size, line height, hex color, corner radius. Nothing is transcribed by hand, which is where most spec-document errors used to come from.

Real-time collaboration works because Figma’s canvas is not a document opened and saved like a traditional file, it’s a live, operationally-transformed data structure. Every edit is a small operation broadcast to every connected client and merged in, the same conflict-resolution approach used by tools like Google Docs, which is why two designers can edit the same frame simultaneously without a “file locked” conflict.

Component instances stay linked to their source. Editing the master Button component updates every instance across every file that references it, the design-file equivalent of updating a shared code dependency instead of copy-pasted duplicates.

Variables resolve at render time, per mode. A frame set to “Dark” mode looks up each variable’s dark-mode value at the moment it’s displayed, which is why switching a prototype’s mode toggle re-themes an entire multi-screen flow instantly instead of requiring a duplicate set of dark-mode frames.

Worked Example 1

Given: An engineer needs to implement a card component but the Figma file has no attached spec document.
Step: They open Dev Mode, select the card layer, and read off padding (16px), corner radius (8px), and shadow values directly from the Inspect panel.
Answer: The component ships pixel-accurate without a single message exchanged between designer and engineer.

Worked Example 2

Given: A design system team updates the master Button component’s border radius from 4px to 8px.
Step: Because every Button on every screen in every file is an instance of that one master component, the change propagates automatically wherever it’s used.
Answer: 200 screens update their button styling with one edit, no manual find-and-replace across files.

Worked Example 3

Given: A junior designer wants to try a risky redesign of the checkout flow without disrupting the file the rest of the team is actively working in.
Step: They create a branch, make the experimental changes in isolation, and share a link for feedback before deciding whether to merge.
Answer: The main file stays stable for the rest of the team; the experiment either merges cleanly or gets discarded without side effects.

Worked Example 4

Given: A product needs a dark mode and the Figma file currently hardcodes white backgrounds and black text on every frame.
Step: The team defines a background and text variable with a light and dark mode value each, then reassigns every frame’s fill and text color to reference the variable instead of a static color.
Answer: Toggling the file’s mode switcher previews both themes instantly, and the same variable names map directly onto the CSS custom properties engineering ships.

Why It Matters

Became the industry standard largely because of real-time multiplayer editing, the same shift that made Google Docs displace offline word processors for collaborative work
Removes the handoff bottleneck between design and engineering, Dev Mode replaces manually written spec documents that go stale the moment the design changes
Runs entirely in the browser, so there’s no version mismatch between team members on different operating systems or app versions
Centralizes the design system in one place that both designers and, through Dev Mode, engineers can reference directly
Lets non-designers, product managers, stakeholders, support teams, view and comment on live designs without needing an editing license
Reduces the round-trip time on feedback, a comment thread on the exact frame in question replaces screenshots pasted into chat with vague pointers
Consolidates the design toolchain, whiteboarding, wireframing, high-fidelity design, prototyping, and dev handoff all happen in one product instead of five

Common Pitfalls

Letting design files grow disorganized with no consistent component or naming structure, making it hard for anyone but the original author to navigate
Designing screens that ignore real content constraints, very long names, empty states, error states, producing designs that only work for the one example used
Detaching a component instance from its master to make a one-off tweak, silently opting that instance out of every future update to the source component
Treating Dev Mode’s exported values as final without checking they match the actual design intent, especially for responsive behavior Auto Layout doesn’t fully capture
Building deeply nested Auto Layout frames without naming them, making the layer panel unreadable for anyone else opening the file
Designing with static, made-up data instead of realistic content lengths, so a real user’s long name or a real API’s null value breaks the layout on launch
Relying entirely on plugins for token export without a documented process, so the export step becomes a single point of failure tied to one person’s setup
Skipping accessibility checks in the design phase, contrast ratios and tap-target sizes are far cheaper to fix in Figma than after the component is coded
Prototyping only the happy path, leaving error states and edge cases undesigned until an engineer hits them mid-implementation and has to guess

Comparison

	Figma	Sketch	Adobe XD	Framer
Runs in browser	Yes	No, macOS only	No, desktop app	Yes
Real-time multiplayer editing	Yes	No, plugin-dependent	Limited	Yes
Built-in dev handoff (Dev Mode)	Yes	Plugin-dependent	Limited	Yes
Code-backed interactive prototypes	Limited	No	Limited	Yes, native
Market position	Dominant	Niche, macOS design teams	Discontinued for new users	Growing, code-adjacent teams
Whiteboarding built in (FigJam)	Yes	No	No	No
Pricing model	Seat-based, free tier	Seat-based, no real-time free tier	Discontinued	Seat-based

Example

A design team builds a component library in Figma with color, spacing, and typography variables tied to Design Tokens. Developers then open the same file in Dev Mode, inspect the Button component, and copy the generated CSS variable names directly into their implementation instead of re-deriving values by eye.

Figma’s own product team dogfoods this workflow internally: the Figma web app’s UI is itself built from a Figma component library, inspected through Dev Mode by Figma’s own engineers, closing the loop between the tool and the product it’s used to build.

Referenced by

Dig deeper

Spot an error in this note?