Figma Tokenize — Variables & Text Styles from a Frame

Frames generated by Figma's Design Agent, captured from code, or built by hand look finished but carry no tokens. Every fill is a raw hex value, every font size is a bare number, every gap is a stray pixel value, and no text uses a Text Style. Nothing tells a developer or a code agent which values are the same token and which just happen to match. This skill reads one frame, proposes the tokens, and binds them after you approve, while the page keeps looking the way it did.

What it does

• Groups every solid fill and stroke by color and opacity, proposes names such as brand/accent, neutral/100, and brand/accent-a15, and binds them to a Color variable collection with explicit scopes
• Collects every font size into a Typography collection (text/12, text/16, text/50) as number variables
• Binds real auto-layout gap and padding values to a Spacing collection, and lists a suggested scale for the parts that are not auto layout
• Creates a Text Style for each unique combination of font, weight, size, line height, and letter spacing, binds its font size to the Typography variable, and applies it to the matching text, so the chain is variable, then style, then text
• Shows a confirmation table before each pass, so you approve the names and values first
• Verifies every binding after writing and compares the result with the original frame

How it works

1. Give it a Figma frame or section URL
2. It checks the frame and any variables the file already has, and recommends a backup before the first write
3. It can hand layer naming to the figma-layer-rename skill if you have it installed and say yes
4. It runs four passes in order: color, font size, spacing, and Text Styles. Each one shows a candidate table and waits for you.
5. It verifies the bindings and finishes with a summary table

What it is not

It does not restructure layout, convert absolute positioning to auto layout, or change how any node looks. Every step either renames a layer or replaces a raw value with a variable that resolves to the same value. It does not accept component or component-set URLs. If a frame has no auto layout, spacing is reported as a suggested scale instead of being bound. Run a tidy-up step first if you want it applied.

Requirements

Runs inside an agent connected to the official Figma MCP server, the same connection used for implementing Figma designs as code. Needs edit access to the Figma file, because it writes variables and styles into it. No local file access and no arbitrary network calls.

Try it free first

Try it Free on Agensi runs on Agensi's servers, which have no connection to your Figma file. Use the example session above to see the flow and the kind of report you get; the installed skill works on your real file through your own Figma MCP connection.

Works well with

Run it after a tidy-up step, so the frame already has auto layout and clear layer names. Its output is a good starting point for making components.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills