Naming frames in Figma is crucial when converting your design to Elementor pages. To ensure a smooth transition using FigWP, it supports most of the Elementor and Essential Addons widgets. By naming elements manually in Figma, you ensure that, upon export, each element will be assigned the appropriate widget from Elementor or Essential Addons.
Prerequisites:
- Install FigWP plugin from the Figma repository
- Collect the Figma API key
How to Name Frames in Figma: A Complete Guide with Examples #
The below-marked section is entirely under the ‘Info Box.’ So if you name the frame ‘Info Box’ in your Figma design, the entire section will be imported successfully in Elementor.
Well, let’s discuss all the sections chronologically to make you understand how the framing names need to be done on your Figma before implementing it into your Elementor site.
In the Info Box, you need to name your frames based on the widget support it offers from Elementor & Essential Addons as shown below: ‘Heading’, ‘Subheading’, & ‘Content.’ If you miss any naming, your design might not be reflected on your Elementor end.
To add any kind of CTA on your Elementor website, you need to add buttons. And with the FigWP, you need to name your CTA button as ‘Button’, ‘button.’ For any kind of text in buttons, it offers the ‘Text’ widget of Elementor. For any kind of icon, name the frames as ‘Icon’, ‘icon’ in your Figma file.
Here’s the list of supported widgets along with compatible child nodes:
| Widget Name | Compatible Child Nodes |
| Advanced Accordion | Heading, Content, Icon |
| Advanced Menu | Menu, Active Menu |
| Advanced Tabs | Heading, Content, Icon |
| Breadcrumbs | Heading, Content |
| Business Reviews | Image, Heading, Subheading, Content, Rating |
| Button | Icon |
| Code Snippet | Heading, Content |
| Container | – |
| Content Ticker | Heading, Content |
| Content Timeline | Heading, Content, Image, Button |
| Content Toggle | Heading, Content |
| Countdown | Heading, Number |
| Counter | Heading, Number |
| Creative Button | Icon |
| Call to Action | Heading, Subheading, Content, Button |
| Data Table | Heading, Content |
| Divider | Heading, Icon |
| Dual Color Header | Heading |
| Event Calendar | – |
| Feature List | Heading, Content, Icon |
| Heading | – |
| Image | – |
| Info Box | Heading, Subheading, Content, Image, Button, Icon |
| Logo Carousel | Image |
| Post Block | Heading, Content, Image |
| Post Carousel | Heading, Content, Image |
| Post Grid | Heading, Content, Image |
| Post Timeline | Heading, Content, Image |
| Pricing Table | Heading, Content, Number, Button |
| Simple Menu | Menu, Active Menu |
| Smart Post List | Heading, Content, Image |
| Team Member | Heading, Subheading, Content, Image |
| Testimonial | Heading, Content, Image, Rating |
| Testimonial Slider | Heading, Content, Image, Rating |
| Text Editor | – |
This is how you need to name frames in Figma for a smooth Figma to WordPress conversion. To know the process, how you can convert your Figma design to an Elementor website, read this documentation.
Still have queries? Please feel free to contact our support team for additional assistance.
