Design System Manager
Plugin for Adobe XD
CREATING THEMED DESIGNS IS NOT EASY!
With the Asset panel in Adobe XD, you can already manage design tokens such as colors, gradients, text styles and share them between design elements within your document. Just to make a simple color theme, for each theme variation you need to:
- Duplicate all tokens and rename each of them (e.g., $background-light -> $background-dark).
- Make copies of all artboards and apply the corresponding design token for this theme to each element in the artboard.
- Repeat all the changes for other themed artboards to maintain system consistency for any change in the master artboard.
It is a cumbersome and error-prone process, that wastes time.
SOLUTION : STATEFUL DESIGN SYSTEM MANAGER
Toolabs DSM Plugin takes style management one step further with its stateful design system management which enables you to declare all the possibilities of your design without being have to copy and paste the artboards.
First, you declare the possible states of your design, which are not limited to only color themes but might be for multilingual copy text or even for different versions of your work.
Then, you select the desired state and change the value of design tokens to be applied for the selected state, without even touching your artboards, the changes will be applied to design elements, that is all!
Moreover, you are not limited to a single list of color variations, but can generate n-ary cartesian product of multi-dimensional state declarations. An example is easier to show :
CREATING A NEW DESIGN SYSTEM
Once you authorize the plugin to use your Toolabs account you will be able to create your own design systems on the plugin panel.
Click to Create button and give a name for the new design system.
LINK STYLES TO DESIGN SYSTEM
By clicking the sync button, the plugin collects styles from selected artboard elements and opens a modal dialog listing styles to be added to design system as design tokens.
Here you can remove styles from the list and give names to design tokens to be created.
CREATE THEMES
When you have linked tokens you will be able to have variations.
You will find 'Manage States' under the main menu. Start with add a new state then add variations whatever you want. When you go back to the main panel, you will see your state and their variations.
Pick the target state and change design element style. You will see the changed token on the panel with an indicator. Click the indicator then click to 'Update'. Now you have a new theme with a different style.
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!
LIMITATIONS
There are some limitations for manipulating canvas with the current XD API. Therefore, State changes don't apply to some linked elements which belong to a component or a repeat grid.