Buttons

In Figmentor, a button is a Figma Frame that becomes an Elementor Button widget. The frame holds the visible button: background (fill), border (stroke), corner radius, effects, and — critically — exactly one text layer that becomes the button label.

Buttons are used for CTAs, links, form actions, and navigation. Styling (colors, padding, typography) is read from the frame and the text layer and applied in Elementor.

Name the frame with the prefix el-button followed by a colon and a descriptive name:

el-button:name

Examples: el-button:cta, el-button:submit, el-button:contact, el-button:secondary, el-button:nav-login.

The button frame must contain exactly one text layer. That text becomes the button label in Elementor. All other styling comes from the frame itself.

• One text layer — The only text inside the frame. No extra captions or sublabels.
• Frame properties — Fill (solid or gradient), stroke, corner radius, and effects (e.g. drop shadow) are read from the frame and applied to the Elementor button.

Figma	Elementor
Frame fill (solid / gradient)	Button background color / gradient
Frame stroke	Button border
Frame corner radius	Button border radius
Frame effects (e.g. shadow)	Button box shadow
Single text layer: font, size, weight, color	Button typography and text color
Frame padding (via Auto Layout) or frame size	Button padding / size

For typography and color details, see Styles & Properties.

1. Create a Frame (F) and name it el-button:your-name.
2. Add one text layer inside with the button label (e.g. “Get Started”, “Submit”).
3. Style the frame: fill, stroke, corner radius. Optionally add Auto Layout (Shift+A) with padding so the frame wraps the text neatly.
4. Style the text: font, size, weight, color. This becomes the button text style in Elementor.

After export, set the link (URL) in Elementor’s Button widget if the button should navigate somewhere.