Toolabs Design System Manager
✦ Design Tokens, Theme Management and more...Define or update design tokens in one single panel, right from Figma.And, immediately see the changes cascading through your Figma design.✦ Manage Figma Styles with DSM PluginSelected Figma items are grouped by their styles and listed in the Selection Tab of the plugin.For each distinct style group, you can apply following actions to Figma items having this style :➥ Create and attach to New Token for each single style➥ Tokenize All styles➥ Select and attach to an Existing TokenOr➥ Select,➥ Delete,➥ Zoom to selected items with this style.✦ Use Real Content in your designsYou can easily populate your design with real data from Content tab of DSM plugin.When you click a data field on the plugin, all selected Figma layer items will be filled with relevant text or image data. You can also create custom data collections to be used as real content.✦ Document your Design SystemBuild your design system documents with an easy to use editor like Medium.com. Enhanced with design systems related customizable widgets!✦ Design to Code➥ Programmatically access to design tokens from GraphQL API, or➥ Use Export Widgets in documentation to export design tokens in various formats, e.g. CSS, Less, Sass, JSON, YAML, Js, Swift or Android.Learn more at :➥ https://www.toolabs.com/plugins/figma/🛠 Known Issues : Figma Plugin API does not allow to modify Team Library styles, because of this limitation, DSM design tokens can not be synced with team library styles.
Plugin Preview
About this plugin
✦ Design Tokens, Theme Management and more...Define or update design tokens in one single panel, right from Figma.And, immediately see the changes cascading through your Figma design.✦ Manage Figma Styles with DSM PluginSelected Figma items are grouped by their styles and listed in the Selection Tab of the plugin.For each distinct style group, you can apply following actions to Figma items having this style :➥ Create and attach to New Token for each single style➥ Tokenize All styles➥ Select and attach to an Existing TokenOr➥ Select,➥ Delete,➥ Zoom to selected items with this style.✦ Use Real Content in your designsYou can easily populate your design with real data from Content tab of DSM plugin.When you click a data field on the plugin, all selected Figma layer items will be filled with relevant text or image data. You can also create custom data collections to be used as real content.✦ Document your Design SystemBuild your design system documents with an easy to use editor like Medium.com. Enhanced with design systems related customizable widgets!✦ Design to Code➥ Programmatically access to design tokens from GraphQL API, or➥ Use Export Widgets in documentation to export design tokens in various formats, e.g. CSS, Less, Sass, JSON, YAML, Js, Swift or Android.Learn more at :➥ https://www.toolabs.com/plugins/figma/🛠 Known Issues : Figma Plugin API does not allow to modify Team Library styles, because of this limitation, DSM design tokens can not be synced with team library styles.
Plugin Details
| Version | 38 |
|---|---|
| Created | July 8, 2020 |
| Last Updated | November 24, 2021 |
| Category | Software development |
| Creator | Namık Özgür Aydın |
| Stats | 6529 installs, 453 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Editor Types:figma
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code