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.FeaturesImportUpload 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.ExportGenerate a theme.json file from your existing Figma variables and styles. Perfect for transferring your design system to WordPress block themes.GenerateCreate a starter set of variables and styles based on theme.json schema versions:Version 1 (WordPress 5.8+): Basic colors and font sizesVersion 2 (WordPress 5.9+): Colors, font sizes, and spacingVersion 3 (WordPress 6.6+): Full-featured with accent colors, spacing, and typographyHow It WorksColors: Stored in variable collections named "Theme Colors"Typography: Stored as text styles under "Typography/" folderSpacing: Stored in variable collections named "Theme Spacing"Use CasesDesign WordPress block themes in Figma with accurate design tokensKeep your Figma design system in sync with WordPressQuickly bootstrap a new theme design with default WordPress presetsChangelogv1.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 | 12 installs, 8 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.