Styles & Properties

Styles and properties from your Figma design are mapped to the corresponding Elementor widget and container settings:

For headings, paragraphs, and button labels, Figmentor reads the text layer properties and applies them to the Elementor widget.

Preserved:

• Font family — Mapped to the closest available font in Elementor / your theme
• Font size — Preserved; also used to infer heading level (H1–H6) for el-heading layers
• Font weight — Normal, medium, semibold, bold
• Alignment — Left, center, right, justify
• Color — Fill color including opacity
• Line height — Line height value
• Letter spacing — Letter spacing

Set these on the text layer in Figma; they are applied to the generated Heading, Text Editor, or Button widget in Elementor.

For frames named el-container:name, Auto Layout settings define how the section is laid out in Elementor.

• Direction — Horizontal or Vertical → flex direction (row/column)
• Alignment — Primary and counter axis → justify content and align items
• Padding — Inner spacing (top, right, bottom, left) → container padding
• Gap — Space between children → container gap

For the full mapping, see Auto Layout.

Figma fills and backgrounds are converted to Elementor background settings.

• Solid fills — Single color (with opacity) → background color
• Gradients — Linear or radial gradients → background gradient
• Image fills — Image used as background → background image (exported with the design)

Applied to containers, buttons, and other elements that support background in Elementor.

Strokes (borders): Border color and width from Figma strokes are applied as Elementor border settings.

Effects: Drop shadows (offset, blur, color) are converted to Elementor box shadow where supported. Complex or unsupported effects may be approximated or omitted; you can refine them in Elementor after import.

For el-image:name frames:

• The image is exported from the frame automatically (fill or child layer).
• Frame dimensions set the image size in the Elementor Image widget.
• Fill mode (fill, fit, cover, etc.) is respected when supported.

Use web-friendly formats and dimensions for best results in the exported template.

• Typography — Font, size, weight, color, alignment, line height, letter spacing from text layers.
• Layout — Auto Layout direction, alignment, padding, and gap from container frames.
• Backgrounds — Solid fills, gradients, and image fills.
• Borders — Stroke color and width.
• Effects — Drop shadows (offset, blur, color).
• Images — Exported from frame; size and fit from frame dimensions and fill mode.

For structure and naming, see Structuring Your Design and Naming Layers.