Best Practices

Figmentor relies on layer names to map Figma frames to Elementor widgets. Use the exact prefixes and patterns described in Naming Layers:

• el-container:name for layout sections
• el-button:name, el-heading:name, el-text-editor:name for content
• el-image:name, el-icon:icon-name for media
• el-video:name, el-google-maps:name for video and maps

Use lowercase and hyphens in names (e.g. el-container:hero-section). Avoid spaces or special characters. Descriptive names make it easier to find and edit elements in Elementor after import.

Export one top-level frame per page or section. Put all content (header, hero, features, footer) inside that frame as nested containers and elements. This keeps the hierarchy clear and matches how Elementor builds the page.

Use containers to group related elements. Nest containers where it makes sense (e.g. a header container with logo + nav, a hero container with heading + text + button). See Containers for examples.

Containers need Auto Layout (Shift+A in Figma) so direction, padding, gap, and alignment are exported. Without it, Figmentor has no layout information and the result in Elementor may not match. See Auto Layout for the full mapping table.

Set direction (horizontal/vertical), padding, and gap explicitly. Use alignment (min, center, max, space-between) to control how children sit inside the container.

Each export counts as one usage on Starter and Pro. Instead of exporting the entire page every time, split designs into logical sections (hero, features, CTA, footer) and export only what changed. Benefits:

• Fewer exports — re-export only updated sections.
• Reusable templates — import sections into multiple pages in Elementor.
• Easier iteration — small sections are faster to tweak in Figma and re-export.

Details: Plan Limits → Usage optimization.

Typography, colors, and spacing that match Elementor’s model convert best. Prefer:

• Solid fills and standard gradients — Complex mesh or multiple overlays may not map fully.
• Web-safe or linked fonts — Add the same fonts in WordPress if you use custom ones.
• One text layer per button/heading/text element — Multiple text layers in a button or heading can break the export.

Full list of what carries over: Styles & Properties.

Each element type has a required structure. Stick to it to avoid failed or incorrect exports:

• Buttons: One frame named el-button:name with exactly one text layer inside. No multiple text nodes. (Buttons)
• Headings & text: One text layer per el-heading or el-text-editor frame. (Text & Headings)
• Images: One image inside el-image:name; set frame size for dimensions. (Images & Icons)
• Icons: Name with el-icon:icon-name (e.g. FontAwesome name); frame size and color are used. (Images & Icons)