Tokens Studio for Figma
  • Getting Started
    • Tokens Studio Plugin for Figma
    • Install the Figma Plugin
    • Pro Licence for the Figma Plugin
    • Join the Slack Community
    • Feature Requests - Featurebase
    • Changelog - Featurebase
  • Design Token Fundamentals
    • Intro to Design Tokens
      • Token Anatomy - Type
      • Token Anatomy - Value
      • Token Anatomy - Description
      • Token Anatomy - Name
  • Token Management
    • Token Types
      • Asset
      • Boolean
      • Border - Composite
      • Box Shadow - Composite
      • Color
        • Modified Colors (pro)
        • Gradient Colors
      • Dimension
        • Border Radius
        • Border Width
        • Sizing
        • Spacing
      • Number
      • Opacity
      • Other
      • Text (string)
      • Typography - Composite
        • Font Family
        • Font Weight
        • Font Fallbacks
        • Font Size
        • Line Height
        • Letter Spacing
        • Paragraph Indent
        • Paragraph Spacing
        • Text Case
        • Text Decoration
      • Composition (legacy)
    • Token Values
      • Token Values with References
      • Using Math in Token Values
    • Token Names
      • Token Name Technical Specs
      • Token Groups
      • Edit Token Names
    • Token Description
    • Token Sets
      • JSON View
  • Themes management
    • Themes (pro)
    • Themes that switch
  • Working in Figma
    • Variables and Tokens Studio
    • Styles and Tokens Studio
    • Export to Figma Guide
      • Export Options
      • Export Using Themes (pro)
      • Export Using Token Sets
      • Variables Skipped on Export
      • Styles with Variable References
    • Import from Figma Guide
      • Import Styles from Figma
      • Import Variables from Figma
        • Connect Themes to Imported Variables
        • Imported Variable Types and Token Types
    • Non-local Variables and Styles (pro)
    • Remove Tokens from Figma elements
    • Dev Mode in Figma
  • Settings Management
    • Plugin Settings
    • Base Font Size Setting
    • Token Format - W3C DTCG vs Legacy
  • Token Storage and Sync Integrations
    • Local Document - Figma File Token Storage
      • Figma Data Limits
    • Remote Token Storage Integrations
      • GitHub - Git Sync Provider
      • GitLab - Git Sync Provider
      • Bitbucket - Git Sync Provider
      • Azure DevOps - Git Sync Provider
      • JSONBin - Cloud Sync Provider
      • Supernova - Cloud Sync Provider
      • Tokens Studio Platform - Cloud Sync Provider
      • URL - Server Sync Provider
      • Generic Versioned Storage - Server Sync Provider
    • Multi-file Sync to Remote Storage (pro)
    • Manage Sync Providers
      • Edit Sync Provider
      • Change Active Sync Provider
      • Remove Sync Provider
    • Sync Changes to Remote Storage - Push and Pull
    • Branch Switching (pro) - Version Control
  • Inspect and Debug Tokens
    • Inspect Tokens
    • Remap Tokens
  • Transform Tokens for Development
    • Style Dictionary + SD Transforms
    • Official docs for Style Dictionary
  • Style Dictionary Playground
  • Troubleshooting
    • Reset Tokens from Dev Console
    • Tokens Studio Status
  • Open Source
    • Contribute
    • Shared Plugin Data
Powered by GitBook
On this page
  • Gitlab sync setup guide
  • How it works
  • Gitlab setup steps
  • Plugin settings for Gitlab
  • Shared source of truth
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousGitHub - Git Sync ProviderNextBitbucket - Git Sync Provider

Last updated 5 months ago

Was this helpful?

Gitlab sync setup guide

is a popular option to store Design Tokens in a code repository.

You can use the Tokens Studio plugin native integration with Gitlab to sync your Design Tokens to a repository of your choice.

We support two-way sync, meaning you can use the plugin to:

  • Push JSON files of Design Tokens to Gitlab

  • Pull the Tokens stored in Gitlab into any Figma file

This means the Design Tokens living in code are the source of truth for our design decisions that can be shared between design and development teams.

This doc outlines how to set up a Gitlab repository and add it as a Sync provider in the plugin.

→ Once set up, you can use the plugin's Push and Pull features to keep your Tokens in sync. #add-doc-link

How it works

  • Set up a repository and personal access token in Gitlab

  • Configure Gitlab as a sync provider within the Tokens Studio plugin.

  • Use the plugin to sync your Design Tokens between Gitlab and Figma design files.


Gitlab setup steps

If you haven't already, head over to https://Gitlab.com/ and create a free account.

1. Create new project repository

  • Choose a project name

  • In the project URL select the owner and choose a project slug

    • In the plugin, the project slug will act as the repository name

    • Names that are easy to remember and type are ideal

  • Select your Visibility level

    • Public anyone can see it

    • Private needs permissions to view

      • Your choice doesn't change the plugin's ability to sync with the repository

  • Initialize project with a README file needs to be checked

    • This is mandatory because the plugin can not sync to an empty repository

  • Confirm by pressing the Create project button

You are now looking at your new repository! Well done!

Save the URL of the repository somewhere safe as it's needed for the plugin configuration.

2. Personal access token

Not to be confused with anything to do with a Design Token, a Personal access token is a passcode from Gitlab you enter into the plugin that allows the connection to happen.

