Figma Design System Tutorial: From Zero to Full System

Publishing a Figma library takes a paid plan and a Full seat, per Figma’s Help Center as of October 2026. Creating variables, styles, and components works on any plan, so you can build most of a system before the paywall shows up.

Tutorials that promise free-plan publishing are outdated.

Build order matters here. Variables come first because components bind to them, and the library comes last. Once it’s published, product designers pull buttons, inputs, and themes from that single source, and developers read the same values in Dev Mode.

What does a Figma design system include?

Everything lives in a shared library file that other files subscribe to. Change a value once in the library, publish it, and consuming files get the update instead of holding stale copies.

• Components are the reusable UI elements, such as buttons, inputs, and cards, and each one is defined by a single main component.
• Variables hold single values (color, number, string, boolean) and can switch by mode, which is how light and dark themes work.
• Styles bundle properties like text, effects, and layout grids.

Figma’s own Introduction to design systems course splits a system into 4 parts: principles, foundations, documentation, and processes.

Foundations cover the visual basics (color, typography, spacing, elevation, iconography). Principles and processes are mostly written down rather than built as library assets.

The general practice behind all of this, a set of standards and reusable parts that keeps a product consistent, is covered in this explainer on design systems as a discipline.

A UI kit from the Figma Community is a starting file. It becomes a design system only after you publish it as a library and your working files subscribe to it.

How do you scope the system and set up the library file?

Start with an audit of the live product. Build only what the audit shows is actually reused, and give the result its own library file.

Audit the product first

Figma’s Introduction to design systems course begins with an inventory collected in one place.

• Colors and text in use
• Icons and illustrations, plus any other artwork
• Buttons, dropdowns, and the rest of the controls
• Patterns and interactions

Click through the product itself. Loading states, hover states, and warning modals never show up in a folder of static screenshots.

If the product spans several devices or operating systems, audit each one. Then start the library with the elements that repeat most, not with a giant checklist.

Split the library from product files

Figma’s library fundamentals lesson recommends separating the library from the files where you iterate. That keeps one clean source of truth.

It also recommends separate libraries for separate jobs, for example one for product UI assets and tokens, and another for brand assets that marketing uses in Figma Buzz.

Pages inside the library file commonly run in build order, starting with foundations and moving through components, patterns, and templates before ending on documentation.

Liferay’s design handbook puts a cover page first in every Figma file, named cover, so the file’s status and owner are visible on open.

Name components and variables

Figma groups components by slash-separated names, so UI/Button/Active, UI/Button/Hover, and UI/Button/Inactive appear together as related components in the Instance menu.

Nathan Curtis, cited in Figma’s Design systems 102 post, suggests pairing a base (color, size) with modifiers (variant, state). That gives you names like color/background/hover.

The WordPress design team argued in 2019 that a library should mirror the code it represents, so designers and developers use the same names. Their code package was flat, and they weighed slash naming against pages and frames as ways to organize it.

Should you use variables or styles for design tokens?

Variables suit single values that change by context, and styles suit composite properties. Most systems end up with both.

Sources split on this. Older tutorials, such as Toptal’s, build every foundation from styles, while Figma’s Design systems 102 post puts variables first and treats styles as the better fit for gradients and other multi-layered values.

As of October 2026, Figma’s Help Center states that a style cannot be used inside another style or a variable. Variables can be applied to styles and to other variables.

Where variables win

• One variable holds a value per mode, so a frame switches from light to dark in place.
• Aliasing lets a variable reference another of the same type, and that’s how token layers get built.
• You can limit a variable to specific properties, such as strokes only. Styles have no equivalent.
• Variables publish to team libraries like styles do, and Dev Mode shows their values to developers.

A closer look at how variables work in Figma covers the four types, collections, and groups in detail.

Where styles still win

Composite properties. A text style bundles font family, size, weight, and line height into one object, and a variable stores only one value.

The practical split is to bind the numeric and font fields inside each style to variables. Styles then follow the token layer instead of competing with it.

