Plugin for Figma : Toolabs Design System Manager

Toolabs Design System Manager is a web based tool where you can :

• Create themeable design systems with design tokens, ranging from colors to motion
• Design stateful components with no-code and export as production-ready component libraries for several frameworks (in development)
• 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.
• Build design system documents with an easy to use editor like Medium.com, enhanced with design systems related customizable widgets!

Last year we released some DSM features as a plugin for Adobe XD, focused on creating themeable designs.

Today we are happy to announce that Toolabs DSM is available as a plugin for Figma with additional features such as Real Content and advanced style based selection utilities specific to Figma.

With Toolabs DSM plugin for Figma, you will be able to :

• Create design systems and use them in multiple Figma files
• Visually define and customize Design Tokens, attach them to Figma styles and, immediately see the changes cascading through your design.
• Create themes with system states, with no need to copy and paste the artboards.
• Achieve Harmonic Consistency with Modular Scales for Typography, Spacing and Motion design.

• Manage microcopy, which is adaptable to voice and tone or is multilingual with help of system states.
• Use Real Content in your designs by auto-populating text or image items with real data.

Selected Figma layer styles are grouped by their style values 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
• Attach to an Existing Token
• Change the token value
• Select, Delete or Zoom to selected items with this style.

You can also filter styles by the layer type, such as texts, master components or component instances etc.

After all, you can go to Toolabs DSM web application where you can export design tokens either in predefined formats or use your custom formats.

And finally, you can document your design system either from scratch, using custom widgets specific to design tokens, or customize predefined document template and share the document with your team.

We hope you will like what we have built and share your feedback with us…

You can install the plugin from :