Get FrameKit
WordPress plugin · Figma to your page builder

Draw it in Figma. Ship it as a real Bricks page.

Paste a Figma frame link. FrameKit reads every layer, works out what it is, and builds the page from your builder's own elements: headings, buttons, menus, accordions, forms. Your client edits it like any other page.

Sample frame · imports as a draft you review first
Home · Perseverance · GutenbergReady
Layers → roles2 to check
  • header · wp-block-template-partheader part
  • div · site-brandinglogo
  • nav · wp-block-navigation × 6menu
  • div · wp-block-cover · herosection
  • Perseverance is still driving.heading H1
  • Where is Perseverance?button
  • dl · wp-block-columns factsstats
  • div · wp-block-tabstabs
  • div · carouselslider
  • div · group · newsletterform
Bricks elementseditable
// postmeta _bricks_page_content_2[  { "name": "section", "label": "Hero",    "settings": { "_background": { … } } },  { "name": "container", "parent": "fk2a1" },  { "name": "heading",    "settings": { "tag": "h1",      "text": "Perseverance is still driving." } },  { "name": "text-basic", "settings": { … } },  { "name": "button",    "settings": { "text": "Where is Perseverance?",      "style": "primary" } },  …]

Designing a page once should be enough.

Most Figma-to-WordPress workflows make you pay for the same page twice, or hand the client something they can't change.

Block 14 of 38

Rebuilt by hand

Someone drags in every section, row and button again and eyeballs the padding against a screenshot.

FrameKitAuto layout becomes the builder's layout: direction, gaps, wrap, padding and alignment.

1 element · 4,812 lines

Pasted as one block

The page arrives as a wall of HTML in a code widget. It looks right until the client needs to change a heading.

FrameKitEvery layer becomes a native element the builder's own panels can edit.

#B23F12 × 212 places

Colours copied, never linked

The brand orange is pasted into two hundred settings. A rebrand means finding every one.

FrameKitFigma colour styles link to your site's global colours, by name first, then by value.

v3 in Figma · v1 on the site

Out of date after launch

The designer changes a headline and swaps a photo. Nobody can say which pages still show the old design.

FrameKitThe Figma diff lists what changed in Figma, what changed on the site, and where they clash.

Three steps, and you approve the middle one.

Your frame doesn't need special layer names. FrameKit guesses each layer's role from how it's drawn, says how sure it is, and lets you correct it before anything is written.

  1. 1

    Paste a frame link

    Any frame from any Figma file. Frames beside it named "Home · Tablet" or "Home — Mobile 375" are found and read as its breakpoints.

  2. 2

    Review the roles

    Every layer gets a role: section, header, heading H1–H6, button, image, card, menu and more. Guesses are marked likely or check this. Change one, and you can apply it to every instance of that component.

  3. 3

    Import a draft

    The page is written in Bricks's own format with a report of what was set and what wasn't. Saved roles apply to every re-import of that frame.

It knows a pricing table when it sees one.

A layer is also read by what it holds. Nineteen common patterns become the builder's own component, styled the way you drew them.

Showing what each pattern becomes in Bricks
  • Card→ styled Block
  • Accordion→ Nestable Accordion
  • Tabs→ Nestable Tabs
  • Menu→ Nav Menu
  • Logo→ Logo
  • Testimonial→ Testimonials
  • Social icons→ Social Icons
  • Icon list→ List
  • Icon box→ styled Block
  • Logo strip→ row of images
  • Stats→ Counter
  • Slider→ Carousel / Slider
  • Form→ Form
  • Pricing plan→ Pricing Tables
  • Call to action→ styled block
  • Team member→ Team Members
  • Breadcrumbs→ Breadcrumbs
  • Video→ Video
  • Gallery→ Image Gallery

Your tablet frame becomes tablet settings. Your colour styles become site colours.

Breakpoints from your frames

Layers are matched to the desktop frame by path. What differs (type sizes, padding, gaps, a row stacked, a layer hidden) becomes the builder's own breakpoint setting.

Tablet
…:tablet_portrait (≤ 991px)
Mobile
…:mobile_landscape (≤ 767px)
Hidden layer
_display:<breakpoint> none

Colours that follow a rebrand

A colour in the frame that matches a site colour is linked, not copied. Add the frame's colour styles to the site in one click and update them by name later.

Stored as
a "FrameKit" colour palette + global variables
In the page
var(--bricks-color-<id>)
Type & space
text styles → a "FrameKit" theme style

The design changed after launch. See exactly what.

FrameKit keeps a snapshot of every import. It compares three versions: what Figma holds now, what was imported, and what the page shows now. That way it can tell a change in Figma from an edit made on the site.

Copy 3Images 1Sections 1Perseverance · Home
  • Hero headingPerseverance is still driving. → Perseverance has driven farther than any rover.
    changed in Figma
  • Hero facts · Landing"18 February 2021" on the page · "Feb. 18, 2021" at import, unchanged in Figma
    edited on site
  • Primary buttonFigma: "Track the rover" · site: "Where is Perseverance now?"
    conflict
  • Hero photoa new image in Figma since the import
    image changed
  • Science tabsnow above Discoveries in Figma
    section moved

