Plugin for Figma : Toolabs Design System Manager

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

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 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.

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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