Claude Code skills that write real variables and text styles into your Figma file. Free and open source.
11 variables written to Brand/Purple
Download the project once. The Guide shows how.
Like Purple:#5C3FC4 or Spacing. That is the whole request.
Real variables and text styles land in your open file.
Every one of them, interactive. Try them below.
figma-color-scale
Give it a name and a hex. You get a full 950-to-50 scale in Brand, the same numbers you would get from the opacity trick by hand, minus the afternoon.
Purple:#5C3FC4
Live demo. The same math the skill uses.
Purple:#5C3FC4
figma-alias-bridge
Primary, Neutral, Error and friends are links into Brand, not copies. Swap the brand color later and every role updates with it.
Brand/Purple -> Alias/Primary (Purple)
Scripted preview.
Brand/Purple -> Alias/Primary (Purple)
Each Alias variable is a reference, never a copied hex. Change the brand color and every role follows.
figma-mapped-roles
Surface, Border, Text and Icon variables, each pointing at an Alias step. Dark mode mirrors Light, with exceptions where mirroring would fail contrast.
Mapped dark
Values from the skill preset, with Purple as Primary and Gray as Neutral.
Body text uses Text/body. The link uses Text/action.
Get startedSelected| Variable | Light | Dark |
|---|---|---|
| Surface/page | Neutral/50 | Neutral/950 |
| Surface/default | White | Neutral/900 |
| Surface/action | Primary/500 | Primary/500 |
| Surface/action-secondary | Primary/50 | Primary/800 |
| Text/heading | Neutral/900 | Neutral/100 |
| Text/body | Neutral/700 | Neutral/300 |
| Text/action | Primary/500 | Primary/200 |
| Text/on-action | White | White |
| Border/secondary | Neutral/200 | Neutral/700 |
figma-spacing
A fixed scale in 4px units. Spacing/4 is 16px, every time, in every file.
Spacing
Default scale, subset shown.
figma-type-scale
Font variables, a size scale with a Desktop and a Mobile mode, and text styles bound to both. One command, no spreadsheet.
Typography
Default settings: base 16, ratio 1.25 Desktop and 1.2 Mobile.
figma-radius · figma-border-width
Border radius from square to a full pill, and four border weights, all in 4px units. Pick one of each and watch the same card, button and avatar follow.
Border radius
Interactive. The values are the two skills’ fixed scales.
Border radius
Border width
Border radius/2 = 8px
Border width/0-5 = 2px
The card is capped at 28px so full stays readable.
figma-motion
Durations from 250ms to 2500ms and four easing curves, stored as Figma’s own timing and easing variables.
Motion
Interactive. The durations and curves are the skill’s presets.
Motion/Duration/Default = 1000ms
Motion/Easing/Standard = cubic-bezier(0.2, 0, 0, 1)
figma-contrast-fix
Finds Mapped pairs below WCAG AA and previews a passing step from the same role. Nothing changes until you ask to apply.
Contrast fix
Live demo of the rule, for one pair.
Simplified to one pair. The skill checks every Mapped pair, on every surface it sits on. Preview changes nothing; Apply is a separate request.
figma-export-tokens
CSS custom properties, W3C design tokens JSON and a Tailwind v4 theme, with references kept as references.
Export tokens
A trimmed sample of the skill’s real output.
Export tokens
:root { /* Brand */ --brand-plum-500: #3b1a53; --brand-spacing-4: 16px; --brand-motion-duration-default: 1000ms; /* Alias */ --alias-primary-500: var(--brand-plum-500); /* Mapped */ --mapped-surface-page: var(--alias-primary-500);}/* Dark mode: set data-theme="dark" on a parent, or follow the system setting. */:root[data-theme="dark"] { --mapped-surface-page: #0b0b0d;}
{ "alias": { "primary": { "500": { "$type": "color", "$value": "{brand.plum.500}" } } }}
@theme inline { /* Alias colors */ --color-primary-500: var(--alias-primary-500); /* Mapped colors */ --color-surface-page: var(--mapped-surface-page); /* spacing */ --spacing-4: var(--brand-spacing-4);}
A trimmed sample of the skill's real output. References stay references, and the files are generated, so rebuild instead of editing.
figma-starter
Give it one to four brand colors and a font pair. It runs every skill above in order, and a dry run shows the plan first.
/figma-starter Plum:#3B1A53 ...
Scripted preview of the run order.
/figma-starter Plum:#3B1A53 Periwinkle:#8E7FAE heading "Moneta Sans" body Lato
Runs the other skills in order. Steps that already exist are skipped.
figma-token-docs
One frame per section, generated from your live variables. Rerun it after a change and the page refreshes.
Design Tokens
A real screenshot of the Contents frame.
A whole system in minutes, not days.
The same names in every file you start.
Brand, Alias and Mapped keep changes in one place.
You type short lines. Claude does the scripting.
MIT licensed. Use it, change it, share it.
Who it is for
Designers who want design tokens fast, so they can move on to components and patterns.
The variables are written to Figma for you. You never write code.
Download the skills once and use them. No repositories or commands to learn.
A Claude Code account and Figma are all it takes to run the skills.
Yes. The skills run inside Claude Code and write to your Figma file through the Figma Console MCP.
No account needed. You download the project once, and the Guide walks you through it in plain steps.
It writes to the Brand, Alias, Mapped and Responsive collections. A variable with the same name has its value updated in place, and hand-tuned Mapped values are kept unless you ask for a reset. Add dry run to any line to see what would happen first.
Yes. It is open source under the MIT license, including for commercial work.