Prepare a frame for conversion

Before a page is spent, your AI app runs FigWP’s analysis on the frame. It walks every layer and reports findings as a blocker, a warning or a note, each naming the layers involved, and with a connected site it adds the site’s side too. This page lists what it looks for and what to do about each finding.

What the analysis reports

Blockers stop the conversion:

• A frame taller than 20,000px. Split the design into frames; see Tall pages.
• Too many layers, or layers nested too deep, for one conversion.

Warnings convert, but not as drawn:

• Sections with several layers and no auto layout: fixed positions that will not reflow on a phone.
• Layers outside the frame’s bounds. They are still converted, so hide them first if they are leftovers.
• Fonts missing in Figma itself.
• Images over 4,000px on a side. They import, slowly. Export them smaller.
• Rotation, masks, blend modes, layer blur and boolean shapes, all approximated in Elementor.

Notes are advice: for instance, most layers still carry Figma’s default names, which makes mapping harder.

From the site, when you name one: the site is not ready (Elementor off, containers off), warnings from the site itself (the connecting user cannot post unfiltered HTML), fonts the site cannot load, Google Fonts turned off in Elementor, and a frame wider than the site’s content width.

The analysis ends with the cost: one page, reserved when you convert and charged when you import, against what the plan has left.

Auto layout first

A design whose sections are placed by hand has nothing an Elementor container can reflow. FigWP will not convert such a frame as it is. Your app has three ways forward, and it will ask you which:

1. Let FigWP make an auto-layout copy. The plugin clones the frame beside the original and selects the clone. A filled rectangle with layers on it becomes a frame with that fill, loose layers are grouped into full-width sections (one per band of vertically overlapping layers), frames whose children cleanly stack or tile get auto layout with the drawn gap and inset, and the page stacks its sections. Frames whose layers overlap on purpose, a hero collage for instance, are left as drawn and listed. Your original is untouched.
2. Let the app fix the file itself, if your AI app has its own Figma tools.
3. Do it in Figma and tell the app when you are done.

You can also tell the app to convert the frame as drawn. It then builds the sections at fixed positions, which looks right at the design’s width and nowhere else.

A structured page with a freeform section or two converts normally: those overlap on purpose and only draw a warning.

Names and layers that help

• Name top-level frames after what they are: Hero, Features, Pricing, FAQ. The app reads names when it picks widgets.
• Keep each section a single top-level frame. A section split across two frames becomes two sections.
• Put repeated items (cards, plans, testimonials) in frames of the same shape. Repeater widgets are recognised by that.
• Use text styles and colour styles. Design system sync can turn them into the site’s globals.

Troubleshooting

The analysis lists a font the site cannot load. Elementor would fall back to the theme font. Either add the font on the site (Elementor → Custom Fonts, or a plugin) or accept the fallback.

“Frame wider than the site’s content width.” The page is built at the design’s width and squeezed by the site’s container setting. Design at the site’s content width, or raise it in Elementor’s site settings.

The copy has sections marked as left as drawn. Those overlap. Open the copy, give them auto layout by hand where you can, and convert the copy.