Figma to Elementor
Convert Figma designs into Elementor templates with full style preservation. Colors, typography, gradients, shadows — all mapped automatically to native Elementor JSON. Supports Flexbox Containers, component breakdown, and one-click import from Figma URLs.
by Hordekiller · github.com/hordekiller/figmatoelementor · website
★ 7stars
1forks
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/hordekiller/figmatoelementor/archive/refs/heads/main.zipFrom the readme
Figma to Elementor
Convert Figma designs into editable Elementor templates — programmatically, faithfully, at scale.
Overview
Figma to Elementor bridges the gap between design and development. It fetches Figma frames via the REST API, translates visual properties — colors, typography, spacing, borders, shadows, gradients — into native Elementor JSON, and saves them as fully editable templates.
Requirements
| Requirement | Version |
|---|---|
| WordPress | 6.6+ |
| PHP | 8.0+ (8.2+ recommended) |
| Elementor | 3.27+ (Free) |
| Elementor Pro | 3.27+ (optional — needed for Dynamic Tags) |
| Figma | any plan (PAT required) |
Features
| Area | Detail |
|---|---|
| Import | One-click Figma URL → Elementor template; auto-extract file key, frame browser, section review |
| Style mapping | Colors (solid/gradient), borders (linked & per-side), shadows (drop & inner), opacity, typography |
| Container layout | Auto-layout → Flexbox container; padding, gap, cross-axis alignment, absolute positioning |
| Smart widgets | FAQ → Accordion, Gallery → Basic Gallery, Carousel → Image Carousel |
| Component detection | 18 component types from layer names (English + Persian), CSS class auto-tagg
Read the full README on GitHub →