Variables

Variables hold every design decision in the system. Change one, and everything that uses it updates.

Recursica used to manage its variables in Figma, and it didn’t work well. Figma’s variable editor gets slow and error-prone at design-system scale, values drifted between files, and every change needed someone with edit access to the right library. That’s why we built Theme Forge. Variables are now created, checked, and versioned in Forge, and everything else, Figma included, reads them from there.

Global and component variables

There are two kinds of variable. The kind of variable determines how much of the system a change affects.

Global variables are decisions for the whole system: color palettes, the type scale, spacing, corner radius, elevation, and the surface, border, and text colors for each layer. They live in the tokens and brand files. Changing one changes everything that uses it.

Component variables belong to a single component: a button’s corner radius at each size, a checkbox’s border in each state, a modal’s padding. They live in the UI kit file, one entry per variant, size, and state. Changing a component variable affects only that component. The component still matches the rest of the system, because its value comes from a global variable, such as the large corner radius.

As a rule of thumb, change a global variable when the decision is about the whole system, and a component variable only when it really is about that one component. Using component variables to patch a system-wide problem is how design systems drift apart.

The chain of references

Variables point at other variables instead of holding values directly:

component variable  →  global variable  →  primitive

ui-kit/components/button/…/border-radius
  → {brand.dimensions.border-radii.xl}
    → {tokens.sizes.3x}
      → 28px

Only the primitive at the end of the chain of token files holds an actual value. That’s why a re-theme needs no component changes, and why a wrong value always traces back to one place.

Managing variables in Theme Forge

Theme Forge is the source of truth for every token: color palettes, type scales, dimensions, corner radius, elevation, and component properties.

Forge uses the W3C Design Tokens Community Group format, so what it exports is a standard file other tools can read, not something only Recursica understands:

• DTCG JSON for tooling, pipelines, and importing back in.
• CSS custom properties to use directly in an application.

Forge checks each change as it’s made, including text contrast against WCAG AA, so a failing color combination is caught during design rather than in review.

Getting variables into Figma

Because the export is standard DTCG, it comes into Figma as native Figma variables. The kit ships with those variables already connected to every component, and global settings can still be changed from inside Figma.

Changes flow one way: from Forge into Figma, never back. Figma reads from the system, the same way the code adapters do, which is why a mockup and the built screen show the same values.

Switching icon styles

To switch every icon in a Figma file between outline and solid:

1. Open the Local variables panel in the Figma UI kit file.
2. Find the variable named global-icon.
3. Change its value from outline to solid. Every component in the file updates.

Customizing form components

Form settings are grouped in the global-form collection. For example, to change the corner radius of every input in a file:

1. Open the Variables panel and go to global/form/field/size/border-radius.
2. Set it to a different dimension.
3. Every input, select, and textarea updates.

Keeping Figma in sync

Changes made in Figma are previews. When a change should stick, make it in Theme Forge, export, and import again, so design and code read the same values. A change that only exists in a Figma file will be lost at the next export.