How to Structure Your
Design for Figmentor
A step-by-step guide for designers who want their Figma layout converted into a ready-to-use Elementor template. No coding required — just follow the naming rules.
el-type:name — e.g. el-button:submit, el-heading:title. Lowercase + hyphens only.
How Figmentor reads your file
Figmentor parses your Figma file and converts it into an importable Elementor JSON template. To do that accurately, it needs to know what each layer is — a button, heading, section, image, etc.
It figures this out from three things: the layer names you give frames and groups, the structure of what's inside them, and the Figma properties you set (colors, fonts, spacing). Set all three correctly and your design converts cleanly.
One frame = one page
Your file must have a single top-level frame that represents the entire page. All sections and elements go inside it as direct or nested children.
F in Figma. Use your usual canvas size — 1440px wide is a good default for WordPress themes.el- name; it's just the wrapper.Name every layer
Every frame or group that should become a specific element must be named using this pattern:
el-button:submit ✓ correct
el-button submit ✗ missing colon
el-heading:Main Title ✗ spaces not allowed
Element types
Use the correct type keyword for each element you want to create:
| What you want | Name pattern | Example |
|---|---|---|
| Section / area | el-container:name | el-container:header |
| Button | el-button:name | el-button:submit |
| Heading (H1–H6) | el-heading:name | el-heading:title |
| Paragraph / body text | el-text-editor:name | el-text-editor:body |
| Image | el-image:name | el-image:hero |
| Icon | el-icon:[icon-name] | el-icon:[star] |
| Video | el-video:name | el-video:promo |
| Google Maps | el-google-maps:name | el-google-maps:store |
| Divider (line) | el-divider:name | el-divider:section |
| Spacer (gap) | el-spacer:name | el-spacer:gap |
Building each element
Here's how to build and structure each element type in Figma so it converts correctly.
Buttons
Create a Frame styled as a button — fill, corner radius, padding. Inside it, place exactly one text layer with the button label. Figmentor uses the text layer as the button copy, and the frame's fill, stroke, corner radius, and effects for the visual style.
Headings
Wrap a single text layer in a Frame and name it el-heading:your-name. Set font family, size, weight, and color in Figma — those values carry over as the heading's style. The font size is also used to infer the heading level (H1 through H6).
Paragraphs / body text
Same approach as headings: one text layer inside a Frame, named el-text-editor:your-name. Body text can span multiple lines. Font, line height, letter spacing, and alignment all convert automatically.
Images
Create a Frame or Rectangle and place the image inside it as a fill or layer. Name it el-image:your-name. The image is exported with the design and the frame dimensions set the image size in Elementor.
Icons
Use FontAwesome icon names in square brackets: el-icon:[star], el-icon:[user], el-icon:[facebook]. The frame size determines the icon's rendered size.
Video & Maps
Place a Frame as a placeholder with the desired size. For video, include the URL in the name: el-video:https://youtu.be/.... YouTube, Vimeo, and self-hosted links are supported. For maps, include the address: el-google-maps:123 Main Street, City.
Sections & Auto Layout
Sections (containers) define the structure of your page — how elements are grouped and spaced. Apply Auto Layout to every container frame so spacing, alignment, and direction map cleanly to Elementor's responsive layout.
el-container:header, el-container:hero, etc. Containers can be nested — the same hierarchy is preserved in Elementor.Shift+A to add Auto Layout (or find it in the right-hand panel).Set your styles in Figma
Figmentor reads the styles you set in Figma and applies them to the Elementor template. Here's what carries over:
Text (headings, paragraphs, button labels)
Font family, size, weight, alignment, color (including opacity), line height, and letter spacing — all preserved.
Sections (containers)
Auto Layout direction, alignment, padding, and gap are used for spacing in the Elementor template.
Colors and backgrounds
Solid fills, gradients, image fills, strokes (border color + width), and effects like drop shadows (offset, blur, color) all convert.
Images
The image is exported from the frame automatically. Frame dimensions set the size; fill mode (fill, fit, crop) is also respected.
Full page example
A simple page that converts cleanly looks like this in the layers panel:
Before you send your design
Run through this checklist before sending your file to Figmentor:
el-container:name (or will become generic sections by default)
el-type:name format
el-icon:[icon-name] with FontAwesome names in brackets
Common mistakes
These are the most frequent issues when preparing a Figma file — and how to fix them:
el-text:descriptionel-text-editor:descriptionel-text-editor for paragraphs, not el-text.el-heading:Main Titleel-heading:main-titleel-button submitel-button:submitel-icon:starel-icon:[star]