mcpField
F
figma-variables-tokens-generator

figma-variables-tokens-generator

github.com/podoDesign & UI29161 installsUpdated 1d ago
Repository

About figma-variables-tokens-generator

figma-variables-tokens-generator is a skill for creating design-token ZIP archives from a structured questionnaire. It organizes DTCG-compliant JSON into primitive, semantic, and component tiers, with a companion plugin to import the files into Figma Variables.

Key features

  1. 01Questionnaire-led token generation
  2. 02DTCG-compliant JSON files
  3. 03Primitive, semantic, and component tiers
  4. 04ZIP archive output
  5. 05Companion Figma import plugin

Use cases

  1. 01Creating a token set for a design system
  2. 02Organizing tokens into tiered collections
  3. 03Importing generated JSON into Figma Variables

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill figma-variables-tokens-generator

After installing, type/figma-variables-tokens-generatorin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

figma-variables-tokens-generator

Catalogue stub — full package: Shanmus4/figma-variables-tokens-generator

Decision tree

  1. Is the skill already installed? Check ~/.design-agent-skills/skills/ for figma-variables-tokens-generator or related directories.

    • Yes → invoke and proceed
    • No → go to step 2

  2. Shell access? Yes → install below. No → show user the command (Claude Code: send with ! as a chat message — add -g for global or omit for project-only).

Install command

npx skills add Shanmus4/figma-variables-tokens-generator

Invoke after install

  • Skill name: figma-variables-tokens-generator
  • Triggers: "Figma variables", "token generator", "W3C token ZIP", "Shanmus4"

What it does

Runs a structured questionnaire to understand your design system needs, then generates a W3C Design Token Community Group (DTCG) compliant ZIP archive. The ZIP contains JSON token files organized into collection tiers: Primitives (raw values), Semantic (contextual aliases), and Component (component-specific tokens). Also provides a companion Figma plugin that imports these JSON files into Figma Variables, respecting dependency order across tiers.

When NOT to use

  • Code-side token management and pipelines — use design-tokens-skill
  • Existing design systems not based in Figma
  • Figma design operations unrelated to tokens — use the Figma MCP (figma-official-skills)

Comments

Markdown supported