Skip to content
Elementor Forge

Figma to Elementor JSON.

Paste a Figma URL, drop an HTML file, or write Markdown. Download a valid Elementor Pro .json template in under a minute.

Open the converterSee the output shape

build 2026.05.18.4a9f1 · v0.4.0

// three input formats

Three input formats.

Same JSON output. Different sources you already work with.

  • 01figma-import

    POST /api/figma/convert

    { "elType": "section", "title": "Hero / desktop" }

    Figma frames become Elementor sections.

    Each top-level frame becomes a section; auto-layout frames become inner-sections; text nodes carry font-size and color as widget settings.

  • 02html-import

    POST /api/html/convert

    { "elType": "widget", "widgetType": "heading", "settings": { "title": "Pricing" } }

    HTML tags map to Elementor widgets.

    h1-h6 become heading widgets, p becomes text-editor, img becomes image, a becomes button. Inline color and padding translate to _styles_ overrides.

  • 03markdown-import

    POST /api/markdown/convert

    { "elType": "widget", "widgetType": "icon-list", "settings": { "icon_list": [...] } }

    Markdown blocks become Elementor widgets.

    Headings, paragraphs, lists, code, blockquote, and tables all become widgets in a single section. Tables split into two-column layouts.

// from url to json

From URL to JSON.

Three steps. Under sixty seconds on a typical frame.

  1. 01step

    Paste the source.

    A Figma file URL plus a personal access token, an .html file, or raw Markdown. The converter accepts the first one it recognises.

  2. 02step

    Map to widgets.

    The server walks the source tree and emits an Elementor template. elType=section for top-level containers, widgetType=heading / text-editor / image / button / icon-list for the leaves.

  3. 03step

    Tweak and export.

    Open the split-pane preview. Edit any widget setting inline. The JSON tree stays expanded. Hit export and a valid .json file downloads to disk.

// step 02 — widget mapping6 widget types
elTypesection
heading
text-editor
image
button
icon-list
code

// what the output looks like

What the output looks like.

content-type: application/json
{
  "title": "Pricing / desktop",
  "type": "section",
  "version": "0.4",
  "page_settings": [],
  "content": [
    {
      "id": "a1b2c3d",
      "elType": "section",
      "settings": { "background_background": "classic" },
      "elements": [
        {
          "id": "e4f5g6h",
          "elType": "widget",
          "widgetType": "heading",
          "settings": { "title": "Plans for every studio", "size": "h1" }
        },
        {
          "id": "i7j8k9l",
          "elType": "widget",
          "widgetType": "text-editor",
          "settings": { "editor": "<p>From solo to agency. Same template, every tier.</p>" }
        },
        {
          "id": "m0n1o2p",
          "elType": "widget",
          "widgetType": "image",
          "settings": { "image": { "url": "/uploads/pricing.png" }, "image_alt": "Pricing tiers" }
        }
      ]
    }
  ]
}

Drops into WordPress → Templates → Import Templates.

// templates you keep

Templates you keep.

Save any completed conversion with a name, a category, and an optional description. Re-export the .json as many times as you need. Delete removes it from the library only — the source file on your disk is untouched.

category · /templates7 supported
landingblogpricingaboutcontactportfolioother
landingblogpricingaboutcontactportfolioother
landingblogpricingaboutcontactportfolioother
landingblogpricingaboutcontactportfolioother
live library03 templates
●SaaS landing — Frost
38w

  • SaaS landing — Frost

    Re-export

  • Studio blog post — Spring

    Re-export

  • Pricing page — Vector

    Re-export

← live feed on the left · saved records on the right

// endpoints you call

Endpoints you call.

Same routes the converter UI calls. Wire them straight into your build pipeline.

methodpathbodyreturns
POST/api/figma/convert{ url: string, token: string, frameIds?: string[] }Elementor template JSON
POST/api/html/convert{ html: string }Elementor template JSON
POST/api/markdown/convert{ markdown: string }Elementor template JSON
GET/api/conversions/{id}—Stored conversion record + JSON
PATCH/api/conversions/{id}{ elementor_json?: object, name?: string }Updated conversion record
GET/api/templates—Library list
POST/api/templates{ name: string, category: string, elementor_json: object }Saved template record
DELETE/api/templates/{id}—204 No Content

// common questions

Common questions.

01Does it work without a Figma account?

No. Paste a Figma file URL plus a personal access token. Get one at figma.com/developers/api in two minutes.

02Will the JSON import cleanly into Elementor Pro?

Yes. The output matches Elementor's template export shape — title, type, version, content, page_settings. Import via WordPress admin → Templates → Import Templates.

03Which Elementor Pro version is the output targeted at?

Elementor Pro 3.18 or newer. Older versions accept the JSON but may render newer widget settings as defaults.

04Can I edit widget settings after conversion?

Yes. Open the split-pane preview, click any widget on the right, edit typography, color, alignment, and padding inline. PATCH /api/conversions/{id} persists the change.

05Do templates persist, or only the last conversion?

Both. Every conversion is stored by id; saved templates live in the library with a name and category. Re-export from either surface.

06What happens if the Figma URL is private and the token is wrong?

The server returns 401 with the message Figma rejected the token. Regenerate the token at figma.com/developers/api and retry — the source frame is unchanged.

Paste the source.

The converter is the same routes the API exposes. Nothing in the UI isn't in the schema.

Open the converterRead the API reference
Built with Moonshift