Back to skills
SkillHub ClubDesign ProductFull StackData / AIDesigner

figma-variables-generator

Generate JSON files for creating Figma variable collections from text descriptions or design token data. Use when designers need to create or convert design tokens (colors, spacing, typography, etc.) into Figma variables format. Supports multiple modes (Light/Dark), code syntax definitions, variable references/aliases, and hierarchical organization. Triggers include requests to "create Figma variables", "generate variables JSON", "convert design tokens", or working with design system tokens.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars
15
Hot score
86
Updated
March 20, 2026
Overall rating
C2.7
Composite score
2.7
Best-practice grade
B78.7

Install command

npx @skill-hub/cli install cris-achiardi-claude-skills-figma-variables-generator

Repository

cris-achiardi/claude-skills

Skill path: skills/figma-variables-generator

Generate JSON files for creating Figma variable collections from text descriptions or design token data. Use when designers need to create or convert design tokens (colors, spacing, typography, etc.) into Figma variables format. Supports multiple modes (Light/Dark), code syntax definitions, variable references/aliases, and hierarchical organization. Triggers include requests to "create Figma variables", "generate variables JSON", "convert design tokens", or working with design system tokens.

Open repository

Best for

Primary workflow: Design Product.

Technical facets: Full Stack, Data / AI, Designer.

Target audience: Development teams looking for install-ready agent workflows..

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: cris-achiardi.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

  • Install figma-variables-generator into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
  • Review https://github.com/cris-achiardi/claude-skills before adding figma-variables-generator to shared team environments
  • Use figma-variables-generator for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

figma-variables-generator | SkillHub