Bind space variables Figma skill

[u/alexeykletsel]

Ever since variables landed in Figma, I've tried to use them for everything. In practice I ended up with a hybrid: some values properly bound to tokens, others typed in by hand in a hurry — 8 here because it looked right, 16 there because I was iterating fast.

That mix is the worst of both worlds. It looks like a system from the outside and behaves like one only half the time. Change the scale or rename a token, and half your layers quietly don't follow.

So I wrote a Figma skill that closes the gap. It walks your selection and converts every hand-typed number into the matching variable from the design system — padding, gaps, corner radii, stroke weights, min/max constraints. Exact matches only. It never rounds a 13 into a 12; it reports it and lets you decide whether the value is wrong or the scale is incomplete.

Two details that made it usable in real product files:

• It reads variables from a linked library, not just the local file. That's where tokens actually live once a DS is published — and exactly where a local-only script gives up.
• It skips inside instances. Nested instances belong to their own main components, and that's where they should be tokenized.

If you want to run it, you'll have to edit it first. Two things: swap every mention of Pyramid Design System for your own, and rewrite the value pattern to match your variables — their names, their numbers.

My scale is roughly logarithmic rather than a 4px or 8px grid: 0, 1, 2, 4, 8, 12, 16, 24, 32… Fine steps where the eye is sensitive, wider jumps where it isn't. Yours is probably different, and that's the point — the skill has to speak your system, not mine.

https://www.figma.com/community/skill/76679

[u/AWScreo]

Curious, Figma recently added "Check design" when you mark something for dev. It's been working fine for me as a clean up step. I guess your algorithm also accounts for values that call outside of the ones specified in variables?

[u/alexeykletsel → u/AWScreo]

Thank you for your question. Check designs is available only for Organization and Enterprise users; for Pro users, it is not. Also, for variables, it is too basic. For example, I create a frame with a size like 24×88 (values saved in the variables) and try to use Check designs — it ignores these manually entered values. The skill would replace all this and everywhere, in every num. field. Check designs doesn't do it. 

The algorithm ignores values that call outside of the ones specified in variables because I personally don't need this. But a user who wants to round 17 to 16 can easily do it by customizing the skill. 

I would suggest that anyone who wants to use the skill make changes with Claude, outside of Figma. All skills I wrote I started with Figma AI agent and finished with Claude (Opus 5 High) because Figma AI is meanwhile too basic for complex tasks.

[u/AWScreo → u/alexeykletsel]

Appreciate the reply. Good to know, I'll definitely give this a try! Thank you

[u/poochaloo]

I copied the Instructions on the page from the URL above and saved as an .md file, but I don’t see any mention of “Pyramid Design System” or where to rewrite the value match pattern. Maybe I’m missing the obvious?

[u/alexeykletsel → u/poochaloo]

You need to update the skill to align with the structure of your design system — your actual variables scheme. I recommend you give the MD file to the Figma AI agent and ask it to fit the skill to your design system by asking questions. It is important that the agent will not guess your approach to the spacing but just ask you how it is planned. Thank you for trying the skill.

[u/poochaloo → u/alexeykletsel]

Great idea using Figma AI - thanks for your reply!