Optimizing Your Design System in Figma
Who can use this feature?
Available on Organization and Enterprise plans, anyone with can edit access to the file can utilize this tool to streamline their design process.
This feature helps you quickly identify and fix inconsistencies within your design system, including hard-coded values that can be replaced with variables or styles, such as colors, text styles, corner radius, and spacing and padding.
- Hard-coded values that can be replaced with variables or styles, including:
- Colors
- Text styles
- Corner radius
- Spacing and padding
- Components, variables, and styles from incorrect libraries, based on your current library selection, which can be updated to reflect the correct libraries.
This tool does not rely on large language models or generative AI, and instead, suggestions are ranked based on factors like similarity to the current value, variable naming and hierarchy, and usage frequency across your team or organization.
- Similarity to the current value
- Variable naming and hierarchy
- Usage frequency across your team or organization
As you continue to use this tool, suggestions will become more relevant over time, allowing you to refine your design system and improve your workflow.
Prepare Your File
Before getting started, keep in mind that this tool works best with a published, variables-based design system, and it's recommended to mark a specific selection of libraries to pull from in the settings menu to improve suggestion quality.
- Use a published, variables-based design system for optimal results.
- Mark a specific selection of libraries to pull from in the settings menu to improve suggestion quality.
Run The Tool
Note that there are a few current limitations to be aware of, including the fact that the tool only runs on one page at a time and selections are limited to 25K layers.
- The tool only runs on one page at a time.
- Selections are limited to 25K layers.
- Swapping color styles is not currently supported.
Once your design is ready, you can run the tool to review and resolve suggestions, and to get started, simply select the layers you'd like to check, access the tool from the right-click menu or the Actions menu, and run the tool.
- Select the layers you'd like to check.
- Access the tool from the right-click menu or the Actions menu.
- Run the tool.
If the check results in suggestions that need to be reviewed, they will appear organized into four tabs: Colors, Dimensions, Typography, and Components.
- Colors: Hard-coded color values, contrast suggestions, and colors from libraries missing from the file or deselected in Settings.
- Dimensions: Hard-coded values like spacing, padding, and corner radius, as well as values from libraries missing from the file or deselected in Settings.
- Typography: Hard-coded font styles and sizes that can be replaced with text styles, along with values from libraries missing from the file or deselected in Settings.
- Components: Components detached from their source library, and those from libraries missing from the file or deselected in Settings.
Review Suggestions
The tool opens to the first tab with violations and issues, and at the top, you'll see the total number of suggestions across all categories, which are based on values similar to a variable in your design system or labeled as a Match when the value exactly matches an existing variable.
Click Check color contrast to see if your design meets your accessibility standards, and you can pick between AA and AAA contrast levels in the Settings menu.
Preview Changes
Click a row to recenter the canvas on the affected area, and to preview changes on the canvas, hover over a suggestion row to highlight affected layers in both the canvas and the Layers panel.
- Hover over a suggestion row to highlight affected layers in both the canvas and the Layers panel.
- Hover over a suggested value in the right column to preview the change to the affected layer on the canvas.
- Use the dropdown to select a different value.
Apply Changes
You can apply suggestions in a few ways, including applying all suggestions in the current view, applying a single change, or applying multiple changes.
- Apply all suggestions in the current view by clicking Apply.
- Apply a single change by selecting a row and clicking Apply.
- Apply multiple changes by selecting multiple rows and clicking Apply.
Click Apply once you're ready to make the changes.
Undo Changes
Press ⌘Command / Control Z to undo changes, and note that undo behaves like any on-canvas edit, so you can refresh the tool modal to ensure results are up to date.
Adjust Settings
Open the Settings menu to show or hide row counts, choose which libraries to check against, or select a Contrast level to use when contrast checks are enabled.
- Show or hide row counts.
- Choose which libraries to check against.
- Select a Contrast level to use when contrast checks are enabled.
Adjust Libraries
To update the libraries used for the tool, open the Libraries selector, select or unselect libraries for the tool, and note that the tool will refresh to reflect your updated library selection.
- Open the Libraries selector.
- Select or unselect libraries for the tool.
Learn how to add and remove libraries in a file for more information.
Re-run The Tool
Use the Reload button to re-run the tool on a new selection, and once you've resolved all suggestions, each tab will show a completion state.
If you're weighing this for your own project, that's the kind of decision we help with at Chulbul Design.
Frequently Asked Questions
What is the purpose of this tool?
The purpose of this tool is to help you quickly identify and fix inconsistencies within your design system, and to improve your workflow by providing suggestions for replacing hard-coded values with variables or styles.
How do I access the tool?
You can access the tool from the right-click menu or the Actions menu, and you can also run the tool by selecting the layers you'd like to check and clicking the Apply button.
What are the limitations of the tool?
The tool only runs on one page at a time, selections are limited to 25K layers, and swapping color styles is not currently supported.
How do I undo changes made by the tool?
You can undo changes made by the tool by pressing ⌘Command / Control Z, and note that undo behaves like any on-canvas edit, so you can refresh the tool modal to ensure results are up to date.