Keep Figma variables and your design system in sync
For designers and builders who keep their look in Figma and in code: reads a Figma file's variables (colors, sizes, corners, fonts) and updates your design system's tokens to match, or pushes your tokens back to Figma, showing every change and asking first. Works with SlashClone design system kits in design/<name>/.
SkillDesign and UIVersion: A saved state of a kit. When the author changes it, they share a new version with a higher number, and the old one stays exactly as it was. 0.1.0 (latest)WebTailwind
- Activity
- New: be the first to try it
Will this work for me?
- Effort
- Needs about 10 minutes of setupOur guess from what the kit says it needs.
- Works in
- Claude Code, claude.ai and the desktop app
- You need
Figma account: setup steps
- What it is
- This kit works with your own Figma account.
- Where to get it
- Sign in to Figma, or make a free account if it offers one. Go to Figma
- Connect it
- Add the Figma connector to Claude: in claude.ai or the desktop app, Settings, then Connectors. In Claude Code, add its tool server.
Safety label
How this works
- It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
- While it works, it reads and changes files in the places it lists, nowhere else.
- It needs these tools connected to Claude first: figma.
- Nothing runs until you choose to use it, and you can remove it any time.
What it can access
What this kit says it will touch, the same list you see before you add it. These are its Permissions: What a kit is allowed to touch on your computer or accounts, such as reading a folder or using the internet. You see them before you add it.. In Claude Code they become rules, so Claude stops anything not on the list.
MCP tool
Uses the figma MCP server
Reads
Reads files in ./design/**