Organize Figma colors into reusable light and dark themes with Codex
Codex + Figma
A palette tells you which colors you have. It doesn’t tell you which one to use for a button, a background, or an error message. I gave Codex a copy of our Figma palette and asked it to organize the colors around those jobs.
These are called semantic tokens: a name describes what a color does, so the same background can use a light color in light mode and a dark one in dark mode. Through the Figma connector, Codex linked those names to our existing brand colors, set up both modes, and rebuilt the swatch sheet.
It created 99 tokens and connected the swatches to them. I could review how the colors should be used instead of manually creating and binding every variable.
Work in this copied Figma palette. Inspect its existing primitive and semantic color variables before making changes.
Organize colors by their jobs: backgrounds, text, borders and focus, actions, feedback, indicators, data visualization, and workflow states. Include a five-step good-to-bad scale and matching subtle backgrounds.
Reuse the existing brand colors through variable aliases. Support light and dark modes, and reuse existing semantic variables where they already fit.
Update the copied swatch sheet so the visible examples are bound to their semantic variables. Read back the result and verify the number of tokens, light/dark aliases, unbound swatches, remaining primitive labels, and clipped or overflowing content.
Report what changed and any unresolved naming or accessibility questions.