Skip to main content

How to streamline your design system workflow in Figma

Luis OuriachDesigner Advocate, Figma

If you’ve ever stared down a blank Figma file while building a new design system, never fear: These new features and plugins will turn that mountain of work into an afternoon task.

Share How to streamline your design system workflow in Figma

Hero animation by Kelli Anderson

Here’s a quick reference list of plugins we’re covering:

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

We’ve all been there: starting a new design system project, staring out the window, feeling the weight of the mammoth task ahead. Color ramps, typography scales, spacing systems—as a Designer Advocate, I know they can be immensely enjoyable to finesse, but let’s be honest: They can take forever to get right.

After countless rounds of this cycle, I’ve discovered a combination of tools and plugins that save me hours and take away my blue-500s. Think of them as your design system co-pilots, each specializing in a different aspect of the journey from concept to code. And the best part? Today, we’re launching 9 new design systems features that address some common frustrations—let’s get to know what’s changed in Figma, and how these updates make my favorite plugins even more powerful.

Reorder modes and collections with ease

If you’ve ever tried reorganizing your modes or collections, you know the pain of deleting and recreating them, only to have designs get out of sync. No more: Now, you’re able to easily drag and drop them to make sure everything is exactly how you want it. Modes and IDs stay intact as you rearrange, preventing resets or broken dependencies, and you can adjust your default mode without complication.

This may sound like a small change, but it makes a huge impact for teams that want to:

  • Keep their most-used collections at the top
  • Group related modes together
  • Rebrand or update product lines

9 new quality-of-life improvements

Today, we’re shipping updates that sand down friction and speed up your workflow:

  • 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 your workspace uncluttered
  • Improved component description UI that makes things easier to read at a glance
  • Drag the variable modal from the entire header for better control and access
  • Variable changes auto-save, so you don’t have to click to keep your updates
  • Tooltips on component names give you quick context when you hover
  • Edit button now properly aligned for a cleaner, more polished experience
  • Style window text overflow improvement to make sure long names don’t get cut off

Laying foundations: Getting the basics right

Now, let’s talk about the plugins that make these features even better. Community plugins have the potential to supercharge specific parts of your workflow. Here are the tools aimed at the foundational stage of building a design system, when you’re starting with color and typography.

Creating color palettes

Our own Developer Advocate Jake Albaugh created CSS color-mix(), a plugin that works like a digital color lab. Generate full palettes—with variables included—using modern formats like HSL, HWB, LCH, or OKLCH. It also creates smooth, natural gradients that transition beautifully between colors. When paired with Peppercorn (mentioned below), you can create a system within Figma at a remarkable speed.

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.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.

Use CSS color-mix() to support modern color spaces and generate swatches, variable ramps, and solid or gradient fills.

Pro tip: It’s tempting to create 10 shades of every color in your system, but start with just three to five. You usually need one for backgrounds, foregrounds, and borders. You can always add more when you need them.

For quick color ramp generation, Colorbox by Kevyn Arnott is my go-to tool. Build color scales using intuitive filters for saturation, brightness, and hue, then export to JSON or directly to Figma. Once you’ve created your palette, our new variable organization features make it easy to arrange them exactly how you want.

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.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.

Use Colorbox to generate and tweak color ramps in seconds, and export directly to Figma or JSON.

Lastly, if you’re on the hunt for a WCAG-compliant, full color palette generator, Kevin Muldoon’s The Genome Color Tool is preloaded with color ramps for primary, secondary, tertiary, positive, negative, highlight, attention, info, system, and neutral within your system. As if that wasn’t enough, it also has a lot of familiar design system color palettes pre-loaded—Univers, IBM Carbon, Salesforce Lightning, Adobe Spectrum, Ant, and Material—which you can export in JSON format, too.

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.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.

Use The Genome Color Tool as your accessibility-minded color builder.

Streamlining typography systems

Creating a type scale has always been a challenging process. Peppercorn changes that entirely. Set up your entire type system—from headings to body text—with your preferred font family, base size, and scale ratio. The live preview shows you exactly what you’re getting, and you can export JSON or CSS. With Figma’s improved variable management, your typography system becomes considerably 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.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.

Use Peppercorn to build complete type systems, and export everything developers need.

Documentation: Making your system clear and accessible

Once you’ve built your system, you need to document it so that our designer and developer partners can view, adopt, and implement it in all its glory. These plugins handle the time-consuming work.

Creating variable sticker sheets

When you need to document specific variable collections, Print Variables by MINKMINKs creates beautiful, focused sticker sheets. It includes variable descriptions, adding context that helps team members understand each value’s purpose. Use this with our new variable organization features to create contextual and dynamic documentation.

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.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.

Use Print Variables to create delightful sticker sheets of your variables, complete with descriptions.

For comprehensive documentation, Auto Documentation by Eddy Salzmann generates entire pages with all your variables, organized by collection and mode. With our upcoming ability to reorder collections and modes, your documentation will match your actual organization perfectly.

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

