Figma to Kirki is a Kirki plugin that lets you import your Figma designs directly into Kirki as a live website – no manual coding needed.
What it does:
- Instantly transfers your design components and styling from Figma into Kirki.
- Keeps your structure, styling, and content intact, so it’s ready to be extended and published with Kirki’s full set of tools.
- Maintains design consistency and precision from Figma to the finished site, without the back-and-forth of a manual conversion.
How to Install the Figma to Kirki Plugin
The Figma to Kirki plugin lives inside Figma, so you’ll need to install it from there:
- Open Figma and click the Actions icon in the bottom toolbar.
- Switch to the Plugins & widgets tab and search for “Figma to Kirki“.
- Select Figma to Kirki (WordPress) from the results, then click Run to install it.
The Figma to Kirki plugin will now be available in your Figma projects.
Note: Want to see Figma to Kirki import in action before prepping your own file? Test the plugin with this sample Figma file.
How to Prepare Your Figma Design for Import
A well-structured Figma file is what makes for a clean import. Work through these steps before you convert.
Step 1: Wrap Everything in Auto Layout Frames
Auto Layout tells Kirki how your elements relate to each other, which is what makes spacing, alignment, and responsiveness carry over correctly.
- Wrap the whole page in one frame with a max width set (1320px is a common choice), and put every element inside it.
- Build grids with real dimensions in Figma, not eyeballed spacing.
- Don’t leave elements floating inside the frame either – give each one its own Auto Layout Frame rather than placing it loose.
Step 2: Set Min/Max Constraints on Containers
Add min/max width and height constraints to frames wherever the layout needs to scale. Without them, responsive behavior in Kirki is harder to predict.
Step 3: Group and Name Elements by What They Are
Kirki reads structure from how you group and name things, so nest with intent:
- Button with an icon → Wrap the button and its icon inside an Auto Layout Frame named “Button”
- Form Label and input pair → Wrap the label and input combo inside an Auto Layout Frame named “Input”
- Hero, About, Feature sections → Wrap contents inside an Auto Layout Frame named descriptively, like “Section_Hero” or “Section_Features”
Step 4: Name Elements Using Kirki’s Supported Keywords
Certain layer names map straight to real elements instead of importing as plain shapes. For instance, name a layer “Button” (or button / BUTTON), and Kirki builds an actual button, not a styled rectangle. The same goes for the names below:
- Button: Button, button, BUTTON
- Form: Form, form, FORM
- Input: Input, input, INPUT
- Textarea: Textarea, textarea, TEXTAREA
- Section: Section, section, SECTION
- Container: Container, container, CONTAINER
Step 5: Flatten Decorative Elements
Complex vectors, icons, and illustrations can break or bloat the file on import. Right-click and flatten them first to keep things light and clean.
Step 6. Do a Final Pass Before Converting
Before you convert, give your file one last polish:
- Remove empty or hidden layers.
- Check spacing and alignment.
- Confirm every element sits inside an Auto Layout Frame.
How to Prepare Your Kirki Project for Import
With your Figma file ready, switch over to Kirki and get the project set up to receive it.
Step 1: Install the Fonts You Used in Figma
Get your fonts into Kirki before importing. Skip this, and your site falls back to a default font, undoing the typography work you put into the design.
- Google Fonts: Install these from Kirki’s font library.
- Custom Fonts: If you used a custom font, upload and install it in Kirki before importing.
Learn more about Google and Custom Fonts.
Step 2: Create Global Style Variables
Set up variables for the things you’ll reuse across the site:
- Font variables, for the individual font families you’ve set as your brand’s type system.
- Text style variables (Heading, Body, Caption), for whole text styles you want to define once and reuse.
- Color variables for your brand palette (Primary, Secondary, Accent, Background, Text).
- Spacing and sizing variables, if your design uses consistent padding or margins.
Learn more about Variables.
Step 3. Prepare for Dynamic Content
If your design includes repeated content, like recipes, team members, or product cards, don’t hard-code it. Use Kirki’s Content Manager to build Collections instead – they work like a database for your dynamic data.
Learn more about Dynamic Content.
How to Import Your Figma Design to Kirki
Once both files are ready, importing your design takes two steps.
Step 1: Copy Your Design from Figma
- In Figma, select the frame containing your design.
- In the Figma to Kirki plugin panel, click Generate & copy.
Step 2: Paste Your Design into Kirki
- Go to Kirki and open a page, or create a new one.
- Paste the design into the workspace with Cmd + V.
Refine Your Site
Once your design lands in Kirki, it comes in with its layouts, styles, and spacing intact – so refining it means connecting it to Kirki’s features, not rebuilding it. You can:
- Link to variables: Assign your imported fonts, colors, and sizes to the global style variables you created earlier. This keeps your site scalable and easy to update later.
- Add dynamic content: Replace static sections with Collections from the Content Manager (recipes, portfolios, products, and similar repeated content).
- Add interactions and animations: Add hover effects, transitions, and scroll-based behaviors using the Interaction Library and Interaction Response Editor.
- Set your global header and footer: turn the header and footer sections you imported into Components, then set them as the site’s Header and Footer so they appear automatically on every page.
Once you’re happy with how everything looks, preview and publish your site to make it live.