Figtree and figma-extractor Skip Dev Mode. They Still Need Figma
By The WAALEE Team · · 4 min read
Getting tokens out of Figma has had two annoying tolls on it for years: install a plugin inside the Figma UI and hope it's still maintained, or pay for a Dev Mode seat just to see the CSS a component already renders with. Two small CLIs that landed recently skip both. Point either one at a file with nothing but a personal access token, and you get colors, type and effects back as code. Worth knowing what they actually fix, and what they don't.
What the toll actually is
Figma's Dev Mode is bundled into paid seats, and a lot of smaller teams simply don't have one assigned to whoever needs to pull tokens that week. Plugins solve that, but they live inside Figma's desktop or web client, so using one means opening the file, running the plugin by hand, and trusting whichever third party built it is still getting updates. Neither path works from a terminal or a CI script, which is exactly where an AI coding agent's workflow usually lives.
Figtree: a personal token in, five formats out
Figtree runs against the Figma REST API with just a personal access token, no Dev Mode seat and no plugin install, and its own listing says it works on Figma's free tier. It reads solid colors, gradients and images, full text styles down to weight and size, and effects like shadows and blurs, then exports the result as CSS, Tailwind config, SwiftUI, Android XML or plain JSON. There's an optional AI step for generating code from the extracted styles, but the extraction itself doesn't need it, it's reading what's already published in the file.
figma-extractor: smaller, rougher, open source
figma-extractor is a leaner Go CLI doing the same job from the other direction. It pulls colors, typography, spacing and shadows out of a Figma file and writes them to markdown with CSS variables, built specifically so an AI coding agent has something clean to read before it starts implementing. It's a small project, a handful of stars, last pushed earlier this year, so it's worth a quick look at the commit history before you build a pipeline around it. But the core idea is the same as Figtree's: hit the API directly, skip the UI entirely.
- Both tools remove the same two tolls: no Dev Mode seat required, no plugin to install and keep updated inside Figma itself.
- Both run from a script or CI job, not a click inside the Figma client, which is the shape an AI coding agent's tooling actually wants.
- Figtree covers more ground (five export formats, gradients and images, optional AI code-gen); figma-extractor is narrower but fully open source.
- Neither one touches Figma's Variables API, which Figma still gates behind Enterprise plans, so if your tokens live as variables rather than published styles, you're back to a workaround either way.
The part neither tool can fix
Here's the catch that has nothing to do with Dev Mode or plugins. Both CLIs read whatever Figma file you point them at, and a clean export of a stale file is still a stale export. A lot of teams have exactly that: a Figma file from the last redesign, never updated when a developer shipped a dozen small CSS tweaks straight to production afterward. Figtree and figma-extractor will happily hand you that file's tokens with zero friction, formatted perfectly, and still wrong, because the file isn't the thing your customers are actually looking at.
That's not a knock on either tool. Removing the Dev Mode toll and the plugin dependency is a real improvement for anyone whose Figma file genuinely is current. It just means the question to ask before running either CLI is one step earlier than "which format do I need": is this Figma file still the truth, or did the live site move on without it.
Three ways to get Figma-shaped tokens in front of an AI coding tool right now:
- Figtree: CLI against the Figma REST API with a personal token. No Dev Mode, no plugin, free tier works. Exports CSS, Tailwind, SwiftUI, Android XML or JSON, with optional AI code-gen.
- figma-extractor: Open source Go CLI. Pulls colors, type, spacing and shadows into markdown with CSS variables, built for AI-assisted implementation. Small project, worth checking activity first.
- WAALEE: Paste your live URL instead of a Figma file. Reads your real, deployed site and returns W3C tokens and AI-ready prompts for Claude, Lovable, v0, Cursor and Bolt, no Figma file to keep current in the first place.
Pick the source before you pick the CLI
If your Figma file and your production site are still in sync, either of these tools is a straightforward win over the old plugin-or-Dev-Mode choice. If they've drifted apart, and for most teams that have shipped a few fast iterations since the last redesign, they probably have, the cleanest export in the world is still exporting the wrong brand. The deployed CSS your customers are looking at right now can't drift from itself. That's the file worth extracting from first.