Get FrameKit

Getting started

Turn a Figma frame into a native, editable page in Bricks, Elementor, Divi 5, Oxygen 6 or Gutenberg.

What you need

  • A WordPress site with one of the supported builders: Bricks, Elementor, Divi 5 (or Divi 4), Oxygen 6, or the block editor.
  • A Figma personal access token. It works on every Figma plan.
  • A Figma frame. It doesn't need special layer names or auto layout.

Your first import

  1. Install and activate the FrameKit plugin on your site.
  2. Add your Figma personal access token in FrameKit's settings.
  3. Paste a Figma frame link. Frames beside it named "Home · Tablet" or "Home — Mobile 375" are found and read as its breakpoints.
  4. Review the roles FrameKit guessed for each layer and correct any marked check this. See Importing a frame.
  5. Import a draft. The page is written in your builder's own format, with a report of what was set and what wasn't.

No Figma file yet?

Start from foundations in FrameKit Studio: enter your colours, type, spacing, grid and corner shape, and compose pages from them. See FrameKit Studio.