skills.rest
bacchus-labs
bacchus-labsOFFICIAL
Explore all skills by this author →
GitHub

figma-variables-generator

Generate JSON files for Figma variable collections from design tokens.

4|1|Updated Oct 29, 2025
Search Tags:#automation#design system#figma#design tokens#json#variables
One-click install
npx skills add https://github.com/bacchus-labs/wrangler --skill figma-variables-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-variables-generator
Source: https://github.com/bacchus-labs/wrangler/tree/main/.wrangler/memory/knowledge-base/reference-prompts/skills/ui-related-skills/figma-variables-generator
Command: npx skills add https://github.com/bacchus-labs/wrangler --skill figma-variables-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of JSON files required for importing design tokens as variable collections into Figma, streamlining the design system workflow.

Core Features & Use Cases

  • JSON Generation: Creates structured JSON compatible with Figma's variable import plugins.
  • Mode Support: Handles multiple design modes (e.g., Light/Dark).
  • Variable Referencing: Supports aliasing variables within the collection.
  • Use Case: A designer needs to convert a set of color tokens from a text file into a Figma variable collection for a new design system. This Skill can generate the necessary JSON for easy import.

Quick Start

Use the figma-variables-generator skill to create a JSON file for a new Figma color collection named 'Brand Colors' with primary and secondary colors.

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 to a Figma variables JSON file?▼

To convert design tokens to a Figma variables JSON file, you can generate structured JSON from your text descriptions or token data, enabling direct import into Figma variable collections.

Can I create Figma variables for both Light and Dark modes?▼

Yes, you can create Figma variables for both Light and Dark modes. The generation process supports multiple design modes within a single variable collection JSON output.

Does the generated Figma variables JSON support variable aliasing?▼

Yes, the generated Figma variables JSON supports variable aliasing. It can define variable references within the collection to establish hierarchical relationships between your design tokens.

What is the best way to structure design system tokens for Figma import?▼

The best way to structure design system tokens for Figma import is to generate a hierarchically organized JSON file. This format ensures compatibility with Figma variable import plugins and maintains token relationships.

Do I need a specific Figma plugin to import the generated variables JSON?▼

Yes, you need a Figma plugin capable of variable import to use the generated JSON file. The output is structured specifically for compatibility with these plugins to create variable collections.

Related Skills

Explore More Design & Creative Skills→
cris-achiardicris-achiardi
62

figma-variables-generator

Generate Figma variable collection JSON files from design tokens.

Community
Intermediate
AradotsoAradotso
3

figma-design-md-plugin

Convert Figma design styles and variable collections into DESIGN.md and SKILL.md documentation.

Official
Intermediate
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced