Figma to Theme.json

A WordPress plugin that fetches design variables from Figma and converts them to WordPress theme.json compatible format.

Features

• 🎨 Fetch design variables directly from Figma files
• 🔄 Automatic conversion to theme.json custom settings format
• 📋 Copy to clipboard functionality
• 💾 Download as JSON file
• 🎯 Support for colors, spacing, typography, and more
• 🔗 Handles variable aliases/references

Installation

1. Upload the figma-to-theme-json folder to /wp-content/plugins/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Navigate to 'Figma Variables' in the WordPress admin menu

Configuration

1. Get Your Figma Access Token

1. Go to Figma Account Settings
2. Scroll to "Personal access tokens"
3. Click "Generate new token"
4. Give it a name and copy the token (starts with figd_)

2. Get Your Figma File Key

Your Figma file key is in the URL:

https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]

For example, if your URL is:

https://www.figma.com/design/abc123def456/My-Design-System

Your file key is: abc123def456

3. Configure the Plugin

1. Go to Figma Variables in your WordPress admin
2. Enter your Figma Access Token
3. Enter your Figma File Key
4. Click Save Settings

Usage

Fetch Variables

1. Click Fetch Variables from Figma
2. Wait for the plugin to retrieve and transform your variables
3. View the results in the theme.json Format tab

Export Options

• Copy to Clipboard: Click to copy the JSON to your clipboard
• Download JSON: Download the formatted JSON as a file

Add to Your Theme

1. Copy the JSON output from the plugin
2. Open your theme's theme.json file
3. Add or merge the custom settings:

{
  "version": 2,
  "settings": {
    "custom": {
      // Paste your Figma variables here
    }
  }
}

Use Variables in Your Theme

Variables are accessible as CSS custom properties:

Figma Variable: color/primary/500
CSS Variable: var(--wp--custom--color--primary--500)

Example:

.my-element {
  background-color: var(--wp--custom--color--primary--500);
  padding: var(--wp--custom--spacing--medium);
}

Variable Naming Conventions

The plugin converts Figma variable names to kebab-case and creates nested structures:

Figma Variable Name	theme.json Path	CSS Variable
color/primary	color.primary	--wp--custom--color--primary
spacing/small	spacing.small	--wp--custom--spacing--small
typography/body-line-height	typography.body-line-height	--wp--custom--typography--body-line-height

Supported Variable Types

• COLOR: Converted to hex or rgba format
• FLOAT: Converted to pixel values (for spacing) or decimals (for line-height, opacity)
• STRING: Preserved as-is
• BOOLEAN: Converted to true/false
• VARIABLE_ALIAS: Automatically resolved to the referenced value

Requirements

• WordPress 5.8 or higher (for theme.json support)
• PHP 7.4 or higher
• Active internet connection to fetch from Figma API

Troubleshooting

"Figma API Error: Invalid token"

• Verify your access token is correct
• Make sure the token hasn't expired
• Generate a new token if needed

"Figma API Error: File not found"

• Check that your file key is correct
• Ensure you have access to the Figma file
• Verify the file contains variables

No Variables Showing

• Make sure your Figma file has variables defined
• Check that variables are published in Figma
• Try refreshing the page and fetching again

Development

File Structure

figma-to-theme-json/
├── assets/
│   ├── css/
│   │   └── admin.css
│   └── js/
│       └── admin.js
├── includes/
│   ├── class-figma-api.php
│   └── class-theme-json-transformer.php
├── templates/
│   └── admin-page.php
├── figma-to-theme-json.php
└── README.md

Changelog

1.0.0

• Initial release
• Fetch variables from Figma API
• Convert to theme.json format
• Copy and download functionality
• Support for all variable types

License

GPL v2 or later

Support

For issues, questions, or contributions, please visit the plugin repository.