At Fueled, we aim to close the gap between tools designers love and platforms developers trust, while automating repetitive busy work. That philosophy inspired the creation of the Figma to WordPress Automation: a new open source plugin for Figma that streamlines a tedious, time-consuming step that’s a part of every modern WordPress project.
This tool exports design tokens from Figma directly into a WordPress theme.json file, which defines a theme’s global design system—like colors, typography, and spacing—so styles are consistent and selectable in the content editor. This automation transforms what was once a tedious 10–15 hour task into a process that takes about an hour.
Automating the Tedious Work
Project delivery often starts in Figma, where designers define foundational design tokens as a foundational part of their creative direction: color palettes, spacing scales, typography rules. WordPress, through its theme.json global styles system, supports those same design primitives. But translating those decisions from Figma into WordPress has historically meant a lot of manual copying, pasting, and double-checking.
The Figma to WordPress Automation streamlines that translation. It reads variables directly from Figma and generates a complete, ready-to-use theme.json file (or appends styles to an existing one). That includes:
- Colors
- Spacing
- Font sizes and text styles
- Optional fluid typography and mode-based variations (e.g., light/dark or desktop/mobile), based on naming conventions
The Figma to WordPress Automation tool will work with any Figma file containing clearly named variable collections. The plugin works with any modern WordPress theme that uses theme.json and requires no special frameworks or add-ons.
It also integrates with our own in-house block theme and framework, which extends WordPress’s core design system to support features like fluid design tokens, which dynamically scale and adapt spacing and typography based on factors like screen size. While these added integrations unlock even more velocity and power for our team and clients, the exporter works with and accelerates any modern WordPress theme build.
Built Fast. Built for Impact.
This exporter was a long-standing internal wish list item: a tool we always meant to build, but never quite found the time for. Recent advances in AI-assisted development changed that. Using Cursor, I was able to go from concept to functional prototype in a few hours.
If we went deep under the hood, is the code base perfectly refined and optimized? Maybe not; but as a low-risk developer utility that runs once during project setup, it’s a great example of where an embrace of “vibe” style coding can pay dividends.
One of the first projects to benefit from this tool was the new Fueled.com. The exporter helped us bridge design and implementation – and get into in-browser iteration – more quickly. Since then, we’ve introduced and deployed the Figma plugin across engineering.
Because the exporter doesn’t require developers to manually inspect individual elements in Figma, it also mitigates the need for paid Dev Mode licenses, traditionally required to manually migrate all of these properties. That can add up to real savings, especially for larger engineering teams.
Open Source and Ready to Use
The Figma to WordPress Exporter is available now on GitHub. The repository includes detailed documentation and a sample Figma file to help you get started.
We’re also working to make it even easier to get started by publishing it in the official Figma Plugin Directory.
Our first beta release isn’t a final product with every possible edge case handled. It’s not meant to be. It’s a practical, time-saving tool, and we’ll keep making it better.
What’s Next
Today, the exporter focuses on translating foundational design tokens (color, typography, spacing) from Figma into WordPress.
Looking ahead, we see opportunities to expand into more advanced, responsive design tokens—like custom border-radius presets that adapt to screen size—or even support for component-level export that maps entire design elements to Gutenberg blocks. That’s a more ambitious goal, and we’re still exploring its feasibility, but it’s a direction we’re excited to pursue.
Fueled believes in building tools that scale our craft and accelerate repetitive work, so that we can focus client budgets on creativity, innovation, and truly unique requirements. The Figma to WordPress Automation is one more small step in that direction.
Want to build smart automations and AI-powered tools for your business, or work with us to drive your own website strategies? We’d love to hear from you.
