Tokens Studio

MDX design tokens are created using Tokens Studio. To begin your journey into the realm of design tokens, please follow the instructions provided below.

Precondition

1. In order to use Token Studio correct, you need access to Gitlab. Please contact us on Teams so we can grant you Gitlab permission for the MDX Gitlab Repo. Afterwards you can login to git.intern.migros.net (only with VPN or MCORP01) with your AD credentials (do not use Azure Login!). If you have problems with Gitlab access → check Gitlab User Guide
2. You will need a Token Studio license to contribute your own tokens. To get approved for licences, please write us on Teams. Note: If you just want to inspect design tokens in Figma, for example as a developer, you won't need a license.
3. Please wait until you have been informed about your license key (takes approx. 2-4 days to get the license) before proceeding further at this instruction.
4. You need to run VPN or you have to be connected to MCORP01 to access GitLab and to use Token Studio.
5. Generate a Gitlab Access Token here like the printscreen below and copy and save the access token somewhere. You will need it later. (leave the expiration date empty)

Installation

1. In Figma, activate the Tokens Studio Plugin. You can also find it in the Resource Menu [⌘I] directly in your Figma File.
2. Run the plugin. (If you encounter a form, whether it contains pre-filled content or not, kindly dismiss it by clicking it away)
3. Add your Token Studio license key under "Settings/License Key" if you want to contribute design tokens.
4. Under "Settings" add a new GitLab sync provider with the following settings:
   Name:
   MDX Design Tokens
   Personal Access Token:
   [add your previous saved token here]
   Repository:
   mdx/mdx
   Branch:
   main
   File Path:
   packages/design-tokens/designTokens
   Base URL:
   https://git.intern.migros.net

Git

If you are not familiar with Git or Git branches, we recommend watching these short instructional videos:

• What is Git? (2 minutes video Youtube)
• Git Explained in 100 Seconds (Youtube)

Usage

1. The Main branch can not be changed! You can't push to Main.
2. Before starting work, always pull from main branch and make sure the correct theme is activated.
3. Whenever you need to make changes, you need to be on a feature branch. If you don't have a feature branch for your upcoming change yet, create a new branch from main.
4. Name branch "feature/newComponent" if it's a new component, e.g. feature/datePicker
5. Name branch "feature/componentChange", if you're contributing changes to an existing component/tokenset, e.g. feature/buttonFixes or feature/basePaddingChanges
6. Once done, push your changes to GitLab, and fill the comment section with "feat: whatever change you did". Keep it short!
7. Create a Pull Request in GitLab and assign to a member of the MDX Team.

How should I start/design as a brand?

1. Create a new feature branch in Tokens Studio
2. If your brand is not a Migros brand, create a new theme titled "Your brand"
3. If your brand is based on the Migros brand, you can either extend or overwrite system design tokens of the Migros Brand
4. If your brand is different than the Migros brand, copy MDX components from Figma into your own Brand Figma design system. Detach the components, create your own Figma component and apply your design tokens there.
5. Use instances of these components for designs
6. Use system design tokens for all other design decisions (e.g. background colors)