Pinned on the page

Open the page with the diff on and each difference is marked where it sits. You can lay the Figma frame over the page to compare. Only people who can edit the page see it.

Re-imports keep edits safe

If someone edited the page in the builder after the import, a re-import stops and asks before replacing their work. Images are downloaded again only when Figma sends a different one.

Same check in every builder

The diff reads the rendered page, so it works the same for Bricks as for the other four builders.

Not just the page. The theme around it.

The other Figma-to-WordPress tools stop at page content. FrameKit also writes the theme the pages live in, and keeps it in step with your tokens.

A child theme for your builder

Set up for the builder you use, with SCSS you can edit, a layout grid from your Figma grids, and compiled CSS. Logo, menus and Additional CSS carry over from the parent theme. Oxygen loads no theme, so on an Oxygen site your tokens live in Oxygen variables and selectors instead.

figmakit-<builder>/  src/scss/_vars.scss  src/scss/_layout.scss  src/scss/_variants.scss  src/scss/_custom.scss  dist/figmakit.css

Header, footer and menus

The top band and the footer you drew become the builder's own header and footer templates, used on every page. Navigation drawn in Figma becomes a WordPress menu.

Elementor Pro templatesDivi Theme BuilderBricks templatesOxygen templatesblock template parts

Variants you can edit

Buttons come as Primary, Secondary, Outline, Ghost and Text, in three sizes. Cards and sections get their own variants. Edit each one with token pickers and a hover state, and check the text contrast before you save. Variants from your Figma components are added to the list.

ACF blocks, if you want them

Turn this on for Gutenberg imports. Cards, CTAs, FAQs and your own components then become ACF blocks with their fields already filled in. If a block wouldn't look exactly the same, FrameKit keeps core blocks and tells you why.

No Figma file yet? Start from foundations.

Enter your colours, type, spacing, grid and corner shape. FrameKit generates the token set every builder uses, then FrameKit Studio composes pages from it and saves them as ordinary Bricks pages.

Variant
section--dark
Padding · tablet
space/48
Background
color/primary/900 + overlay
Saves to
Bricks page data
Variants are classesEvery variant is a theme class you can read and edit in the UI or in _custom.scss.
Drag to composeAdd components between sections, drag whole sections by their handle, set spacing per breakpoint.
Ends up as a normal pageNothing proprietary on the front end. Open it in your builder like any other page.
Components inside componentsAccordion items, tabs and carousel slides hold headings, buttons, images and cards. Each builder gets its own nested element.
Back to the Studio any timePages made in the Studio show an "Edit with FrameKit Studio" link in the Pages list, the admin bar and the block editor.

Let your AI client check the guesses. You still sign off.

FrameKit runs an MCP server. Claude Code, Cursor or any MCP client can read the layer tree, compare it with a screenshot of the frame, fix the unsure roles and import a draft. Nothing is accepted until you accept it.

You

Map Perseverance / Home. The top band is the header. The carousel under the news heading is a slider, and the fact row in the hero is stats.

AI client

→ figmakit_layer_tree frame 2094:82 260 layers · 2 marked "check this" → figmakit_set_roles ✓ header · template-part → header part ✓ div · wp-block-tabs → tabs ✓ div · carousel → slider ✓ dl · facts → stats ✓ figure · gallery → gallery the rest left as guessed (match the screenshot) → import draft ✓ Draft saved · 0 warnings · waiting for your review

Works without AI

Roles, patterns, tokens and the Studio all run on their own. AI is a second pair of eyes on the guesses.

It learns your corrections

Roles you accept are remembered, so the next frame drawn the same way is guessed right the first time.

Claude CodeCursorany MCP client

One plan. Every builder.

Unlimited sites and pages, no credits to run out of. Support and updates included. Pay monthly, or pay yearly and save 20%.

FrameKit Pro

$19.99/monthSave 20%

Billed $239.88 yearly

Checkout opens once payments are configured.

Plan essentials

Sites
Unlimited
Pages per site
Unlimited
Imports and re-imports
Unlimited
Credits
None needed
Updates
Included
Support
Included

Figma to WordPress

Page builders
5
Patterns recognised
19
Breakpoints from your frames
3
Colour styles linked to site colours
Figma diff after launch
Re-imports that keep site edits

Theme kit

Child theme with SCSS
Header, footer and menus
Editable variants
ACF blocks for Gutenberg

FrameKit Studio

Foundations to tokens
Drag-and-drop page composer

AI, optional

MCP server for AI clients
Use your own Claude API key

Try it before you pay

The live demo is a WordPress site with FrameKit installed. Import a sample frame into each builder and open the result.

Open the live demo

Yearly saves $60

$239.88 a year instead of $299.88 on the monthly plan. Same features, same unlimited sites.

No limits, no credits

FrameKit runs on your own WordPress site, not on paid AI, so nothing is metered. Use it on every site you build, with as many pages as you like.

Before you ask.

Loading questions…

Your next page is already drawn.

Paste the frame, check the roles, and open it in Bricks.

Get FrameKitTry the live demo