What’s new with MDS 2.0?
New libraries
- We are introducing a new unified core library.
- The MDS: B2B Core Library and MDS: GX Core Library are still available, but will no longer receive updates.
Figma Variables
- Tokens are now powered by Figma variables in our new MDS Tokens 2.0.
- The old MDS: Tokens file has been officially deactivated.
Cleaner naming
- We've removed emojis from component page names.
- This improves discoverability and enables alphabetical sorting in the Assets panel.
Preparing your file for migration
Before starting, prepare your file to ensure a smooth migration.
1. Duplicate the original file
We recommend keeping a backup in case anything breaks or needs to be referenced later.
2. Change the cover
- Update the file cover to differentiate the migrated version from the original.
- You can add an indicator on the cover name, like Backup, or (Migrating).
3. Accept all libraries' updates in the duplicate
- Click the Libraries icon in the left sidebar and accept all design system-related libraries updates.
- You can click the button Update all to apply them at once.
This will rename styles and properties to match the latest versions, an essential step for better migration.
Use Figma Version History to restore your original version.
Migration steps
Part 1: Swapping components
Now that your file is ready, it’s time to start migrating to our new libraries.
1. Swap libraries
- Go to Assets → Libraries → This file
- Select MDS: B2B Core Library or MDS: GX Core Library, depending on your use
- Click Swap library on the bottom right
- In the dropdown, choose 🟣 MDS 2.0
- Confirm by clicking Swap library
This will automatically replace most components (with variables applied!).
Some components may not update if:
- They've been overridden.
- The slot content component was created in another file.
- They were deprecated from MDS.
What to do:
- Take note of anything broken or unrecognized.
- Reinsert them manually using the search bar.
- Use the original version for content reference.
2. Remove old libraries
In your Libraries panel, remove:
- MDS: B2B Core Library
- MDS: GX Core Library
- MDS: Tokens
3. Connect the new libraries
- Make sure MDS 2.0 and MDS Tokens 2.0 are connected.
- If not, find them on the Libraries list and click Add to file.
Part 2: Swapping styles
Now that the components are swapped, we need to fix anything that might have been skipped on part 1.
These may be found in:
- Styles manually applied in the file
- Slot components created outside the file
- Deprecated components
- Hidden layers
1. Text styles
- Go to Assets → Libraries → This file
- Swap MDS: Tokens with 🟣 MDS Tokens 2.0
- Confirm by clicking Swap library
Most undetected styles come from hidden layers. You can ignore those, as well as any text that is not part of your designs.
Fixing undetected styles (optional)
Some styles may need manual fixing due to overrides or missed components.
- Run the Style Finder plugin (it may take a few seconds to load).
- In the Text tab, click on a style to reveal affected layers.
- Click the target icon to select one of the layers.
- Reapply the correct style from 🟣 MDS Tokens 2.0 using the Typography section on the right sidebar.
If the text is inside a component, check that the component is coming from the correct library:
- If not, replace the component with the one from 🟣 MDS 2.0.
- If yes, go to more menu (...) on the right sidebar and choose Reset text style or Reset specific changes → Reset text style, depending on context.
Color styles
Use the Apply Variables plugin to swap color styles to variables:
- Select Swap by name
- Choose:
- Library: 🟣 MDS Tokens 2.0
- Collection: Themes
- Scan mode: Page or Selection (for better performance; ensure you have the desired content selected)
The plugin might take a few seconds to complete.
Fixing undetected colors (optional)
Some color styles may require manual adjustment:
- Select your frames and check the Selection colors panel.
- Replace skipped styles or HEX values with the correct variable.
You can recognize variables and styles by their icon shapes: variables are squares and styles are circles.
If the color is inside a component, confirm the component comes from the correct library:
- If not, replace the component with the one from 🟣 MDS 2.0.
- If yes, try using Reset fill from the Properties panel.
Working with the new libraries
Now you're all set to enjoy the new capabilities of the new libraries
Applying themes
Once your file is migrated, you can switch themes at the page level to:
- Match branding: For GX projects like Guest Portal or Kiosk.
- Test migration results: Switching to B2B Dark is a great way to spot missing or incorrect variables.
Even if you don’t need it, switching themes is a great way to validate your migration and get more familiar with how the system works.
For more details, check out Figma's official documentation.
Applying variables
You can go beyond color and text by applying other variables like spacing, border radius, and more.
- Select the element
- Click the variable icon next to the property or Apply variable if the property opens in a dropdown
- Choose a value from the 🟣 MDS Tokens 2.0 options
Most variables are scoped to their corresponding property, so Figma will show you the correct options automatically.
For more details, check out Figma's official documentation.
Troubleshooting
Known issues, limitations, and how to fix them.
Some components are not recognized or don’t update when swapping libraries to MDS 2.0.
Affected components:
- Components with overrides.
- Slot content or components created outside the file.
- Deprecated components.
How to fix it:
-
If the component wasn’t recognized but still exists
Replace it with the MDS 2.0 version. -
If the component comes from a local or external library
Move and update the component into your current file, or update and publish the original source. -
If the component is deprecated
Find its equivalent in MDS 2.0 (e.g., the new unified Text component replaces multiple deprecated versions) or detach it and manually add new variables to it.
Some colors are not updated after migrating to MDS Tokens 2.0.
Affected colors:
- Local styles or styles not linked to the design system.
- Deprecated styles.
- Hidden layers.
- Raw HEX values.
How to fix it:
- Use the Apply Variables plugin to replace color styles with matching variables.
- Use Selection colors in the right side panel to manually replace colors with variables.
Some text layers are not updated after migrating to MDS Tokens 2.0.
Affected elements:
- Local styles or styles not linked to the design system.
- Deprecated styles.
- Hidden layers.
- Text without an assigned style.
How to fix it:
- Use the Style Finder plugin to locate and select skipped text styles.
- Manually apply the new MDS 2.0 text variables using the Styles panel.
- If the text is inside a component, select the text and use Reset text style in Figma’s right side panel.
Some components are not compatible with dark mode.
Affected components:
- Categorical Tags: All colors are set with legacy tokens.
- Tables: Heatmap colors are not tokenized yet.
How to fix it:
- As these will be reviewed in the next phase of the project, all you can do now is ensure you are using the latest component version from 🟣 MDS 2.0 to get updates once they're available.
Your file still references the old MDS: Tokens library, which is now deactivated.
What happens:
- You don’t see any available styles in your file’s Styles section.
How to fix it:
Connect the 🟣 MDS Tokens 2.0 to your file.
- Go to Assets → Libraries → This file in Figma.
- Locate the 🟣 MDS Tokens 2.0 library and click Add to file.
- Styles will now be available for use.
Related links