Back to Plugins
Toolabs Design System Manager

Toolabs Design System Manager

<p>✦ Design Tokens, Theme Management and more...</p><p><br></p><p>Define or update design tokens in one single panel, right from Figma.</p><p>And, immediately see the changes cascading through your Figma design.</p><p><br></p><p>✦ Manage Figma Styles with DSM Plugin</p><p><br></p><p>Selected Figma items are grouped by their styles and listed in the Selection Tab of the plugin.</p><p>For each distinct style group, you can apply following actions to Figma items having this style :</p><p>➥ Create and attach to New Token for each single style</p><p>➥ Tokenize All styles</p><p>➥ Select and attach to an Existing Token</p><p>Or</p><p>➥ Select,</p><p>➥ Delete,</p><p>➥ Zoom to selected items with this style.</p><p><br></p><p>✦ Use Real Content in your designs</p><p><br></p><p>You can easily populate your design with real data from Content tab of DSM plugin.</p><p><br></p><p>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.</p><p><br></p><p>✦ Document your Design System</p><p><br></p><p>Build your design system documents with an easy to use editor like <a href="http://Medium.com." rel="noreferrer noopener nofollow" target="_blank">Medium.com.</a> Enhanced with design systems related customizable widgets!</p><p><br></p><p>✦ Design to Code</p><p><br></p><p>➥ Programmatically access to design tokens from GraphQL API, or</p><p>➥ Use Export Widgets in documentation to export design tokens in various formats, e.g. CSS, Less, Sass, JSON, YAML, Js, Swift or Android.</p><p><br></p><p>Learn more at :</p><p>➥ <a href="https://www.toolabs.com/plugins/figma/" rel="noreferrer noopener nofollow" target="_blank">https://www.toolabs.com/plugins/figma/</a></p><p><br></p><p>🛠 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.</p>

themestyle guidetokensrealdatadocumentdsmexportdesign systemtypographystyles

Plugin Preview

Toolabs Design System Manager 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 Plugin


Selected 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 Token

Or

➥ Select,

➥ Delete,

➥ Zoom to selected items with this style.


✦ Use Real Content in your designs


You 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 System


Build 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

Version38
CreatedJuly 8, 2020
Last UpdatedNovember 24, 2021
CategorySoftware development
CreatorNamık Özgür Aydın
Stats6432 installs, 441 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma