Build your theme

Designsystemet is designed to be used with your own visual identity — including colors and other preferences. This means you don’t need to build a new design system from scratch. With Designsystemet’s Theme Builder, you can set up your own theme and generate Design Tokens that can be used in both design tools and code.

Connection between design and code

The first thing to consider is whether you want a connection between design and code. Either way, you should ensure the same Design Tokens are used in both, so that designers and developers are working from the same rules. This ensures consistency between what’s designed and what’s built. You’ll need to decide whether to handle this manually or through a connection.

Option 1: Without a connection between Figma and code
Option 2: With a connection between Figma and code

Which option you choose depends on your needs and constraints. Setting up a connection requires a pro license for the Tokens Studio plugin. We hope to make this easier with our own plugin in the future.

We’ll walk you through both options below.

Option 1: Without direct connection

This option does not require Token Studio. With this option, you run the same code snippet from the theme builder in Designsystemet's Figma plugin and in the terminal to generate Design Tokens for building in code. There will not be a direct connection, but the variables/tokens will be generated using the same method, thus giving you similar values in code and Figma.

Here's how to proceed:

1. Get the component library from Figma Community (Click "Open in Figma") to your organization that has at least a pro license. Note that this will be a copy of the component library without any connection to the main file. The file has now been placed in "drafts", so you need to move it to a suitable location in your organization.

2. Install Designsystemet's plugin for Figma.

3. Go to the Theme Builder and generate the color scale based on your brand colors. Keep the same color names and don't remove colors (This only works with option 2.)

   Click "Apply theme". Copy the code snippet.

4. Paste the code snippet into the plugin you installed in step 2. (To generate Design Tokens for code, the developer must run the same code snippet in a terminal.)

   Select "Update variables" in the plugin. Now you should see all components with your own brand colors in Figma. For other designers in the organization to use the components, you need to publish the file.

Option 2: With connection

A connection means you don't have to enter the variables into Figma manually; instead, you import them from the "Tokens Studio" plugin. This option requires knowledge of Git.

Here's how to proceed:

1. Get the component library from Figma Community (Click "Open in Figma") to your organization that has at least a pro license. Note that this will be a copy of the component library without any connection to the main file. The file has now been placed in "drafts", so you need to move it to a suitable location in your organization.

2. Go to the Theme Builder and generate the color scale based on your brand colors. Click "Apply theme". Copy the code snippet and run it in a terminal in your Git repo. Commit and push the files.

3. Install the Tokens Studio plugin for Figma. Tokens Studio ensures connection between Figma and code using Design Tokens.

Click the image or press Escape to close

• Follow Tokens Studio's guide "Sync your Design Tokens with code" to set up connection to your Git repo.
• Remember to set "Token storage location" to design-tokens (or whatever you have chosen to call your folder with Design Tokens).

4. Under "Tokens" in Tokens Studio, you should now see all the colors you generated with the Theme Builder in step 2. In Tokens Studio, select Styles & variables and Export styles & variables to Figma and follow the steps to export tokens to variables in Figma. Make sure you have these settings when exporting the variables:

Click the image or press Escape to close

Be aware that modes already in the Community file are not deleted by Token Studio. Delete the themes you don't need in Figma "Local variables" under "Theme". The same can happen under "Main" and "Support".

Click the image or press Escape to close

5. Now you should see all components with your own brand colors in Figma. For other designers in the organization to use the components, you need to publish the file.

6. Done! PS. If you need to make changes to tokens in Tokens Studio, you can push the changes to your repo by clicking on the "Upload" icon (Push) at the bottom.