Use Designsystemet with your own theme

Are you going to implement Designsystemet in your own organization with your own brand colors and preferences? There are several ways to do this. The first thing you need to decide is whether you want to use the components with or without a connection between Figma and code.

Either way, you should ensure that the same Design Tokens are used in both Figma and code, so that designers and developers work according to the same rules. This ensures that things look the same in Figma and in the actual solutions. Whether you do this manually or with a connection is up to you.

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

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

We'll guide you through both options here.

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.

• 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:

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".

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.

Rediger denne siden på Github (åpnes i ny fane)