# figma → gutenberg
Figma to Gutenberg, block patterns and native FSE.
Send a Figma file. Ship native Gutenberg block patterns, an FSE theme scaffold (theme.json + block templates + template parts), core blocks styled to match Figma. No page builders. Compatible with WordPress 6.5+ and any block theme.
What you get.
- theme.json wired to Figma tokens: colour palette, typography scale, spacing scale, font families. Global styles cascade.
- Block templates (front-page, single, page, archive) and template parts (header, footer). All FSE-editable in Site Editor.
- Block patterns registered per Figma section: hero, feature grid, pricing tiers, testimonial, FAQ. Each pattern is editor-friendly.
- Core block styles: registered custom variants (is-style-* on Group, Image, Button, Code) matching Figma component variants.
- Semantic HTML5 output. No wp-block-cover on landing when a Group would do. No blockwash.
- Zero page-builder plugins. Vanilla Gutenberg + a minimal theme. Compatible with any editor plugin you already run.
Real code output.
A real example of what ships. Not a rendered marketing screenshot; the actual source in your repo.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "ink", "color": "#0E1116", "name": "Ink" },
{ "slug": "wire", "color": "#7AA7FF", "name": "Wire" }
]
},
"typography": {
"fontFamilies": [
{ "slug": "inter-tight", "fontFamily": "'Inter Tight', system-ui", "name": "Inter Tight" }
]
}
}
}Tools we use.
Builder.io Visual Copilot used for first-pass Gutenberg pattern generation where the Figma has strong auto-layout. Hand-restructured to real core blocks (no reactified Figma dumps). ACF Blocks where a native block does not fit and a plugin block is honest.
Turnaround.
| Scope | Turnaround |
|---|---|
| Single block pattern | 5d |
| FSE theme scaffold | 14d |
| Full block-based site (5 pages) | 14d |
Pricing.
Single Gutenberg pattern from $349. FSE theme + 5 patterns from $2,490. See /pricing/ for the full table.
FAQ.
Native Gutenberg only?
Yes. No page builders on the same site. If you need Elementor, see /services/figma-to-elementor/. Mixing them is not something we ship.
theme.json full support?
Yes. Full v3 theme.json including layout, spacing, typography, and blocks. Block-level styles per Figma component variant.
ACF Blocks or core?
Core first. ACF Blocks only when the design needs a custom field and a core block cannot match. We document why per block in the README.
Custom post types?
CPT registration and Site Editor templates included when the design has portfolio or blog patterns. Custom taxonomies on request.
Multisite?
Yes. The theme installs cleanly on WordPress multisite. Pressable, WordPress.com Business, WP Engine multisite verified.
Ownership?
Full theme code delivered as a Git repo. Client owns the theme. Fourteen-day fix window covers block bugs and Site Editor regressions.
Send a Figma link.
Two-line brief, one Figma URL, one email. Quote back inside 24 hours weekdays. If you have a stack constraint (React version, Tailwind config, existing design tokens), say so up front.