A surprising amount of agency time still goes into translating a Figma frame into an Elementor page by hand. The conversion is mechanical, the QA is repetitive, and nobody enjoys it. Here is the pipeline I built to take a Figma URL on one side and produce an editable Elementor draft on the other.
Why Elementor as the target
Elementor is what the client will actually edit after launch. Generating raw HTML is a dead end the moment somebody wants to move a section. Generating Elementor JSON keeps the editing surface alive and means the human can still take over.
The mapping from Figma layers to Elementor widgets is messier than the marketing makes it sound, but it is tractable once you commit to a constrained widget set and a strict layout grammar.
The pipeline, end to end
Figma OAuth pulls the file. A normalisation pass flattens auto-layout into a section/column/widget tree. A mapper converts each node into the closest Elementor widget, with explicit fallbacks for shapes that do not translate cleanly. A WP connector pushes the resulting JSON into a draft page.
Then comes the part everyone skips: a Playwright run loads both the Figma frame screenshot and the new Elementor page, and pixelmatch reports the visual delta. Below a threshold, the draft is promoted. Above, it is flagged for human review.
- Figma OAuth + file fetch
- Auto-layout flattening with a strict layout grammar
- Widget mapper with fallbacks for unsupported shapes
- Elementor JSON writer + WordPress connector
- Playwright + pixelmatch QA gate before publish
The parts that still need a human
Microcopy and SEO metadata are not in the Figma file in any reliable form. Animation choices, hover states, and accessibility audits all need a person. The pipeline saves the first 70% of the work and lets the human focus on the parts that actually need taste.
The honest framing for clients is "we automate the mechanical part of the build so we can spend more time on the part you care about". Nobody is upset by that pitch.
Takeaway
Design-to-code automation is a real productivity unlock when the target is an editable CMS, not raw HTML. Keep the human in the loop where taste matters, and let the pipeline eat the boring layout work.
