> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/classic-mode/figma-to-elementor/export-guide) 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](/gutenberg-blocks/all-blocks/compatible-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

1. In the UiChemy plugin, select the top-level frame of your layout.
2. Choose which block builder to tag against from **Select Plugin**, Core, Spectra, Kadence, GenerateBlocks, or Nexter.
3. Click **Optimize** (Beta) if your design needs it.
4. Open the **Block Tags** tab and tag each Figma layer to its matching block. See [Compatible Blocks](/gutenberg-blocks/all-blocks/compatible-blocks) for what's supported for your chosen builder.
5. Export using **Copy Code** or **Direct Import**, the same export methods available in [Figma to Elementor](/classic-mode/figma-to-elementor/export-guide).

### 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](/introduction/ai-express-vs-classic-mode) if you're not sure which fits.

<Callout kind="tip">
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](/classic-mode/overview).
</Callout>

### How to Fix It

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](/gutenberg-blocks/all-blocks/compatible-blocks#frequently-asked-questions) for more.

### Next Steps

<Columns cols={2}>
  <Card title="Compatible Blocks" href="/gutenberg-blocks/all-blocks/compatible-blocks">
    See the full list of supported blocks per builder.
  </Card>
  <Card title="First Conversion" href="/classic-mode/getting-started/first-conversion">
    Walk through the general Classic Mode conversion flow.
  </Card>
</Columns>