figma-variables-generator

Generate Figma variable collection JSON files from design tokens.

62|8|Updated Nov 2, 2025

Search Tags:#automation #figma #json #design-system #variables #design-tokens

Ready to run

npx skills add https://github.com/cris-achiardi/claude-skills --skill figma-variables-generator-cris-achiardi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-variables-generator
Source: https://github.com/cris-achiardi/claude-skills/tree/main/skills/figma-variables-generator
Command: npx skills add https://github.com/cris-achiardi/claude-skills --skill figma-variables-generator-cris-achiardi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often need to convert design tokens (colors, spacing, typography, and aliases) into Figma variable JSON for consistent design systems, a repetitive manual task prone to errors.

Core Features & Use Cases

Generate JSON files for Figma variable collections from textual descriptions or token data.
Support multiple modes (Light/Dark), variable references, and hierarchical organization to fit complex design systems.
Use cases include token-driven UI generation, design-system documentation, and easy import into Figma via common plugins.

Quick Start

Describe your design tokens or plain text inputs and ask it to generate a Figma variables JSON ready for import.

Frequently Asked Questions about figma-variables-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert design tokens into Figma variables JSON?▼

To convert design tokens into Figma variables JSON, you generate structured JSON files mapping colors, spacing, and typography into Figma variable collections. This automates token-driven UI generation by supporting multi-mode inputs and variable references for direct plugin import.

Does the Figma variables generator support Light and Dark mode design tokens?▼

Yes, the Figma variables generator supports multi-mode inputs for Light and Dark modes. It processes textual token descriptions to output JSON that properly structures color, spacing, and typography variables across both themes for consistent design systems.

What design token types are supported when generating Figma variable JSON?▼

When generating Figma variable JSON, supported design token types are strictly limited to color, number, string, and boolean. The generator enforces these types alongside pixel-based values to ensure structural compatibility within Figma variable collections.

Can I use variable references and aliases in my Figma JSON output?▼

Yes, you can use variable references and aliases in your Figma JSON output. The generator supports hierarchical organization and token aliasing, allowing you to link design tokens together and maintain structural consistency across your design system components.

What is the best way to import generated Figma variables JSON into my design system?▼

The best way to import generated Figma variables JSON is by using common Figma plugins designed for token import. The generator outputs JSON files structured for these plugins, enabling direct mapping of your design tokens into Figma variable collections.

Why are my non-pixel design token values rejected during Figma JSON generation?▼

Non-pixel design token values are rejected because the generator enforces pixel-based values for numerical spacing and typography. This constraint ensures the generated Figma variable JSON strictly adheres to expected token formats for consistent UI generation.