Start for free
Documentation menu

Convert from Figma

Step-by-step: turn a Figma file or frame into WordPress content using a link and a personal access token, or an exported JSON.

Figma is available on every plan, Free included. You can connect with a link and a personal access token, or upload the JSON exported from Figma.

One page or one frame per project

Tapeto converts the first page of the Figma file — or just the single frame when your link points to one. To convert a site with several pages, create one project per frame (copy the link of each frame). Each project counts against your monthly limit.

Before you start

  • A Figma file you can open (you need at least view access).
  • A Figma personal access token (only for the link method).
  • Your WordPress site, if you will publish: see the ZIP / HTML guide.

Step 1 — Prepare the design in Figma

Tapeto reads the structure of the layers, so a tidy file gives a better Fidelity Score.

  1. Build each page as a Frame at desktop width.
  2. Use Auto layout wherever you can: horizontal and vertical auto layout become rows and columns with their gaps and padding.
  3. Name your layers by purpose — Header, Hero, Nav, Card, Button, Footer, H1, H2… Names help Tapeto decide what is a section, a menu or a button.
  4. Write text as real text layers (not outlines) and use fonts available on Google Fonts.
  5. Delete or leave out layers you do not need: hidden layers are skipped.

Step 2 — Create the project

Method A — Link and token

  1. In Figma, right-click the frame → Copy/Paste as → Copy link to selection (or copy the file URL to convert the first page).
  2. Create a token: Figma → your profile menu → Settings → Security → Personal access tokens → Generate new token. Read access to file content is enough. Copy it (it starts with figd_).
  3. In Tapeto click New project, write a name and open the Figma tab.
  4. Paste the link into Figma file or frame URL and the token into Figma personal access token.
  5. Click Create project.

The token is used once to download the file and is never stored. The link must look like https://www.figma.com/design/….

Method B — Upload the JSON

  1. Export the file JSON from the Figma REST API (GET /v1/files/:file_key with your token) and save it as a .json file of up to 5–200 MB (by plan).
  2. In Tapeto click New project, open the Figma tab and drop the .json in the area at the bottom.
  3. Click Create project.

Wait until the project is parsed. If it ends in error, the message tells you why (see the table below).

Step 3 — Choose the builder and convert

  1. Open the project and pick Gutenberg (every plan) or Elementor (from Starter).
  2. Click Convert and wait until the conversion is completed.
  3. Check the Preview and the Fidelity Score. Review the images: if one is missing, replace it from the Media Library after importing.

Step 4 — Get the result into WordPress

Free account

  1. Open the Content tab and click Download files (or Copy).
  2. In WordPress: Pages → Add New, three-dot menu → Code editor, paste the content, then go back to the visual editor.
  3. If the design has a header or footer, download them from the Header / Footer / Sidebar tab and paste them into the matching template parts.
  4. The Instructions tab lists the exact steps. Export WXR and Publish to WordPress are locked on Free.
  1. Choose Elementor if you prefer it (from Starter).
  2. Either click Export WXR and import it from Tools → Import → WordPress, or connect your site and click Publish to WordPress. Both are explained step by step in the ZIP / HTML guide.
  3. Publishing creates the page as a draft for you to review.
  4. On Agency and Studio, the WXR can also carry custom post types and loops detected in the design.

If something fails

Message Cause What to do
Figma rejected the token or you have no access Wrong token, or the file is not shared with you Generate a new token and check you can open the file
File not found The link is wrong Copy the link again from Figma
Figma limited the requests Too many requests in a short time Wait a minute and try again
The URL must look like figma.com/design/… The link is not a Figma file link Use a link that starts with https://www.figma.com/design/
JSON not recognised The file is not a Figma export Export it again from the REST API

Next step

Read Exporting Results for all the ways to take the output into WordPress.