WP theme-json Converter
Convert WordPress theme.json to Figma variables/styles and vice versa. Import, export, and generate.
Plugin Preview
About this plugin
WP theme-json Converter bridges the gap between WordPress and Figma, making it easy to sync your design tokens.
Features
Import
Upload a WordPress theme.json file to automatically create Figma variables and text styles. Colors from the palette are converted to color variables, and font sizes become text styles.
Export
Generate a theme.json file from your existing Figma variables and styles. Perfect for transferring your design system to WordPress block themes.
Generate
Create a starter set of variables and styles based on theme.json schema versions:
- Version 1 (WordPress 5.8+): Basic colors and font sizes
- Version 2 (WordPress 5.9+): Colors, font sizes, and spacing
- Version 3 (WordPress 6.6+): Full-featured with accent colors, spacing, and typography
How It Works
- Colors: Stored in variable collections named "Theme Colors"
- Typography: Stored as text styles under "Typography/" folder
- Spacing: Stored in variable collections named "Theme Spacing"
Use Cases
- Design WordPress block themes in Figma with accurate design tokens
- Keep your Figma design system in sync with WordPress
- Quickly bootstrap a new theme design with default WordPress presets
Changelog
v1.1.0 (2026-02-04)
- エクスポート時に設定を追加(各オプションの出力有無と値を個別に設定可能に)
v1.0.0 (2026-01-26)
- 公開
Plugin Details
| Version | 2 |
|---|---|
| Created | January 26, 2026 |
| Last Updated | February 4, 2026 |
| Category | Software development |
| Creator | Yoshihiro Hasegawa |
| Stats | 9 installs, 7 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/src/ui/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
This plugin needs to access external resources defined in theme.json such as fonts or images.
- Editor Types:figma
- Allowed Domains:
- *
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.