Use Auto Documentation to create documentation frames cataloging all your variables by collection and mode.

If you’re looking for something a little bit more dynamic, Variables and Styles List can print out all of your variables within the context of an updatable canvas object. It’s unique in that it uses a widget and can be updated with the press of a button, versus other options which require the entire frame to be regenerated whenever you make a change.

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.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.

Use Variables and Styles List to keeps tabs on all your variables in real-time, updating with a simple button press.

Visualizing component variations

Propstar by Gusso displays every permutation of your variants and properties in a comprehensive table. No more clicking through endless combinations to see if everything works. This places a full table of all the combinations on the canvas, making it a lot easier to see the edges of your carefully crafted components. Combined with Figma’s property panel consolidation, this plugin helps you keep things specced out like a Propstar.

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.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.

Use Propstar to map out every possible permutation of your component variants in a tidy table.

Need to document everything about your components? Specs by Directed Edges Plugins creates thorough breakdowns—variables, styles, nested components, prop values, and more. It’s a one stop shop for a full spec sheet.

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.’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.’

Use Specs to gather every detail about your components—from variables to nested elements—into crystal-clear documentation.

Auditing your design system

For scanning documents layer by layer, or property by property, I highly recommend Similayer. It has honestly saved me hundreds of hours when auditing and migrating between design systems. It was even used on the Figma UI3 community file when we migrated it from staging to production.

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

Use Similayer to find specific layers within your designs, whether they are based on line height, color, layer name, or all of the above.

When maintaining or updating design systems, Style Finder by Tafumi is our godsend. This plugin scans your entire document and lists every instance of a style or variable. It has saved me countless hours of tedious searching and made system maintenance much more manageable.

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.’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.’

Use Style Finder to track down every instance of every style across your files.

As your system grows, so will your number of variables. Often, we need to change our mind about a naming convention, which means hours of manual effort to update our existing sets. CTRL Var: Rename Variables by Murph is our savior here, with the plugin offering us a chance to batch rename 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.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.

Use CTRL Var: Rename variables to modify the names of your local variables across all collections.

Implementation: Bridging design and development

The final challenge is getting your design system into code efficiently. We can get very far with the previous steps, but we can also optimize the process by translating our designs to code, ensuring parity with development.

Export Import Variables by Jan Toman serves as the bridge between Figma and development. Import existing tokens from your engineering team or export your Figma variables to JSON. If you don’t have a JSON file up and running, this plugin also allows you to export from Figma—a double whammy bonus. With our new variable organization features, your exported tokens will maintain the structure your 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.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.

Use Export Import Variables to bridge the gap for design tokens between Figma and development.

Speaking of exporting, if your engineering team is working specifically with CSS and you’d like a quick way to copy and paste the token values as variables, check out Handoff by Convertiv. This one gets a bonus point for the really clean design of the plugin—they manage to pack so much information in while keeping it easy to use.

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.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.

Use Handoff to create a living preview of your design system so developers can see exactly how components should look and behave.

For more insights from Laurent on effective engineering practices and leadership, check out his post, “10 Lessons from an Engineering Manager.”

For quick code exports, Variables Converter by Laurent Thiebault transforms your Figma variables into multiple formats: CSS, JavaScript, Compose, and SwiftUI. Select your collection and mode, and it generates clean, ready-to-use code. This process becomes even more seamless with our improved variable organization.

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.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.

Use Variables Converter to translate Figma variables into various code dialects—from CSS to SwiftUI.

If you’re looking to create a spec sheet or full CSS variable code snippet outside of Figma while also seeing a preview on a common set of elements, check out Shaper. This web tool is a full scale customizer, where you can set your font family, padding value, spacing scales, and primary color in a preview window and then grab the CSS when you’re done—it even provides dark mode values.

Use Shaper to fine-tune interface styles in real-time while generating clean CSS code that works in light and dark modes.

What’s in your toolkit?

Putting it all together, here’s how I approach a new design system project using these tools and features:

  1. Build foundations with CSS color-mix() and Peppercorn
  2. Organize everything with Figma’s new reordering capabilities
  3. Document thoroughly using Auto Documentation and Specs
  4. Audit for consistency with Style Finder
  5. Hand off to development using Export Import Variables

I don’t know about you, but I’m feeling efficient. With these design systems updates, plugins, and widgets, we’re guaranteed to save hours on design systems work. That means more time can be spent grinding those craft coffee beans you bought at the farmer’s market last weekend. (Flat white with oat milk over here, thanks!)

What plugins do you rely on for your design system work? Reach out on X to continue the conversation. And don’t forget to check out our latest features—your design system will thank you.

Luis Ouriach is a designer, writer and person who dreams in components. He spends a lot of time curating educational Twitter threads about design systems in Figma, podcasts on the side, and tries but fails to send out a weekly tech newsletter.

WebsiteTwitter

Subscribe to Figma’s editorial newsletter

By clicking “Subscribe” you agree to our TOS and Privacy Policy.

Related articles

Create and collaborate with Figma

Get started for free