# figma → wordpress

Figma to WordPress, block patterns and FSE.

Send a Figma. Ship as a custom Full Site Editing theme or a set of Gutenberg block patterns dropped into your existing theme. Custom post types, ACF where needed, Rank Math or Yoast SEO stubs, WCAG 2.2 AA baseline.

Get a Figma-to-WordPress quote

What you get.

Custom FSE theme (WP 6.5+) with theme.json tokens matching your Figma variables, or a set of block patterns dropped into an existing theme.
Reusable Gutenberg blocks per Figma component. Rich text where content changes, static where it doesn't.
Custom post types + taxonomies scaffolded (portfolio, case studies, services).
ACF or CMB2 for structured field groups. Left out if the design doesn't need them.
Builder.io Visual Copilot on the first pass where the Figma is auto-layout clean. Rewritten to native block syntax before ship.
Deploys via Pressable, WP Engine, or your own host. Handover is a git repo + wp-content export.

components/Button.tsx

import { forwardRef, type ButtonHTMLAttributes } from 'react';

type Variant = 'primary' | 'secondary';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  variant?: Variant;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ label, variant = 'primary', ...rest }, ref) => {
    const base = 'inline-flex items-center rounded-md px-5 py-3 font-medium';
    const skin = variant === 'primary'
      ? 'bg-wire text-ink hover:bg-wire/80'
      : 'border border-steel text-chalk hover:border-wire hover:text-wire';
    return (
      <button ref={ref} className={`${base} ${skin}`} {...rest}>
        {label}
      </button>
    );
  }
);
Button.displayName = 'Button';

Tool used: hand-coded from Figma dev-mode. TypeScript strict, forwardRef, no external deps.

Turnaround and price.

Single WordPress page (block pattern set): from $349, 5d.
Custom FSE theme, 5 pages: from $2,490, 14d.
Custom FSE theme, 10 pages + WooCommerce: from $4,990, 21d.

# get a quote

Send a Figma. We'll quote in 24 hours.

Paste a share link. Add a line about the output stack (React, HTML, WordPress). We'll reply with an indicative price and a start date.