Core Variables

Isotop works exclusively with variables that are already created natively in Figma. The plugin does not create variables or define their initial structure. It assumes that your design system — collections, groups, and variables — is already organized in Figma.

Once this structure exists, Isotop allows you to define which variables or groups of variables should be treated as core variables — the foundational colors of your system. These settings are persistent: once a variable is marked as core, this information is saved and remains available across sessions and plugin restarts.

After core variables are defined, they can be used as a single source of truth for linking design tokens and semantic colors.

Isotop allows you to manually link individual design tokens to core variables. For example, if you have a primary color palette with multiple shades, you can link a specific design token — such as a button background — to a chosen shade from that palette.

This workflow is ideal for precise, intentional control over individual tokens. You select a color, trigger the linking action, and explicitly define its relationship to a core variable.

For existing or inherited design systems, Isotop provides a bulk linking feature called Link All. This function analyzes design tokens and automatically finds matches against defined core variables. All matching tokens are linked in a single operation.

Colors that cannot be linked are treated as unique values — meaning they do not exist among the defined core variables. This makes it easy to evaluate how consistent your system is and identify colors that fall outside your primitives.

Bulk linking and unlinking allow you to restructure, clean up, and realign your system efficiently as it evolves.

For individual colors, Isotop offers Autolink. When triggered, the plugin analyzes available core variables and suggests the most suitable candidates for linking.

If there is only one valid match, the color is linked automatically. If multiple candidates are found, the user can choose the correct one. This significantly speeds up workflows and reduces manual searching.

Isotop avoids overwhelming users with long lists of all available core variables. Instead, it uses a smart suggestion system.

When a design token is already associated with a specific palette or group of core variables, Isotop proposes only the most relevant neighboring shades when changing the link. This is especially useful when adjusting contrast or visual balance, assuming the core palette is properly defined.

Autolink is part of this system: suggestions are always contextual and based on the existing structure and relationships in your design system.

Conflicts can occur when identical or visually identical colors exist across different core palettes — for example, a white color in a Black & White palette and the same white in another palette.

Isotop detects these situations and notifies the user through a system notification. A dialog then allows you to explicitly choose which core variable should be linked to the affected design token.

This ensures clarity, prevents hidden ambiguity, and keeps control in the hands of the designer.

Isotop fully supports multi-mode design systems. In Figma’s native interface, variable values are typically shown only for the first mode, which makes working with additional modes difficult.

Isotop solves this problem. During linking, the plugin respects the active mode and displays the exact core variable values for that specific mode. This makes context explicit and eliminates confusion between themes.

As a result, working with second, third, or additional modes becomes clear, predictable, and significantly more efficient.

This section explains the fundamental reasoning behind aliases and core variables for those new to design systems or unfamiliar with this approach.

The core idea

Modern design systems are not built on isolated colors. They are built on color hierarchies.

At the foundation of this hierarchy are core variables — base palettes that act as the single source of truth for all other colors in the system.

Example structure

Imagine a project where you define several key brand colors — for example, 3 to 5 primary colors.

For each color, you create a palette of shades, typically 9 steps:

100, 200, 300 … 900.

These palettes might be named:

• Primary
• Secondary
• Tertiary
• Blue
• Green

At this stage, the actual color values may not even be finalized. What matters is the structure of the palettes, not the final hues.

Generating palettes

Once these palettes exist in Figma, you can open Isotop and use the Palette Generator to generate shades based on a chosen base color.

The generator allows you to:

• define a base color,
• fine-tune shade distribution,
• create visually balanced palettes.

(See the Palette Generator section for details.)

When the palettes are ready, you mark them as core variables.

Linking design tokens

Next, you move on to design tokens — such as:

• button backgrounds,
• hover and active states,
• input colors,
• section backgrounds,
• component states.

Instead of assigning raw colors, you link tokens to core variables.

For example:

• Button default background → Primary / 500
• Button hover background → Primary / 400

Design tokens now reference roles in the system, not specific color values.

Why this matters

Once design tokens are linked to core variables, the system becomes scalable.

If you later need to adjust a brand color or rebalance a palette, you change the core palette in one place. All linked tokens update automatically — whether that’s dozens, hundreds, or thousands of tokens — and the results are immediately visible across all designs.

Summary

Linking design tokens to core variables:

• reduces manual updates,
• enforces consistency,
• simplifies redesigns and rebrands,
• reflects how modern design systems are built.

This is not added complexity — it is the foundation of a maintainable, scalable design system.