On this page
About Design System Tool
Design System Tool is a free Figma plugin published by Tetrisly in 2022. It works in Figma Design and has 13,116 users and 255 likes on the Figma Community. It ranks #16 in Variables & Tokens on our lists.
In the developer's words
Bring design tokens to life. Boost your components. Automate creating Design System.
Color Aliases
Aliases help you create relationships between colors and place them in specific contexts. Inheritance ensures global propagation and unified product experiences.
Typography
Build your typography system from global values to contextual cases with Text Styles inheritance.
Import & export
Save Color and Typography Tokens from the file instantly. Make backups or share them with your teammates. Automatically override Tokens instead of dealing with duplicates.
It’s just the beginning. Components, Spacing, Layouts, Documentation, Effect Styles, Themes, Appearance, Shape Tokens available soon...
Design System Tool is created by Tetrisly
For any questions contact at hello@tetrisly.com
What's new
Version 15 · released Feb 7, 2023
- Added drag and drop function to manage ordering of aliases and styles.
Permissions and privacy
Network access
This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.
Extra permissions
- Reads your Figma name and avatar
Read from the plugin's published manifest.
Where Design System Tool ranks
Design System Tool alternatives
- 1
Styles & Variables Organizer
by Chenmu Wu
134K users3.2KFree + $15 upgradeApply styles and variables to all your designs with one click!
- 2
Export/Import Variables
by Honza Toman
85K users1.7KFreeExport variables from one file and import them to another. Supports modes, references, and scopes.
- 3
Design Tokens
by Lukas Oppermann
62K users1.9KFreeExport design tokens to JSON or GitHub.
- 4
Figma Tailwindcss
by Jan D'Hollander
53K users606FreeExport design tokens to tailwind theme
- 5
Kigen
by vijay verma
34K users1.7KFreeCreate Design System Variables, Tokens, Styles and more with documentation
- 6
variables2css
by Kai-Uwe Hella
28K users353FreeConvert Figma Variables to CSS, Sass, Tailwind, Json, Javascript (Styled-Components), Less or Stylus
Design System Tool FAQ
What does Design System Tool do?
Bring design tokens to life. Boost your components. Automate creating Design System. It's a Figma plugin by Tetrisly that runs in Figma Design.
Is Design System Tool free?
Yes. Design System Tool is free to install and run from the Figma Community, with no paid tier listed.
How do I install Design System Tool?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to Design System Tool?
By user count, the closest alternatives are Styles & Variables Organizer, Export/Import Variables and Design Tokens. Compare all of them on the best Figma plugins for variables & tokens.
Built this plugin?
Use this page as a landing page for Design System Tool: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/design-system-tool/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Design System Tool on figmaplugins.co" width="220" height="48"></a>