Naming Layers
Reference for all Figma layer naming conventions that map to Elementor widgets. Use these prefixes so Figmentor converts your design correctly.
Overview
Figmentor turns Figma layers into Elementor elements by reading the layer name. Use the pattern below so each frame or group becomes the right widget.
• el- Prefix that identifies an Elementor element
• [type] Element type (container or widget name)
• [name] Optional descriptive name (lowercase, hyphens only)
Container naming
Containers are sections or wrappers that hold other elements. Use the prefix el-container.
Elementor widget: Container (flex/grid layout)
What it does: Layout settings (direction, alignment), spacing, padding, background. Nested structure is preserved.
el-container:main-content
el-container:footer
el-container:hero
el-container:features
Widget naming reference
Each row is a Figma naming prefix, the Elementor widget it becomes, and what Figmentor sets from your Figma design.
| Figma name pattern | Elementor widget | What it does |
|---|---|---|
| el-container:name | Container | Layout (flex/grid), spacing, padding, gap, background. Nested hierarchy is preserved. |
| el-button:name | Button | Button text from inner text layer; styles from frame (fill, stroke, radius, hover). One text layer only. |
| el-heading:name | Heading | Heading text; typography (font, size, weight, color); level (H1–H6) from font size. |
| el-text-editor:name | Text Editor | Paragraph/body text; typography, alignment, line height, letter spacing. Use for paragraphs, not el-text. |
| el-image:name | Image | Image from frame fill or child layer; size from frame dimensions; fit/alignment preserved. |
| el-icon:[icon-name] | Icon | FontAwesome icon by name in square brackets, e.g. el-icon:[star], el-icon:[facebook]. Size from frame. |
| el-google-maps:name | Google Maps | Map by address in the name, e.g. el-google-maps:123 Main St, City. Zoom and height from frame. |
| el-video:name | Video | Video by URL in the name (YouTube, Vimeo, self-hosted). Controls and size from frame. |
| el-divider:name | Divider | Horizontal line; style, width, color from stroke/fill. |
| el-spacer:name | Spacer | Vertical or horizontal gap; height/width from frame dimensions; responsive behavior. |
Basic widgets
Button
el-button:name → Button widget. Examples: el-button:submit, el-button:learn-more, el-button:cta-primary.
Heading
el-heading:name → Heading widget. Examples: el-heading:welcome, el-heading:section-title, el-heading:main-title.
Text Editor (paragraphs)
el-text-editor:name → Text Editor widget. Examples: el-text-editor:description, el-text-editor:about-content. Use for body text and rich text.
Image
el-image:name → Image widget. Examples: el-image:hero, el-image:product-photo, el-image:logo.
Advanced widgets
Google Maps
el-google-maps:name — Put the address in the name. Examples: el-google-maps:store-location, el-google-maps:123 Main Street, City.
Video
el-video:name — Include video URL in the name. Examples: el-video:product-demo, el-video:https://youtu.be/....
Icon
el-icon:[icon-name] — FontAwesome icon name in square brackets. Examples: el-icon:[star], el-icon:[facebook], el-icon:[menu-burger].
Divider
el-divider:name — Horizontal line. Examples: el-divider:section-break, el-divider:content-separator.
Spacer
el-spacer:name — Empty gap. Examples: el-spacer:top-gap, el-spacer:section-spacing.
Best practices
Naming guidelines:
- Use descriptive names that indicate the element's purpose.
- Keep names short but meaningful.
- Use hyphens for multi-word names (e.g.
main-title). - Avoid special characters except hyphens. No spaces.
- Use lowercase letters only.
Good names
Bad names
Avoid these:
el-container:Container1— Not descriptive.el-button:SUBMIT_BUTTON— Use lowercase.el-heading:About Us Title— No spaces; useel-heading:about-us-title.el-text-editor:@description— No special characters.el-button submit— Missing colon between type and name.
Complete layout example
A full page structure in the Figma layers panel might look like this:
What Figmentor does with names
Figmentor parses the layer name to get type and name, then picks the right Elementor widget and settings creator. Each type maps to:
- Containers: Layout (flex/grid), spacing, padding, background.
- Buttons: Text, styles, hover from frame.
- Headings: Typography, alignment, tag level (H1–H6).
- Text Editor: Typography, alignment, line height.
- Images: Size, fit, alignment; image exported from frame.
- Google Maps: Address, zoom, height.
- Videos: URL, controls, autoplay.
- Icons: Icon choice, size, rotation.
- Dividers: Style, width, color.
- Spacers: Height/width, responsive behavior.
If a name doesn’t match the convention, a warning is logged and default settings are used. Required Figma properties that are missing also fall back to defaults so the export can continue.