Figma to Gutenberg
Convert Figma designs into editable Gutenberg blocks with UiChemy Classic Mode.
Convert your Figma design into native, editable Gutenberg blocks, not custom HTML, using UiChemy's Figma to Gutenberg plugin. You're not locked into the default block editor either: UiChemy tags to whichever popular block builder you already use.
Why Use Figma to Gutenberg
If you build with the WordPress block editor instead of a third-party page builder, Classic Mode gives you the same manual, pixel-level tagging control that Figma to Elementor gives Elementor users, without leaving the block ecosystem. You tag each layer to a specific block yourself, so the output matches your design exactly rather than an AI's best guess.
What You Get
- Native Gutenberg blocks, your Figma layers become real, editable blocks, not a flat export or locked image. See the full list of supported blocks.
- Choice of block builder, tag to Core WordPress Gutenberg blocks, Spectra, Kadence Blocks, GenerateBlocks, or Nexter Blocks, whichever you already use on your site.
- Clean Output Option, disable custom CSS entirely for a code-free block export if you want 100% native output.
How It Works
- In the UiChemy plugin, select the top-level frame of your layout.
- Choose which block builder to tag against from Select Plugin, Core, Spectra, Kadence, GenerateBlocks, or Nexter.
- Click Optimize (Beta) if your design needs it.
- Open the Block Tags tab and tag each Figma layer to its matching block. See Compatible Blocks for what's supported for your chosen builder.
- Export using Copy to Clipboard or Direct Import, the same export methods available in Figma to Elementor.
Use Cases
- You already run Spectra, Kadence, GenerateBlocks, or Nexter Blocks on your site and want your Figma design to land as native blocks in that same system.
- You want to avoid a page builder dependency entirely and stick to core WordPress blocks.
- You need manual, pixel-level tagging control rather than an AI-driven conversion, see AI Express Mode vs Classic Mode if you're not sure which fits.
Not sure whether Gutenberg or Elementor is the right fit? Both are Classic Mode paths, the choice comes down to which builder you already use, see Classic Mode Overview.
If It Doesn't Work
If your Figma elements aren't converting to the blocks you expect, check that each layer is tagged with a supported block in the Block Tags tab, and that you're using the latest version of the UiChemy Figma plugin with the correct block builder selected. See Compatible Blocks for more.