Turning Figma Designs Into WordPress Components Using AI

The Figma-to-WordPress pipeline used to be the slow part of every agency build: a designer hands over the Figma file, the developer manually traces the design, decides which ACF field types are needed, hand-writes the field group registration, then builds the template partials to match. Three to five days of work per project for a moderately-sized site. With AI in the loop in 2026, the same work compresses to about a day, and the quality is consistently better because the AI does not skip the boring bits. Here is the realistic workflow I use on agency builds today.

Jump to:

• What "AI in the loop" actually means here
• Step 1: prepare the Figma input
• Step 2: describe the design intent in plain language
• Step 3: ask for the ACF Flexible Content registration
• Step 4: ask for the template partials
• Step 5: iterate on the CSS
• What this workflow is bad at
• Where this fits in agency delivery

What "AI in the loop" actually means here

The AI is not "looking at Figma and producing a website." That framing oversells what current tools can do. What the AI actually does:

• Interprets a description of the design (or a screenshot, or Figma JSON exported via the API).
• Suggests an ACF Flexible Content layout structure that fits the design.
• Generates the field group registration PHP.
• Generates the template partials in your project's conventions.
• Suggests CSS or Tailwind classes based on visual hierarchy described in the prompt.

The human is doing:

• Reading the Figma file carefully and describing it accurately.
• Reviewing the AI's suggested layout structure for fit.
• Deciding which ACF field types to use where (the AI's first guess is usually right, but not always).
• Reviewing the generated code for correctness.
• Writing the final pixel-precise CSS (the AI's first pass is usually 70-80% right; you finish it).

This is augmentation, not replacement. The throughput gain comes from the AI doing the boring scaffolding so the human can focus on judgment.

Step 1: prepare the Figma input

The AI needs structured input about the design. Three approaches in increasing accuracy:

A. Written description only. You describe the design in prose: "The hero section has a heading, a sub-heading, two buttons (one primary one secondary), a background image, and a small badge image in the top-left corner." Fast to type, lossy.

B. Screenshots plus description. Take a screenshot of each Figma section, paste into the Claude chat or include the file path in a Claude Code session, describe the structure. The AI can see the visual hierarchy directly.

C. Figma JSON via the Figma API. Export the relevant frames via the Figma API (/v1/files/{file_key}/nodes). The JSON includes every layer, its dimensions, text content, color, hierarchy. The most accurate input; requires Figma API setup.

I default to (B) for most agency work. The cost is one extra screenshot capture per section; the benefit is the AI can ground its understanding in the actual visual.

Step 2: describe the design intent in plain language

The prompt template I use:

Here is a Figma screenshot of a marketing landing page hero section.
[paste/attach screenshot]

The structure I see:
- Full-bleed background image (likely user-supplied per page).
- Dark gradient overlay for text legibility.
- Heading (H1, ~48px on desktop, white text).
- Sub-heading (paragraph, ~18px, lighter weight).
- Two buttons in a row (primary + secondary).
- Small "badge" image in top-left corner (likely a brand icon).

I want this to become a Flexible Content layout called `hero` in the
existing `page_builder` ACF field. Match the convention of our other
layouts (see template-parts/flexible-content/ for examples).

Generate:
1. The ACF Flexible Content layout sub-fields registration.
2. The template-parts/flexible-content/hero.php partial.
3. A list of any sub-decisions you made and why.

The "list of any sub-decisions you made" line is important. It surfaces the choices the AI made implicitly (which ACF field type for the background image, whether the gradient is hardcoded CSS or a configurable option, whether the badge is required or optional). You review those and accept or adjust.

Step 3: ask for the ACF Flexible Content registration

What you get back is a complete layout definition, ready to paste into your acf_add_local_field_group call:

'layout_hero' => [
    'key' => 'layout_hero',
    'name' => 'hero',
    'label' => 'Hero',
    'display' => 'block',
    'sub_fields' => [
        [
            'key' => 'field_hero_heading',
            'name' => 'heading',
            'label' => 'Heading (H1)',
            'type' => 'text',
            'required' => 1,
            'maxlength' => 120,
        ],
        [
            'key' => 'field_hero_subheading',
            'name' => 'subheading',
            'label' => 'Subheading',
            'type' => 'textarea',
            'maxlength' => 300,
            'rows' => 3,
        ],
        [
            'key' => 'field_hero_background_image',
            'name' => 'background_image',
            'label' => 'Background image',
            'type' => 'image',
            'return_format' => 'id',
            'preview_size' => 'large',
        ],
        [
            'key' => 'field_hero_badge_image',
            'name' => 'badge_image',
            'label' => 'Badge image (optional)',
            'type' => 'image',
            'return_format' => 'id',
        ],
        [
            'key' => 'field_hero_cta_primary',
            'name' => 'cta_primary',
            'label' => 'Primary CTA',
            'type' => 'link',
            'return_format' => 'array',
        ],
        [
            'key' => 'field_hero_cta_secondary',
            'name' => 'cta_secondary',
            'label' => 'Secondary CTA (optional)',
            'type' => 'link',
            'return_format' => 'array',
        ],
    ],
],

Notice the AI picked the link field type (returns title + url + target as an array) for the buttons, which is the right choice over separate text + URL fields for editor UX. It picked image ID return format (best for the responsive image patterns covered in Proper Responsive Images with ACF Image Fields). It made subheading optional and the secondary CTA optional. All judgment calls; review and adjust where you disagree.

The naming follows the conventions in ACF Field Naming Conventions That Actually Scale: snake_case names, hierarchy-encoded keys, prefix-grouped.

Step 4: ask for the template partials

Now generate template-parts/flexible-content/hero.php that renders
this layout. Match the structure of template-parts/flexible-content/
cta.php (which you can read in the project files). Use the same
CSS class naming (fc-hero, fc-hero__heading, etc.). Wrap the
background image in the standard pattern that we use for full-bleed
hero images.

The AI reads the existing partial as a style reference and produces the new one with matching conventions. The output is usually 85-95% production-ready; you tweak the CSS class names or the conditional rendering if needed.

Step 5: iterate on the CSS

This is the most human-driven step. The AI's first-pass CSS or Tailwind classes are usually plausible but not pixel-precise. The iteration cycle:

1. Render the partial against test content.
2. Compare with the Figma side-by-side.
3. Describe the differences to the AI ("the heading is too small on desktop; the buttons need more horizontal padding; the badge image is positioned 32px from top and left, not 16px").
4. AI adjusts.
5. Repeat.

After 3-5 iteration cycles, the CSS matches the design. Total time per layout: 30-60 minutes versus the 90-180 minutes the manual workflow used to take.

What this workflow is bad at

Honesty matters. Some things this workflow does badly:

• Designs with complex animations. AI does fine on static layouts and basic CSS transitions. Anything with scrolljacking, scroll-driven animations, or complex GSAP timelines requires more hand-coding.
• Accessibility nuances. AI produces baseline-accessible HTML but misses subtle accessibility issues (ARIA labels in specific contexts, focus management, color contrast in edge cases). Always run an accessibility audit (axe DevTools, WAVE) on AI-generated partials.
• Design systems with strict token compliance. If your project has a tightly-controlled design token system, the AI's CSS will use literal values rather than tokens unless you explicitly include the token reference in every prompt.
• Cross-browser CSS quirks. AI's CSS works in modern Chrome and Firefox; Safari edge cases sometimes need manual fixes.

These limitations are real but tractable. The 90% case (build a normal marketing page from a normal Figma file) is faster and better with AI in the loop.

Where this fits in agency delivery

This is the build-phase workflow. It replaces the "developer stares at Figma and types HTML" stage. Other agency-delivery workflows where AI helps are covered by role in How Small WordPress Agencies Can Use AI in 2026, by Role. The Claude CLI orchestration (which is what runs this workflow on your machine) is covered in Using Claude CLI to Manage WordPress Sites.

For new agency projects in 2026, this Figma to ACF Flexible Content workflow is one of the highest-leverage processes to standardize. The agencies that have adopted it are shipping marketing sites in 40-60% less time than before, with consistent quality. The agencies that have not are losing ground every quarter.