How do you set up primitive and semantic variables with light and dark modes?

Two collections do the job. Primitives hold raw values and semantic variables alias them, and the dark mode column lives on the semantic collection.

1. Open the Variables modal from the Local variables section of the right sidebar and create a collection named Primitives.
2. Add raw values with slash names, such as color/blue/500 or space/16. The names describe the value, not its use.
3. Create a second collection named Semantic. Right-click each value, choose Create alias, and point it at a primitive of the same type.
4. Add a mode to the Semantic collection. Figma copies the first column’s values into the new one, so rename the modes Light and Dark and repoint the dark aliases.
5. Scope each variable to the properties it should apply to, such as strokes only for border colors.
6. Apply the semantic variables to layers, then switch the mode on a frame to test the theme.

Figma’s Design systems 102 post describes primitives as the basic building blocks (colors, spacing, sizing, and so on). Semantic variables add the meaning, such as surface or text-primary.

Token structure is mainstream by now. The zeroheight Design Systems Report 2025 found 84% of teams using design tokens, up from 56%.

Spacing variables follow a step scale. Figma’s course sets font sizes and line heights divisible by 8, the baseline grid size, and the same 8-point grid step works for spacing values.

For brand or theme variants, an extended collection inherits every variable and mode from its parent and overrides only the values you choose. Per Figma’s REST API documentation, only local collections can be extended through the API.

One failure mode to watch: detaching an alias turns it into a raw value. That variable then stops following the primitive it used to reference.

How do you build a component with auto layout?

Build the layout in an auto layout frame, bind its spacing and fills to variables, then convert the frame to a main component.

Select the layers and press Shift A, or click Add auto layout in the right sidebar. As of October 2026, Figma’s Help Center lists auto layout as available on all plans.

The frame exposes these settings.

• Horizontal, vertical, or grid flow
• Gap between items, and padding inside the frame
• Hug contents, fill container, or fixed size
• Minimum and maximum dimensions
• Wrap, available on horizontal flow only

Grid flow does not wrap. Objects sit in columns and rows and can span several of each.

The full property list, including keyboard shortcuts for padding, sits in this write-up on setting up auto layout in Figma.

A main component defines the element. Each instance is a copy linked to it and receives its edits.

Inside one file, changes apply immediately. Once the component is published to a library, subscribed files see updates only after you publish, per Figma’s Help Center.

Convert the finished frame with Ctrl/Cmd+Alt+K. A separate guide covers making components in Figma from scratch.

Start with the button. Inputs and cards can then reuse it as a nested instance.

Hardcoded padding, gap, and fill values are the usual failure. Those values ignore mode switches, so a component looks right in light mode and wrong in dark.

Variants or component properties: which one should each option use?

Variant properties are for options that change a component’s state, size, or type. Boolean, instance swap, and text properties handle everything else.

Figma’s Help Center lists 5 property types. Variants define variations such as states, sizes, and colors, while each of the others controls one thing.

The fifth type is the slot property, a flexible area inside a component where people add, edit, and rearrange content.

Properties collect every editable option in one panel of the right sidebar. Per Figma’s Help Center, that cuts the need to override individual layers.

Variants multiply, and that’s where component sets go wrong. Built entirely from variants, a button with 3 sizes, 4 states, and a leading icon toggle holds 24 variants.

• Add a trailing icon toggle as one more variant and the set reaches 48.
• Move both icon toggles to boolean properties instead and the set stays at 12 (3 sizes by 4 states).

Variant properties exist only on component sets, according to Figma’s Plugin API documentation. Boolean, text, and instance swap properties attach to a single main component or to a set.

For the mechanics of the component set itself, there is a walkthrough on setting up variants step by step.

How do you publish a Figma library and push updates?

Open the Libraries modal from the Assets tab, click Publish next to the current file, add a description, review the asset list, and click Publish. Subscribed files then show a blue badge, and their editors review and accept the update.

First publish

