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.

1. Paste a Figma URL        →  auto-extract file key
2. Browse frames             →  preview thumbnails
3. Click Import              →  converts to Elementor template
4. Edit with Elementor       →  every section independently editable

Requirements

Features

Languages

All .po files are ready for translation via any .po editor (Poedit, GlotPress). Compiled .mo files are generated on build.

Installation

1. Get a Figma PAT

Settings → Account → Personal Access Tokens in Figma → generate new token → copy.

2. Install the plugin

Option A — Dashboard: Download from Releases → Plugins → Add New → Upload Plugin → activate.

Option B — CLI:

cd wp-content/plugins/
git clone https://github.com/Hordekiller/FigmaToelementor.git hello-elementor-figma-sync

Activate from Plugins.

3. Configure

Figma Sync → Settings → paste PAT → Save.

4. Import

Figma Sync → Dashboard → paste a Figma URL → Load Frames → select a frame → Import → Edit with Elementor.

Project Status

✅ Done (v1.3.3)

⏳ Incomplete / Needs Work

Quick Start (Developer)

$renderer = HelloFigma\Plugin::instance()->get_renderer();
$template = $renderer->convert_file('file-key', 'node-id');

$manager = HelloFigma\Plugin::instance()->get_template_manager();
$post_id = $manager->save_template($template, 'My Import', 'file-key');

In Elementor editor (browser console):

await helloFigmaEditor.importFromFigma('file-key', 'node-id');

$e.run('hello-figma/import-template', {
    template: { title: 'Hero', content: [{ elType: 'container', ... }] }
});

Project Structure

FigmaToelementor/
├── admin/                        # Dashboard UI
│   ├── css/admin.css
│   ├── js/admin.js
│   ├── js/editor.js              # Elementor editor integration
│   └── views/                    # PHP templates (dashboard, settings, etc.)
├── dynamic-tags/                 # Elementor Pro dynamic tags (Figma text/field)
├── includes/                     # Core engine
│   ├── class-plugin.php          # Bootstrap / entry point
│   ├── class-elementor-renderer.php   # Orchestrator: Figma node tree → Elementor JSON
│   ├── class-figma-api.php            # Figma REST client + crypto + caching
│   ├── class-template-manager.php     # Template CRUD (save, export, delete)
│   ├── class-style-sync.php           # Figma styles → Elementor Global Colors/Fonts
│   ├── class-admin.php                # AJAX handlers (23 endpoints)
│   ├── class-asset-manager.php        # Script/style registration
│   ├── class-compatibility.php        # Environment checks
│   ├── class-image-handler.php        # Image download + attachment + chunking
│   ├── class-logger.php               # PSR-3-style structured logger
│   ├── class-nodefilter.php           # Visibility filter (→ should_render)
│   ├── class-typeresolver.php         # Figma type → Elementor elType/widgetType
│   ├── class-styleextractor.php       # Background, border, shadow, radius, typography
│   ├── class-layoutextractor.php      # Container layout, flex sizing, dimensions
│   ├── class-widgetconverters.php     # Carousel/Accordion/Gallery detection + build
│   ├── class-positioning.php          # Absolute positioning + rotation warning
│   └── class-jsonnormalizer.php       # JSON contract: normalize + validate
├── widgets/                      # Custom Elementor widgets
├── languages/                    # 10 translations (.po)
│   ├── hello-figma-fa_IR.po
│   ├── hello-figma-de_DE.po
│   ├── hello-figma-en_US.po
│   └── ...
├── tests/                        # CLI test suites (no PHPUnit)
│   ├── helpers-test.php          # 40 tests
│   ├── type-resolver-test.php    # 24 tests
│   ├── widget-converters-test.php # 21 tests
│   ├── json-normalizer-test.php  # 21 tests
│   ├── snapshot-test.php         # 10 golden scenarios
│   ├── mock-figma-api.php        # MockFigmaAPI for snapshot tests
│   ├── wordpress-stubs.php       # Minimal WP function stubs
│   └── run-all.sh                # Runner (exit 1 on any failure)
├── .github/
│   ├── CONTRIBUTING.md
│   └── workflows/ci.yml          # PHPCS + PHPStan on push/PR
├── phpcs.xml
├── phpstan.neon
├── phpstan-baseline.neon
├── hello-elementor-figma-sync.php  # Plugin entry
├── uninstall.php
├── LICENSE
├── README.md
└── readme.txt

Architecture

The conversion pipeline follows a strict single-responsibility chain:

Figma REST API
     │
     ▼
Figma_API (HTTP client + cache + crypto)
     │
     ▼
Elementor_Renderer (orchestrator)
     ├── NodeFilter          → skip invisible/zero-opacity nodes
     ├── TypeResolver        → Figma node type → [elType, widgetType]
     ├── WidgetConverters    → try_build_carousel/accordion/gallery
     ├── StyleExtractor      → background, border, shadow, radius, typography
     ├── LayoutExtractor     → container padding/gap/sizing
     ├── Positioning         → absolute position → Elementor position:absolute
     ├── collapse_empty_wrappers, maybe_transfer_element_id
     └── JsonNormalizer      → normalize + validate final JSON

Template_Manager (save/export/delete) ← JsonNormalizer guards writes

Each extractor class is stateless — it receives a stdClass $settings and returns modifications. No side effects, no shared state.

Testing

All tests run as standalone PHP CLI files (no PHPUnit, no Composer dependency):

# Run all 5 suites (97 tests)
bash tests/run-all.sh

# Run a specific suite
php tests/helpers-test.php
php tests/type-resolver-test.php
php tests/widget-converters-test.php
php tests/json-normalizer-test.php

# Snapshot tests
php tests/snapshot-test.php          # verify
php tests/snapshot-test.php --update # overwrite golden files

Snapshot golden files live at project_audit/snapshots/golden/ (gitignored — generated locally). Scenarios define mock Figma nodes in project_audit/snapshots/scenarios/.

Note: Snapshot tests validate stability (output hasn't changed since golden was recorded), not correctness — golden files are self-generated on first run from the very code under test. Always pair snapshot verification with unit tests that assert specific values.

Known Limitations

Contributing

We welcome PRs — especially for the items listed in Project Status above.

git clone https://github.com/Hordekiller/FigmaToelementor.git
cd FigmaToelementor
git checkout -b feature/your-feature

# Make changes, then verify:
php tests/run-all.sh

# If you add/modify PHP, check static analysis:
vendor/bin/phpstan analyse --level=6

# Submit a PR
git commit -m "feat: your change"
git push origin feature/your-feature

Read CONTRIBUTING.md for full details.

License

GNU General Public License v2.0 or later — see LICENSE.

All contributions are licensed under GPLv2+. Copyright 2026.

Report Bug · Request Feature · Contribute