More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsFigma Tokenize — Variables & Text Styles from a Frame
Turns the hardcoded colors, font sizes, spacing, and text settings in a Figma frame into bound Color, Typography, and Spacing variables plus Text Styles, without changing how the frame looks.
$9
Figma Tokenize — Variables & Text Styles from a Frame
Example session with this skill installed
/figma-tokenize https://www.figma.com/design/<fileKey>/figma-tokenize?node-id=2-2
- Read your context and instructions
- Compiled the figma tokenize
The frame is a villa-rental landing page (1440 x 3365, 113 nodes). Before the run it had no variables and no Text Styles. The agent first asked whether to also rename layers (answer: no, they were already named), then ran four passes, each with a confirmation table.
Color: 10 tokens, 53 bindings
| Token | Value | Bound to |
|---|---|---|
| brand/accent | #123F3B | 17 |
| base/white | #FFFFFF | 15 |
| brand/accent-a72 | #123F3B at 72% | 6 |
| brand/accent-2 | #A86345 | 4 |
| brand/accent-3 | #8A3F2B | 3 |
| neutral/100 | #F5F1E8 | 3 |
| brand/accent-a15 | #123F3B at 15% | 2 |
| brand/accent-a35 | #123F3B at 35% | 1 |
| brand/accent-a10 | #123F3B at 10% | 1 |
| brand/accent-4 | #DC9272 | 1 |
All 53 fills and strokes were re-read after binding: 53 bound, 0 left unbound. Opacity now lives in the variable, not on the paint.
Typography: 7 size variables
text/12, text/14, text/16, text/21, text/28, text/38, text/50. No sizes needed rounding, so nothing was merged.
Spacing: 16 variables, 69 bindings
spacing/4 through spacing/256 (4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 60, 64, 80, 120, 140, 256). Every auto-layout gap and padding value was bound and read back equal to its variable. One gap that uses space-between was left alone because its size is computed, not set.
Text Styles: 23 styles, 38 texts
The agent found 23 unique combinations of font, weight, size, line height, and letter spacing and named them by role, in five groups: Heading (Hero, H1, H2, H3, Logo), Body (Lead, Regular, Small, Caption), Nav, Button, and Label. For example, Heading/Hero is the 50 px hero title (3 texts) and Label/Eyebrow is the uppercase 14 px section eyebrow (2 texts). Each style's font size is bound to its Typography variable, so the chain is variable, then style, then text.
Verification and one fix
After applying the styles, the agent compared every node with the original frame. Ten nodes had changed width: the small uppercase labels in Cormorant Garamond and the containers around them had shrunk (one label from 139 px to 98 px wide). The cause was that the new Text Styles did not carry the original case setting (uppercase). The agent copied it onto the five affected styles and re-checked: all 113 nodes now match the original in position and size.
Summary
| Pass | Created | Applied |
|---|---|---|
| Color | 10 variables | 53 fills and strokes |
| Typography | 7 variables | via 23 Text Styles |
| Spacing | 16 variables | 69 gap and padding values |
| Text Styles | 23 styles | 38 text layers |
The page looks the same as before. The difference is in the Variables panel and the Text styles list, which a developer or a code agent can now read.
Connects securely to your tools. The creator never sees your data.
About this skill
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
- Give it a Figma frame or section URL
- It checks the frame and any variables the file already has, and recommends a backup before the first write
- It can hand layer naming to the figma-layer-rename skill if you have it installed and say yes
- It runs four passes in order: color, font size, spacing, and Text Styles. Each one shows a candidate table and waits for you.
- 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.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Works on one FRAME or SECTION at a time. Component and component-set URLs, FigJam, and Slides files are not supported. Spacing is bound only where auto layout exists; other frames get a suggested scale as a report. Gaps set to space-between are left unbound because their size is computed. Names are proposals from color and size heuristics, so review them before approving. It writes variables and styles into the file, so duplicate the file or frame first.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
- Accounts
official Figma MCP
Permissions
Allowed Hosts
This skill's only external interaction is through the Figma MCP server the user's agent already has connected: get_metadata, get_variable_defs, get_screenshot, and use_figma. The only write target is the connected Figma file, where it creates Color, Typography, and Spacing variables and Text Styles and binds them to existing values; layout, colors, fonts, and images do not change. The skill recommends a backup before the first write and shows a confirmation table before each pass. There is no local file read/write, no direct network or HTTP calls, and no terminal use. Connection steps differ by agent/client — see https://www.figma.com/mcp-catalog/ for setup guides.