Plugin for Figma : Toolabs Design System Manager

Create tokens driven Themeable Designs with a Full-Featured Design System Manager

Namık Özgür Aydın
Jul 21 · 3 min read
Image for post
Image for post

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!
Image for post
Image for post

Last year we released some DSM features as a , 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.


Image for post
Image for post

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.
Image for post
Image for post
  • 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.
Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

Toolabs

Holistic Interface Design Platform

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store