This article documents three key aspects of the DSM design tokens import feature:
- Understanding properties mapping on design tokens import
- Changing token names in bulk
- Grouping imported tokens
Understanding properties mapping on design tokens import
When importing styles, DSM creates a token for each selected style property, using the style’s name as a prefix to the property name. Once imported, you can change the naming and organization of the tokens in DSM, including making name changes in bulk.
Example of style imported from Sketch to DSM
To better understand how properties are mapped when importing design tokens to DSM, consider the following example of a font style named
Fonts / Brand / H1 with its opacity set to
0.7 in Sketch:
When importing the font style above, DSM would create a corresponding token:
Fonts.Brand.H1.opacity = 0.7
Here's the same token seen in the JSON editor in DSM:
In DSM’s table view, the token would appear as follows:
Changing token names in bulk
DSM accepts any string token name. That said, if you’d like to take advantage of Style Dictionary’s default transformations of tokens into platform-specific files, you’d need to adhere to Style Dictionary's established naming convention.
You can change your design token names in bulk by using JSON editing in DSM.
For example, if you’re looking to only keep
H1 in token names and remove
Brand in the example directly above, follow these steps:
- Switch to JSON editing mode. Note that multiple properties will be grouped under
- Delete the top nodes,
Brand, by deleting them and their matching curly brackets.
- Before saving the change, we recommend clicking the download the previously saved tokens link, so you can easily revert the change if something goes wrong.
- Click Save changes, and then switch back to table view mode, where you should see the
Fonts.Brandprefix has been removed for all tokens.
There are two primary ways to import style properties. The first involves extracting properties for each style into a new token set.
For example, consider the styles
H1, H2. Extracting each style into separate sets would obviously result in two sets in DSM, and each set (
H2) would have its own tokens representing properties, like in following example:
The second option is to import properties from multiple styles into a single set. Typically, this option is used to import different possible values for the same property across styles. In other words, it’s used to bootstrap core values in the system rather than styles.
For example, say the Sketch styles
Subtitle all use a different text color value. You’d like to create four text color tokens to be used consistently in the system.
You can select the above four styles from the style picker during import, and then select only the color property in the properties dropdown. Then, set the import destination to a single set.
This will import all four color values into a single tokens set. You can then rename the tokens to their token names—e.g.
text-tertiary, as seen in this example: