Design System Manager

Plugin for Figma

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 the 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.
You can try and see them in action with Mini Figma demo screens below.

Use Real Content in your designs

You can easily populate your design with real data from the 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.
Experiment with the interactive Mini Figma demo canvas below to see it in action:
Selected Items
Images
Titles
Subtitles
Title 1
Subtitle 1
Subscribe
Title 2
Subtitle 2
Subscribe
Title 3
Subtitle 3
Subscribe
Title 4
Subtitle 4
Subscribe
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.
You can also define your custom format using handlebars template language.

Built-in Document Designer

Build your design system documents with an easy to use editor like Medium.com.
Enhanced with design systems related customizable widgets!