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.
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.
Design System Tool alternatives
- 1
Figma to Code
by Bernardo Ferrari
2.4M users8.9KFreeCode Conversion Made Easy: Figma to Web & Apps
- 2
Anima
by Anima
1.9M users18KFreeAnima - AI Design to code, Vibe code, Vibe design
- 3
Builder.io
by Steve Sewell
1.3M users23KFreeExport designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
- 4
Figma to HTML with Framer
by Framer
643K users12KFreeConvert your Figma design to HTML code in seconds with Framer.
- 5
SkewDat
by Unfold
640K users7.3KFree + $2/mo upgradeSkew any layer or group with all layers preserved to edit.
- 6
Locofy Lightning
by Locofy.ai
608K users5.4KFreeConvert Figma designs to code in a flash: React, React Native, Flutter, HTML/CSS, Angular, Next, Vue
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 Figma to Code, Anima and Builder.io.
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>Want it featured on figmaplugins.co? Submit it for review