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 is the list of frames or layers that must be named using our supported Elementor widget names:
- Container
- Button
- Heading
- Text Editor
- Creative Button
- Dual Color Heading
- Advanced Menu
- Advanced Menu → Menu → Menu Active
- Call to Action
- Info Box
- Post Carousel
- Testimonial
- Feature List
- Counter → Number
- Logo Carousel
- Woo Product List
- Content
- Image
- Subheading
- Rating
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.
