Colors in Figma

What are Main and Support?

Main and Support are custom modes in Figma that simulate the functionality of data-color in code. These modes exist only in Figma and allow you to control which colors components use based on context.

In Figma without an enterprise license, you can use 4 colors per mode, 8 colors total, split between Main and Support.

Read more about how these are used in modes in Figma

These modes offer two key benefits:

1. You can use your own color names
   If you used raw color variables directly in components, they would break every time someone imported or replaced colors. By using Main/Support, components refer to abstract color names, and you can change the values without affecting the structure.

2. You avoid creating one variant per color
   Instead of creating separate components for blue, red, green, etc., a single component can change color depending on which mode (Main or Support) is applied. This reduces maintenance and helps keep your file organized.

Figma Dev Mode

In Figma Dev Mode, colors are shown in two ways:

• Main / Support: Used for flexible colors, similar to data-color in code. You set a mode like main/border-default, and the component inherits the correct color. This makes it easier to reuse components without creating new variants. These modes are cascading—you can apply them at the page, frame, or element level.

• Explicit color: Used when a color should always remain the same, regardless of mode. In Dev Mode, the UI will show the specific variable used—just like in code.