Designer

Quickstart your project using our Figma libraries.

MDS Core

MDS Core is a foundational library for theming. It primarily consists of variable data, but also styles. This library itself does not have any UI components. This library is designed to be used as a foundation for multi-brand design system.

To provide a flexible and scalable system, variables are organized into separate collections based on their purpose. For example:

  • Color collection: Contains all the color palettes as primitive variables, such as gray-2, gray-alpha-8 or blue-9.
  • Sizing collection: Semantic variables created for different usages related to dimensions, such as radius-500, width-200 or font-size-lg.

Variable modes allow a single variable to have different values depending on the context. For example light and dark modes are from Color collection.

Variables in Figma are representation of design tokens intended for developer consumption. This setup supports automated workflows, ensuring that changes made to the variable in Figma are directly reflected in the code.

MDS Components

Each component is published as a separate Figma library. This allows you to enable only the components you need for a specific project. Some components also include their own local variables or styles.

Component visuals are connected to the MDS Core library. To configure a component, use its component properties in the right sidebar or apply variable modes that are assigned to that component. Avoid detaching instances or overriding layer properties directly to maintain the connection to the main component.

Some components, like MDS Segmented control, are constructed from base components (e.g., .MDS Segment). These base components are used to build more complex components and improve prototyping capabilities, like interactive states. They are not intended for direct use and are hidden from the team library by prefixing their names with a dot.

Add assets to your file

Enable the MDS Icons and MDS Symbols libraries in your design file from the Assets panel. Like components, these assets are published as libraries and can be added to any file in your workspace.