Publishing requires a paid plan and a Full seat with edit access to the source file, per Figma’s Help Center as of October 2026.

• The description should state the library’s purpose, or summarize the changes if it’s an update.
• In the asset list, uncheck anything that is not ready. Right-click an asset and choose Hide when publishing to keep it out for good.
• Organization and Enterprise plans also pick a destination, either a team or the whole organization, from a dropdown.

Team-only publishing has a catch. Only direct members of that team can use the library, so the file must be shared with the organization to reach anyone else.

Publishing updates

Edits stay inside the source file until you publish them. Each publish adds a checkpoint to the file’s version history.

Figma prompts for a description every time and shows it to the people accepting the update. Write it for them: which components changed and what moves in their files.

How consumers accept changes

Anyone with edit access to a file on a paid plan can accept updates from the Libraries panel.

• An update can be reviewed side by side before it’s applied.
• You can update one asset at a time, or hit Update all.
• Organization admins can turn a library on for every team.

Updates apply to assets on every page of the file, per Figma’s Help Center. A March 2024 forum request asked for per-page acceptance because handed-off pages changed, and sometimes broke, after an update.

The documented behavior leaves one workaround: freeze delivered work in its own file before accepting new updates.

How do you document components and hand them off to developers?

Document inside the library first with names, descriptions, and links. Dev Mode then surfaces variables and component details for developers, and tokens sync to code through the Variables REST API or a plugin.

Document inside the file

Figma’s Help Center names 4 ways to document a library inside Figma.

• Meaningful names for styles, components, and variables
• Short descriptions on each of them
• Links from components to external documentation
• Descriptions on every library update

Descriptions and links attach to main components, component sets, and single variants. Figma search reads component descriptions, so keywords belong there.

Where long-form guidance lives (a site, Storybook, a wiki) is a separate call, covered in this piece on documenting a design system.

Design linters catch drift after the fact. Figma’s course points to Design Lint by Daniel Destefanis and Roller by Contrast, both from the Figma Community, for flagging missing styles and wrong spacing.

Hand off in Dev Mode

Figma’s own Pattern Library team linked code syntax to its variables and saw fewer questions about which token to use. Dev Mode now shows the CSS custom property, such as var(–color-icon-onbrand), in the inspect panel.

Dev Mode opens from any Figma Design file. Its Variable details modal lists the variable’s name, collection, mode, value, alias chain, scope, and a code snippet.

When a designer leaves a raw value, Dev Mode can suggest a variable, but only one with exactly the same value and the appropriate scope.

Links to GitHub, Jira, Storybook, or VS Code added to a component propagate to every instance of it. A tour of Dev Mode covers the rest of the inspect panel.

Sync tokens with code

Variables updated through the API must be published before other files can use them, per Figma’s developer documentation. Outside Enterprise, the API returns a 403 error, so plugin sync is the practical route.

Code Connect offers template files, a framework-agnostic format, alongside framework integrations for React and React Native, Storybook, HTML (Web Components, Angular, Vue), SwiftUI, and Jetpack Compose, according to the @figma/code-connect README. The same README warns that framework-specific parsers stopped receiving updates and support on August 17, 2026, so template files are now the only actively maintained route. The package changelog’s latest entry at time of writing is v1.5.2, dated August 3, 2026.

Token files increasingly follow one format. The Design Tokens Community Group published the first stable version of its specification, 2025.10, on October 28, 2025, though the specification is not on the W3C Standards Track.

Tokens Studio offers a W3C DTCG option next to its legacy format, and Style Dictionary auto-detects DTCG tokens.

When does a Figma design system break or hit limits?

Plan restrictions come up first, then the caps on modes and variables, then publish errors from invalid assets. The last problem is less a failure than a mismatch, since some projects are too small to need a token architecture at all.

The figures below reflect Figma’s documentation as of October 2026.

