For Designers

Get started

• Figma account.: In order to work with MDX, you will need a Figma account. If you haven't gotten access yet, create a tickt here or write us on Teams.
• MDX design tokens: If you want to work with MDX design tokens, get a license and install Tokens Studio plugin or if you seek a deeper understanding of design tokens, we invite you to read our article on the subject.
• MDX components (Migros styled): If you want to use MDX components in Figma as an orange "M" Migros brand, add this library: MDX Main Components
• MDX components (for any other brand): If you want to use MDX components in Figma as a Migros divergent brand, copy the components from MDX Main Components, detach instances and create your own components. Afterwards style the components with Token Studio and your own branded design tokens.
• Styles in Figma (Migros styled): If you want to use styles in Figma (typography, colors & shadows) for the orange "M" brand Migros, you can add this library: MDX Migros Styles
• MDX assets (icons & logos): If you want to use MDX icons or MDX logos in Figma, add this library: MDX Main Foundation

Note: While MDX has already implemented the groundwork for Figma variables, we are currently not offering them for company-wide use. We'll be introducing variables support by 2024.

MDX Figma libraries and Token Studio setup

What are snowflake components? These are unique, single-use components required for building a product, with no intended reuse beyond their specific product context and no incorporation into the multibrand design system MDX.

→ open this image in Figma to see all details

New to Design Systems and Tokens

If you're new to design tokens or seeking a comprehensive overview of what a design system entails, how it operates within Figma, and how it can enhance your design process for improved efficiency, we recommend exploring the following resources:

• MDX Design Token explained simply (written by MDX team)
• Tokens Studio for Figma Quickstart (Youtube)
• Tokens Studio Documentation
• Introduction to Design Systems by Figma (Youtube)
• Into Design Systems (Design System online conference)

Files