GuidesOct 30, 20266 min read

How to build a Figma design system in 2026, step by step

File structure, variables, styles, components, slots, publishing, and Dev Mode, in the order that keeps you from rebuilding later.

Since late 2025, Figma has raised the variable mode limit from four per collection to 10 on Professional and 20 on Organization, shipped slots on every plan, and added a linter that swaps hard-coded values for variables. If your build order dates from 2023, parts of it now work against the tool.

A Figma design system is a published library of variables, styles, and components that product files subscribe to, so every design draws from the same decisions. To build one, set up variables and modes first, then text and effect styles, then components built with Auto Layout and component properties, and publish them with a written description of every change.

Key takeaways

Build foundations before components, because every fill, gap, and radius you bind depends on variables that already exist.
Keep the library apart from working files, and hide private building blocks with a period prefix on components or an underscore on collections.
As of October 2026, a variable collection holds up to 10 modes on Professional, 20 on Organization, and unlimited modes through extended collections on Enterprise.
Slots, available on all plans, replace placeholder-instance workarounds in cards, modals, and lists.
Every library publish creates a checkpoint in version history, so the description you type is your changelog.

The build order, step by step

Each step depends on the one before it, which is why skipping ahead costs rework.

Decide the library split. At minimum, one foundations library (variables and styles) and one components library. Icons can live in either.
Create primitive variables. Color scales, spacing, radius, and sizes, in a collection hidden from publishing.
Create semantic variables with modes. Light and dark at least, each aliasing primitives. Set scopes so spacing variables only appear in gap and padding fields.
Build composite styles. Text styles and effect styles (shadows, blurs) that reference variables.
Build base components. Icon, button, input, checkbox. Auto Layout everywhere, every value bound to a variable.
Add properties. Variants for states and sizes, booleans for optional layers, instance swaps for icons, text properties for labels, slots for open content.
Compose larger components from base ones: cards, dialogs, menus, tables.
Publish and document. Write the change description, add component descriptions, and check what developers see in Dev Mode before announcing anything.

How should you structure Figma files and libraries?

Figma's own guidance is to keep libraries separate from the files where you iterate, so the library stays a clear source of truth, and to split libraries by purpose, such as product UI versus marketing brand assets.

Give each component family its own page, and keep helper parts private: a period at the start of a component name removes it from the team library, and an underscore or period at the start of a collection name keeps the whole collection from publishing. Individual variables have a "Hide from publishing" checkbox.

Your plan decides what is possible. As of October 2026, per Figma's help center:

Feature	Professional	Organization	Enterprise
Publish libraries	Yes	Yes	Yes
Variable modes per collection	Up to 10	Up to 20	Unlimited with extended collections
Branching and merging	No	Yes	Yes
Check designs	No	Yes	Yes
REST API for variables	No	No	Yes
Code Connect	Yes	Yes	Yes

Starter files can create components, styles, and variables but can't publish them as a library.

Foundations: variables first, then styles

Variables hold single values, such as colors, numbers, and strings, and can change by mode. Styles hold composites: a text style bundles font, size, weight, and line height, and an effect style bundles shadow layers. Variables can be applied inside styles, so the useful pattern is a text style whose size and line height are number variables, and a shadow style whose color is a color variable.

Two settings matter more than they look. Scoping controls which properties a variable appears in, so a designer setting a corner radius sees only radius variables. Code syntax stores the developer-facing name per platform (Web, Android, iOS), and Dev Mode shows it in code snippets.

Components: properties, slots, and Auto Layout

Figma's component properties come in five types, and each has a job:

Variant for structural or visual alternatives: size, state, hierarchy.
Boolean to show or hide optional layers, such as a leading icon.
Instance swap to replace a nested instance from a curated list of approved alternatives.
Text to mark which text layers are editable.
Slot for open areas where people add and arrange content in an instance without detaching it.

Slots change how you build containers. A card or modal used to need a placeholder instance that designers swapped, then detached. Now the body is a slot with optional minimum and maximum layer counts and a list of preferred instances. The limits are guidance: going past them shows a warning, not an error. You can't bind a slot property to a component's top-level layer, so wrap the slot in a frame.

A component that only looks right at its default size is a picture of a component.

Auto Layout now has three flows. Horizontal and vertical wrap; grid places items in rows and columns and lets them span cells, which suits dashboards and bento layouts.

Test every component by resizing it, swapping its text for a long string, and switching modes. A component that only looks right at its default size is a picture of a component.

What do developers see in Dev Mode?

Dev Mode, on Professional plans and above, is where your naming choices become visible. Code snippets reference variables by their code syntax, with the resolved value as a fallback. Clicking a variable opens its details: collection, mode, value, alias chain, and scope. When a layer uses a raw value, Dev Mode suggests a variable, but only one with exactly the same value and an appropriate scope. The component playground lets developers try a component's properties and modes without editing the design, and Code Connect (Professional and up) replaces generated snippets with your real component code.

What's new for Figma design systems in 2026?

The features worth knowing as of October 2026:

Check designs flags hard-coded colors, type, radius, and spacing, and proposes variables ranked by value similarity, naming, and team usage. Figma says it doesn't use LLMs. It runs on one page at a time, up to 25,000 layers.
Extended collections (Enterprise) let one parent collection spawn a collection per brand that inherits every variable not overridden.
Native variable import and export reads and writes DTCG-format JSON per mode.
The Figma agent became generally available on October 6, 2026, and reads Markdown guidelines uploaded to a design library.

Where Pegasus fits

Pegasus is a Figma library built in roughly this order, so you can start near step eight instead of step one. Its foundations are 470 design tokens as Figma variables (color, type, spacing, radius, shadow) with light and dark modes, plus 32 text and effect styles, including shadows and blurs. On top sit 1,540 components for web and native mobile, built with Auto Layout throughout, each with light and dark variants and documentation covering anatomy, properties, and layout and spacing. It adds 1,200 hand-drawn icons in 9 sizes, with a matching fill for every line icon, and 84 example templates.

The part Figma can't supply is the code. Pegasus ships React components in TypeScript with the same component names, variant structure, and tokens as the Figma library, so a variant a designer picks maps to a prop the engineer already has.

FAQ

Can you build a design system on Figma's free plan?

You can build one, but you can't share it. On the Starter plan you can create components, styles, and variables, but you can't publish them as a library, and extra variable modes require an Education or paid plan. For a system a team subscribes to, you need Professional or above as of October 2026.

Should a Figma design system use variables or styles?

Both. Use variables for single values that change by mode, such as colors, spacing, and radius. Use styles for composites that bundle several values, such as text styles and shadow effects. Variables can be applied inside styles, so a text style can take its size from a number variable.

How many modes can a Figma variable collection have?

As of October 2026, Figma's plan comparison lists up to 10 modes per collection on Professional, up to 20 on Organization, and unlimited modes with extended collections on Enterprise. Starter files can't add modes. Each collection can hold up to 5,000 variables, so the practical limit for most systems is the number of modes, not variables.

Sources

figma design system figma libraries figma components figma variables dev mode

One system. In Figma and in code.

Pegasus ships 1,540 components, 470 tokens, matching React code, Storybook, and a local MCP server. $149, one-time.

Get the full system