Building a design system without the busywork

Starting a design system from scratch usually means staring down a blank Figma file and a long list of foundational work: color ramps, typography scales, spacing systems. A new batch of Figma features and community plugins targets exactly that grind, covering everything from initial setup to developer handoff.

Here is a quick reference list of the plugins covered:

  • CSS color-mix() — Create color palettes and gradients
  • Colorbox — Generate full color ramps
  • The Genome Color Tool — Build WCAG-compliant color scales
  • Peppercorn — Set up your entire type system
  • Print Variables — Create sticker sheets for variable collections
  • Auto Documentation — Make sticker sheets for all variables
  • Variables and Styles List — Get variable sheets in a canvas widget
  • Propstar — Map out component prop variations
  • Specs — Generate component specs
  • Similayer — Filter for specific layers and properties
  • Style Finder — Find styles across pages
  • CTRL Var — Rename variables
  • Export Import Variables — Manage variables in or out of Figma
  • Handoff — Copy CSS variables instantly
  • Variables Converter — Translate variables into code
  • Shaper — Manage token architecture and generate CSS code

What's new in Figma's design system features

Nine new design system features launched today, paired with new community plugins that build on them. The headline change addresses a long-standing pain point: reorganizing modes and collections.

Previously, reordering modes or collections meant deleting them and recreating them, which often left designs out of sync. Now you can drag and drop to rearrange them. Modes and their IDs stay intact during reorganization, so dependencies don't break or reset. You can also adjust the default mode without complications.

That matters for teams that want to keep frequently used collections at the top, group related modes together, or restructure when rebranding or updating product lines.

Quality-of-life updates

The new features also include several workflow improvements:

  • A new shortcut for go-to-main component, so you can jump straight to the source.
  • Duplicate and copy styles for faster iteration.
  • Variable paints can be hidden and unhidden to keep the workspace uncluttered.
  • Improved component description UI for easier reading at a glance.
  • Drag the variable modal from the entire header for better control.
  • Variable changes auto-save, so updates don't require extra clicks.
  • Tooltips on component names give quick context on hover.
  • The edit button is now properly aligned for a cleaner experience.
  • Style window text overflow improvement ensures long names don't get cut off.

Foundations: Color and typography

The first set of plugins targets the foundational stage of a design system, when you're establishing color and type.

Building color palettes

CSS color-mix(), created by Figma Developer Advocate Jake Albaugh, works like a digital color lab. It generates full palettes with variables included, using modern formats like HSL, HWB, LCH, or OKLCH. It also creates smooth gradients that transition between colors.