Log into your Gitlab account:

    • Select your avatar on the top left

    • Select Edit Profile

  • Select Access Tokens from the left sidebar

  • Click Add new token

  • Add a Name of what the token is for.

    • Example: test-token repo sync to tokens studio

  • Select an Expiration time frame

  • Add a Description to remind yourself what you made this token for

  • Select scopes

    • Ensure the API option is selected if you want the plugin to have read and write permissions

  • Select Generate token

  • Save the generated access token somewhere safe as it's needed for the plugin configuration.

You're ready to configure the Tokens Studio plugin in Figma!


Plugin settings for Gitlab

In Figma, open the Tokens Studio plugin and navigate to the Settings page using the navigation tab.

  • Under the Sync providers section, select the Add new button to see a list of all Token storage providers

  • Select Gitlab

Add credentials for Gitlab

Some of the inputs on the form come from the Gitlab steps above, others aren't so obvious as to where the info comes from.

1. Name

This is a nickname that shows up in the plugin settings page later on to identify this specific sync provider configuration.

  • Choose something memorable to you and your project.

  • Example: UdayGitlab

2. Personal access token

3. Repository (owner/repo)

For example, if your URL says https://gitlab.com/amazingdesigner/radixtokens, you will enter amazingdesigner/radixtokens into the form in the plugin.

As a note, be sure to use the URL of your repository and not the tree for the Group/Subgroup for your Project listed in Gitlabs UI as it won't work in the plugin.

4. Branch

Your engineers might tell you what to add as the default repository branch where you will be pushing your Tokens, so if you aren't sure, ask them.

  • If you created a new repo following the steps above, you will enter main.

5. Token storage location (file/folder path)

This tells the plugin:

  • How to organize your Token JSON files in Gitlab.

    • In a folder of multiple files, or a single file.

  • The location of where your Token data is stored.

    • The file or folder's pathway (or name) to sync with.

This setting impacts:

  • How engineers can work with our Token files during the Token transformation stage of the design-to-development process.

  • May limit edit access of Tokens for other team members using the Tokens Studio plugin.

Folder

The folder option syncs Token data from the plugin into a folder that contains multiple JSON files or subfolders of JSON files.

In the plugin, enter the pathway of the folder where you want the Token data to be stored, which is the folder name without any extensions.

For example:

tokens

Our Gitlab repository will have a folder called tokens synced to the Tokens Studio plugin in Figma.

  • Each Token Set created in the plugin is added to the folder as an individual JSON file.

  • Additional data files generated by the plugin are also added to the folder.

    • For example, themes configuration.

Recall that storing your Token data in a folder (multi-file sync) is a pro feature.

  • If other team members are working with your Tokens and do not have a Pro Licence for Tokens Studio, your Tokens will be read-only for them.

File Path

Setting our Token storage as the file option syncs our Token data from the plugin into a single JSON file in code.

Combining Token data into a single file limits engineers' ability to work with Theme information when transforming Design Tokens.

→ Learn about the Themes (pro) feature in Tokens Studio here. #add-doc-link/themes-pro

File storage might work for you if:

  • You are using the free version of Tokens Studio.

  • Engineers are not using your Design Tokens in code.

In the plugin, we enter the pathway of the JSON file where we want our Token sets to be stored, which is the file name with the .json extension.

For example:

tokens.json

Our Gitlab repository will have a single code file called tokens.json synced to the Tokens Studio plugin in Figma.

  • Each Token Set created in the plugin is combined into this single file in our repository.

6. Base URL (Optional)

Base URL must be added to the Gitlab credentials if your organization is running an enterprise server.

Looking at the URL of your repository, if you see a name between gitlab and .com, your organization is running an enterprise server. For example: https://gitlab.hyma.com/amazingdesigner/radixtokens

In this example, the Base URL you would enter into the plugin form is:

gitlab.hyma.com

This tells the plugin to point to the API on this specific URL for our organization.

Save and do the initial sync

Once you Save your credentials, the plugin will compare your tokens with what's in your repository.

You'll see a modal asking you to push or pull to Gitlab to 'sync' the plugin data with your repository.


Shared source of truth

As you work in the plugin, push and pull indicators remind you to stay in sync with your Gitlab repository.

Once your Token JSON files are synced to your Gitlab repo, you have a shared source of truth between Designers and Engineers!


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

    • How might we improve the experience of working with sync providers in general?

Sign into your account and navigate to the page.

Navigate to your

The Personal access token you saved from .

The URL from the repository from the has the owner/repository in it after the gitlab.com/

Gitlab -

SD-Transforms -

Style Dictionary -

Tokens Studio Plugin GitHub -

🧑‍💻

↕️

🔐

Create a new project
Gitlab account settings
https://gitlab.com/
Read Me
https://styledictionary.com/
Open issues for Sync Gitlab
Sync to external token storage enhancements - Feature Request
Git sync enhancements - push, pull, merge, branching - Feature Request
Data security info request - Feature Request
step 2 above
step 1 above
Gitlab

💡 Something to share?

Submit it here!

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio

community Slack
submit it on our feedback tool

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/
Page cover image

The Multi-file sync to remote storage feature requires a for Tokens Studio. Read the guide for more details.

Pro Licence
Multi-file Sync to Remote Storage (pro)

We suggest setting your Token storage as the folder option when possible. If you use the Themes feature in Tokens Studio and your engineers are consuming your Tokens from your Git provider, they require Tokens stored in a folder for the transformation process to work properly.

→ Read the Add New Sync Provider guide for more details.

Manage Sync Providers

Read the Sync Changes guide for more details

Sync Changes to Remote Storage - Push and Pull

Transforming Tokens

Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.

The various Token Types supported by Tokens Studio have unique transforms to be aware of.

Style Dictionary
@Tokens-studio/sd-transforms
Token Types