• A single collection holds up to 5,000 variables (Figma Help Center).
• Modes per collection are capped at 10 on Professional and 20 on Organization, while Enterprise is unlimited with extended collections, per Figma’s plans and features page.
• Publishing libraries is limited to paid plans, with Starter teams excluded (Figma Learn).
• You also need a Full seat to publish, with edit access to the source file (Figma Help Center).

Tutorials disagree with Figma’s current documentation on plans. Noble Desktop’s team-library tutorial, updated April 2026, still says publishing styles works on the free Starter plan, while Figma’s library fundamentals lesson now says Starter teams can create assets but cannot publish a library.

Treat any tutorial that promises free-plan publishing as outdated. For a broader look, there is a breakdown of what the free plan gives up against Professional.

Mode limits show a second dated disagreement. A Figma forum thread opened in June 2023 describes 4 modes on Professional and Organization and 40 on Enterprise, and one commenter needed 7 modes for iOS Dynamic Type sizes.

A pinned reply in that thread announced 10 modes for Professional and 20 for Organization, and Figma’s plans page now lists Enterprise as unlimited through extended collections. Check that page before planning a theme matrix.

Publish errors are the other documented failure. In a March 2025 forum case, a library stalled on its last 32 changes with an unable-to-publish error, and Figma community support asked the author to look for invalid assets, remove unused properties, and fix missing or conflicting property names.

Some projects are too small for the full setup. The designsystems.surf guide advises starting with the smallest setup that protects real product decisions.

One product with a handful of components gets by with a components file and a single variables collection. Primitive and semantic layers, extended collections, and Code Connect earn their cost when a second theme or brand arrives.

Figma Design System FAQ

What is the difference between a design system, a component library, and a style guide?

A style guide documents visual rules. Component libraries hold reusable UI parts, and a design system adds principles, tokens, and processes on top of both.

Figma’s course frames a system as 4 parts: principles, foundations, documentation, and processes. The gap between a style guide and a full system is laid out in this look at how a style guide compares with a design system.

Does a Figma design system need atomic design?

No. Atomic design is Brad Frost’s method for sorting components into atoms, molecules, organisms, templates, and pages, and Figma’s course covers it in its build lesson as one way to organize a system.

A button is an atom. A search form built from an input and that button is a molecule, and the full hierarchy is explained in this primer on atomic design.

Can you copy a public design system instead of building one?

Yes, as a reference or a starting file. Material Design, Shopify Polaris, IBM Carbon, and the Atlassian Design System all publish their work openly.

Copying them gives you their decisions, not yours. Check each system’s license before reusing tokens or components.

Is there a free Figma design system template?

Yes. The Figma Community hosts free design system and UI kit files that you can duplicate into your own drafts.

A duplicate is a plain copy with no live link to the original. Audit its variables and naming before you build on it.

When should you detach an instance?

Rarely, and only when the design needs a structure the component’s properties cannot express. First check whether a missing variant, boolean, or slot property solves it.

A detached instance stops receiving library updates. Dev Mode can still compare it with the main component it came from, per Figma’s Help Center.

How do you swap a library for a newer version?

Publish the new version, open the file’s Libraries modal, select the old library, click Swap library, choose the new library, and click Swap library again. Components and styles in the file update to match, but variables are not swapped.

Turn off the old library afterward so nobody pulls assets from it by mistake.

Who Maintains a Figma Design System After Launch?

Maintenance falls to one named owner and a backup editor, both on Full seats with edit access to the source file, because publishing requires that seat and access.

The backup matters. zeroheight’s Design Systems Report 2026 finds that 16% of design systems are maintained by a single person, so one seat is their entire publish path.

When that person leaves, publishing stops until another editor takes over.

A contribution process spreads improvements across consumers, as Figma’s course suggests. The trade-off is review time for the owner.

Ownership comes first because the other two steps need someone to run them.

• Name an owner and a backup editor
• Open one intake path for change requests
• Publish on a fixed schedule

Governance models for larger teams are laid out in these design system best practices.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• How to Insert Image in Figma With Ease - November 3, 2026
• How to Download Figma Files Fast and Free - October 30, 2026
• Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026