Figmable NPM | npm.io

Figmable

Figmable is a CLI tool that helps you sync color variables from your Figma design files directly to your CSS files. It extracts color variables from Figma and automatically updates your CSS files with the new color variables, making the design-to-development workflow seamless.

Quick Start

# 1. Save your configuration (one-time setup)
figmable config --fileKey YOUR_KEY --token YOUR_TOKEN --path ./src/styles/global.css

# 2. Run Figmable - That's it! 🎉
figmable

# Your CSS is now updated with Figma color variables!

Just two commands and you're done! Figmable will:

Fetch your color variables from Figma
Save them as JSON for reference
Automatically update your CSS file
Create a backup, just in case

🎨 Why Figmable?
While Figma provides a /variables API endpoint to fetch local variables, it's only available for paid plans. Figmable offers a free alternative by extracting color codes from your Figma color palette and converting them into CSS variables!

Features

🎨 Extract color variables from Figma files
🔄 Automatically sync with your CSS files
🔒 Preserve existing CSS variables
💾 Automatic backup of CSS files before updating
📦 Easy to integrate into your workflow
⚡️ Simple configuration management

Prerequisites

Figma API Token
- Go to Figma > Account Settings > Access tokens
- Create a new access token
- Copy the token for later use
Figma File Key
- Open your Figma file in browser
- Copy the key from URL: figma.com/file/YOUR_FILE_KEY/...
Figma Color Objects

Name your color objects with -- prefix (e.g., --primary-500, --orange-600)
This naming convention is required for Figmable to identify and extract color variables

Example:

--primary-500  →  #3B82F6
--orange-600   →  #EA580C
--neutral-900  →  #171717

CSS File

Must have :root selector in your CSS

Example:

/* With Tailwind */
@layer base {
  :root {
    /* Your CSS variables will be added here */
    --primary: #000000;
  }
}

/* Or without Tailwind, simple CSS is fine too */
:root {
  /* Your CSS variables will be added here */
  --primary: #000000;
}

Installation

npm install -g figmable

Usage

1. Save Configuration

First, save your Figma credentials and file paths:

figmable config \
  --fileKey YOUR_FIGMA_FILE_KEY \
  --token YOUR_FIGMA_API_TOKEN \
  --path ./path/to/your/global.css

2. View Current Configuration

Check your saved configuration:

figmable show

This will display:

Figma file key and URL
API token
File paths
Configuration file location (which you can edit directly)

3. Sync Variables

After configuration, simply run:

figmable

This will:

Fetch color variables from your Figma file
Save them to figma-variables.json
Update your CSS file
Create a backup of your CSS file (.bak)

Advanced Usage

Override configuration for a single run:

figmable \
  --fileKey DIFFERENT_KEY \
  --token DIFFERENT_TOKEN \
  --path ./different/path.css \
  --output ./different/variables.json

Disable backup file creation:

figmable --no-backup
# or
figmable -nb

Enable backup file creation (default behavior):

figmable --backup
# or just
figmable

File Structure

.figmablerc: Configuration file (automatically created in home directory)
figma-variables.json: Extracted Figma variables (created in project directory)
your-css-file.css.bak: Backup file (created alongside CSS file)