A dark-themed user interface displaying a color blending tool. On the left panel, there are several dropdowns and input fields for adjusting the color blend settings. The options include ’Output Type’ set to ’Variables,’ ’Color A’ and ’Color B’ with a gradient mix between purple (#d265e9) and green (#73ff00). ’Color Blend’ is set to ’hsl’ with ’shorter hue’ selected. ’Color Stops’ is set to ’10,’ and ’Variable Collection’ is set to ’CSS color-mix()’. There are two buttons at the bottom labeled ’Create Variables’ (blue) and ’Preview’ (gray). On the right side, a preview panel displays a gradient from purple to orange, with corresponding CSS ’color-mix()’ values at different percentage stops, showing the interpolated colors.

When starting a palette, resist the urge to create ten shades of every color. Start with three to five shades per color — one for backgrounds, one for foregrounds, and one for borders. You can always add more later.

For quick color ramp generation, Colorbox by Kevyn Arnott uses intuitive filters for saturation, brightness, and hue. It exports to JSON or directly to Figma. Once you've created a palette, the new variable organization features make it easy to arrange colors exactly as you want them.

A promotional graphic for ’ColorBox’ showcasing its color creation and dark mode features. The background is split into two halves: the left side is bright green with bold black text reading ’Create amazing colors superfast.’ The right side is a darker green with white text stating ’Dark Mode in one click.’ In the center, a rounded rectangle card is also split into two halves—light mode on the left and dark mode on the right—featuring a blue gradient icon above the ’ColorBox’ text, which is black on the light side and white on the dark side.

For accessibility-minded palettes, The Genome Color Tool by Kevin Muldoon is preloaded with ramps for primary, secondary, tertiary, positive, negative, highlight, attention, info, system, and neutral colors. It also includes familiar design system palettes — Univers, IBM Carbon, Salesforce Lightning, Adobe Spectrum, Ant, and Material — all exportable as JSON.

A screenshot of the ’Genome Color Tool’ interface, which helps generate color palettes based on different categories. The interface displays a grid of colors organized into columns labeled ’primary,’ ’secondary,’ ’tertiary,’ ’positive,’ ’negative,’ ’highlight,’ ’attention,’ and ’info.’ Each column contains a range of color shades, transitioning from lighter tones (near white) at the top to more saturated and darker hues towards the bottom. Hex codes for each color are displayed within each cell. At the top, input fields allow users to define base colors for each category, and buttons labeled ’Resources’ and ’Export’ are present for additional functionality. A blue ’Quick Start Video’ link is also visible.

Streamlining typography

Peppercorn handles type system creation. It sets up your entire text hierarchy using your preferred font family, base size, and scale ratio. A live preview shows what you're getting before export to JSON or CSS. Combined with Figma's improved variable management, this makes typography systems significantly easier to maintain.

A promotional interface for a typography tool called ‘The Perfect Type Scale.’ On the left, there is a heading that reads ’The Perfect Type Scale,’ followed by a subheading: ’For typography connoisseurs. Generate ultra modular scales in seconds.’ Below the text, there are icons with labels: ‘Documentation,’ ‘Text Variables,’ ‘Text Styles,’ ’Code,’ and ’Responsive scales.’ The right side of the image showcases the tool’s user interface, displaying font settings such as font family, base font size, font size scale ratio, and line height scale ratio. A list of typographic elements (H1-H6, body text, blockquote, caption, etc.) is visible with their respective font properties. A preview panel on the right side shows sample text (’The quick brown fox jumps over 17 lazy dogs’) in different heading and text styles, along with their font sizes and line heights. A ’Generate Scale’ button is at the bottom right.

Documentation: Turning your system into a shared reference

A design system only earns its keep when the people who need it can actually use it. That means documenting variables, components, and styles in ways that make sense to both designers and developers. A few plugins can do the heavy lifting.

Sticker sheets and variable catalogs

Print Variables by MINKMINKs generates focused sticker sheets for specific variable collections. It pulls in variable descriptions, so each value comes with context about its intended use. Combined with Figma's newer variable organization capabilities, this makes for documentation that stays tied to how your collections are actually structured.

A promotional graphic for ’Print Variables V2’ with a dark background and a glowing effect on various UI elements. The title, ’✨ Print Variables V2 ✨,’ is centered in bold white text with sparkles. Several floating white cards display different design variables, including typography, spacing, opacity, and breakpoints. One card shows a large blue ’Aa’ with the label ’colour/text/text-action-secondary’ and a hex code. Another card displays ’Font family: Poly’ in purple. Additional cards feature specifications like ’Width & Height, Gap: 128px,’ ’Opacity: 32%,’ and ’Radius: 32px.’ A larger card at the bottom-right outlines breakpoints for mobile, tablet, and desktop containers, listing values such as ’-343,’ ’808,’ and ’1224.’ The layout and glowing cards give the image a futuristic and modern feel.

When you need the full picture, Auto Documentation by Eddy Salzmann generates complete pages listing every variable, grouped by collection and mode. The upcoming ability to reorder collections and modes means the generated pages will mirror your real organization without extra cleanup.

A promotional graphic for Auto Documentation shows white text on a dark blue background, with blue, red, and green color cards overlaid.

For something more interactive, Variables and Styles List works as a widget rather than a plugin. It prints all your variables into a canvas object that refreshes with a button press, so you do not have to regenerate an entire frame every time something changes.

A dark gradient background with the title ’(x) Variables & Styles List’ in white text. Below it, a subtitle reads ’Figma Widget that lists all local variables & styles.’ On the right side, there is a vertical panel displaying a list of different UI elements, including color styles, tokens, and typography. A small ’Hirnspin’ logo appears in the bottom-left corner.

Documenting component variants

Propstar by Gusso lays out every combination of your variants and properties in a single table on the canvas. That removes the need to click through endless permutations to spot gaps or broken states, and it pairs well with the consolidated property panel for keeping components properly specced.

A bright yellow background with a grid of purple buttons in different sizes and styles. The grid is labeled with categories: ’Text and icon,’ ’Text,’ ’Icon,’ and ’Blank’ at the top, while the rows are labeled ’Large,’ ’Medium,’ and ’Small’ on the left side. The buttons feature variations including a star icon with text, only text, only an icon, or a blank button.

If you need a full spec sheet for a component, Specs from Directed Edges Plugins is a one-stop option. It breaks down variables, styles, nested components, and prop values into structured documentation.

A dark-themed UI specifications panel for ’eightshapes.specs.’ On the left side, a labeled component layout displays a green box with a title, labels, and numbered annotations. Below, there is an error alert component with red background colors and text labels. On the right side, a panel with white text highlights ’Now with Pro features for:’ followed by a list of benefits including ’Variable and Tokens Studio,’ ’Custom spec color & layout,’ ’Dark mode formatting,’ ’Differences across modes,’ ’Styling inventories,’ and ’Spec as JSON data.’

Auditing what you have

Similayer scans documents layer by layer and property by property, making it very useful for auditing and migrating between design systems. It was used on the Figma UI3 community file during its migration from staging to production, which speaks to its reliability at scale.

A promotional card for Similayer shows the name on a black background, overlaid with a UI example of the layer search function.

For maintenance work, Style Finder by Tafumi scans the whole document and lists every instance of a given style or variable. That makes finding outdated references far less painful when you are updating a system.

A UI interface for ’Style Finder’ on a muted blue background. The left side features the ’Style Finder’ logo, consisting of a magnifying glass icon over a blue circle, with the text ’Style Finder’ underneath. On the right, a panel shows a hierarchical list of styles categorized by color names such as ’black,’ ’blue,’ ’charcoal,’ and ’gray,’ along with nested elements like ’Page 1’ and ’Frame 1.’

Variable naming conventions change, and when they do, renaming by hand is a slog. CTRL Var: Rename Variables by Murph handles batch renames across all collections using group or variable pattern matching.

A UI interface for ’CTRL Var: Rename Variables’ on a bright green background. The left side features the ’CTRL Var: Rename Variables’ plugin window, consisting of a form for searching, filtering, and renaming variables. On the right, a panel shows the name of the plugin in a light colored style.

Implementation: Getting tokens into code

The last mile is translating the design system into something developers can consume. A handful of tools keep Figma and codebases in sync.

Export Import Variables by Jan Toman works both ways: it imports existing tokens from your engineering team and exports Figma variables to JSON. If you do not have a JSON pipeline set up yet, the export side gives you a starting point. With the variable organization improvements, exported tokens keep the structure developers expect.

A UI interface for exporting and importing variables in a design tool. On the left, a panel labeled ’Export/Import Variables’ includes options to import a collection via JSON and export collections with a button labeled ’Export to JSON.’ It also shows a summary of ’Radix Scales’ with 696 variables across light and dark modes. In the center, a hexagonal logo with yellow and blue arrows represents data exchange. On the right, a table lists color variables with columns for ’Name,’ ’Light,’ and ’Dark’ modes, displaying colors such as ’Tomato’ and ’Crimson’ with respective hex codes.

For CSS-focused teams, Handoff by Convertiv provides a clean interface for copying token values as CSS variables. The plugin is well designed, packing a lot of information into a usable panel.

A promotional graphic for ’handoff,’ a tool for exporting styles and components as tokens. The left side contains the logo and the tagline ’Work together, better.’ Below, text reads ’Export your styles and components as tokens in minutes,’ with ’tokens’ highlighted in blue. The image lists export options: ’Figma → CSS,’ ’Figma → SASS,’ and ’Figma → JSON.’ On the right, a UI panel from ’Handoff for Figma’ displays a list of component categories like ’Alerts,’ ’Badges,’ and ’Buttons,’ with options to define and customize styles.

If you need code in more than one dialect, Variables Converter by Laurent Thiebault translates Figma variables into CSS, JavaScript, Compose, and SwiftUI. Pick a collection and mode, and it generates clean code ready to drop into a project. With better variable organization, the output stays aligned with your naming structure.

A dark-themed promotional graphic for ’Variables Converter,’ a tool that transforms Figma variables into different formats. The left side features a hexagonal gear icon and the text ’Variables Converter’ in bold white letters. Below, a list of supported formats includes ’CSS variables,’ ’JavaScript variables,’ ’Compose variables,’ and ’SwiftUI variables,’ each represented by an icon. On the right, a UI panel displays a table of variable names and values, which are converted into code snippets for different formats.

Outside Figma, Shaper is a web-based customizer for generating CSS. You set font family, padding, spacing scales, and primary colors against a live preview, then grab the resulting CSS — including dark mode values — when you are done.

A practical workflow for design system maintenance

Bringing these tools together, a typical design system project follows a repeatable sequence. Start by building foundations with CSS color-mix() and Peppercorn, then organize everything using Figma's reordering features. Document the system thoroughly with Auto Documentation and Specs. Run a consistency audit with Style Finder, and finish with a clean handoff to development using Export Import Variables.

The efficiency gains come from eliminating repetitive manual work. Tasks that once required switching between tools or checking each component individually can now be handled inline within Figma, cutting down the time spent on design system upkeep.

Plugin stack at a glance

  • CSS color-mix() and Peppercorn for establishing design foundations
  • Auto Documentation and Specs for thorough documentation
  • Style Finder for consistency auditing
  • Export Import Variables for developer handoff

Each tool addresses a specific stage of the workflow, but together they cover the full lifecycle of a design system: creation, organization, documentation, auditing, and delivery.

The result is a streamlined process that frees up time for higher-level design work. When the tooling handles the busywork, teams can focus on the actual design decisions and refinements that matter most.