Question about token resolution in variable-based Figma components

Hi Figma Team,

we are currently reviewing our Design System and evaluating whether we should move towards a more variable-based approach for building our components in Figma.

Our Design System uses design tokens, and we would like to control properties such as Tone, Emphasis, or Theme through Variables, Modes, and alias structures. During this evaluation, we came across a question regarding developer handoff and the visibility of the actual design tokens being used.

General problem

With a variable-based component setup, a visual property in Figma can be resolved through several Variables, Modes, and alias steps.

As a result, a property such as a background color is not necessarily linked directly to one fixed design token. Instead, the final value depends on the context and the active Modes.

In Dev Mode, Figma can show the bound variable as well as the final resolved color value. However, it is not always immediately clear to developers which specific design token within the alias chain is behind that value.

This is important for us because our technical implementation also uses design tokens rather than raw values such as HEX codes.

Example

For example, a button background could be bound to the following variable:

ui/bg

The actual value could depend on Modes such as:

• emphasis = filled

• tone = neutral

• theme = light

The resolution could look like this:

ui/bg → tone/strong → neutral/700 → #334155

In Dev Mode, the developer may see the variable ui/bg and the final value #334155.

For implementation, however, it would be especially useful to understand that the underlying design token in this case is neutral/700, or which corresponding token from the technical Design System should be used.

Our questions

Is there a way in Figma or Dev Mode to:

1. show the resolved design token, rather than only the top-level variable and the final color value?

2. structure variable-based components in a way that allows developers to clearly understand which design tokens should be used during implementation?

3. or is there a recommended Figma pattern or best practice for this type of setup?

Our goal is to benefit from a variable-based component model without losing transparency and traceability of the design tokens for developers.

Thank you very much for your support.

Best regards,
Katja Gutjahr