Introduction

This package is used together with Token Studio for Figma for Sortera Group in order to maintain and develop their Design System.

For handling our Design System from Figma to code the Product Team have implemented Token Studio (the plugin). The plugin enables “One source of truth for design and development” that can be managed inside Figma and through code.

The plugin enables the designer to push and pull to the design system repository. The developers have the same possibility but vice versa, to push and pull when working in the repository. This creates a seamless connection between design and code and makes it a great prerequisite for the Sortera Design System to be developed, updated and maintained cross functionally.

Package installation

Install this package with npm i sortera-design-system to your repository.

Design to JSON

When creating styles and tokens the plugin dynamically create a JSON file with all necessary information to build the theme files. Theme files can be built in many different ways and “translated” to multiple coding languages.

JSON to production

With the setup of the plugin together with this package, the repo get production ready code that can be used directly.

Install the plugin in Figma

Using the plugin requires the editor in Figma to install the plugin. Install the plugin from the Community page: Tokens Studio for Figma (Figma Tokens) | Figma.

In Azure, go to YOUR_ORGANISATION/_usersSettings/tokens and either add a token or use an existing token.

Open the plugin in Figma by pressing CTRL/CMD + P and type “Tokens Studio” and press Enter.

The following settings are needed to get started in Figma with the plugin via “Sync providers”

1. Open settings and press “Add new” under the Sync providers.
2. Select Azure DevOps.
3. Add the necessary credentials.
4. Click Save credentials.

If the plugin does not actively asks you to pull the existing tokens, press "Pull from ADO" in the bottom of the plugin GUI next to the branch name.

Settings

To make the plugin work as intended, you need to choose the option "Resolved values, no variables or styles" in the blue dropdown button to the right. You also want to use the option "Apply current tokens to: Current selection (fast)". Otherwise the plugin setup will not work. Select only the artboards you want to see in the different sets (for example dark mode / light mode) in order to see the changes.

Pushing, pulling and versions

The editor can now do changes in the Figma design file and choose when to push/commit a new "version". Try to commit minor changes at a time so it is easy to rewind if something is broken.

Versions and branching

The design system is using main of the repository and every commit from Figma is pushed into main directly. Branching is possible but on the paid plain of the plugin. When the plugin asks if you want to make a Pull Request, you can therefore choose No.

New version with every commit

Every time the editor in the Figma file pushes changes the version will increase with the value of 1 of Y example: A.B.Y.

This means that a pushed change will increase like this:

• Current version: 1.0.10
• Next version will be: 1.0.11

Updating versions in your project

While the version is updated in the design system repository, you will need to manually update the version in the project you are working with.

In your dependencies, add the new updated version to its correct version number, example: "sortera-design-system": "1.0.11",

This is the last step to have the exact sync between the Figma file using the plugin and the code. With this process, it is easy to revert and go back if the updated version of the design system breaks something in production.