Architecture

Architecture

Overview

The plugin follows a modular architecture with a single bootstrap file and dedicated classes for each concern.

graph TD
    A[hello-elementor-figma-sync.php] --> B[Plugin]
    B --> C[Figma_API]
    B --> D[Elementor_Renderer]
    B --> E[Admin]
    B --> F[Template_Manager]
    B --> G[Image_Handler]
    B --> H[Style_Sync]
    B --> I[Asset_Manager]
    B --> J[Compatibility]
    B --> K[Logger]
    E --> L[Views]
    D --> M[Widgets]
    H --> C
    G --> C

Loading

File Structure

hello-elementor-figma-sync/
├── hello-elementor-figma-sync.php    # Bootstrap + autoloader
├── uninstall.php                     # Cleanup on deletion
├── includes/
│   ├── class-plugin.php              # Main plugin class
│   ├── class-figma-api.php           # Figma REST API client
│   ├── class-elementor-renderer.php  # Figma → Elementor converter
│   ├── class-admin.php               # Admin UI + AJAX
│   ├── class-template-manager.php    # Template CRUD
│   ├── class-image-handler.php       # Image downloads
│   ├── class-style-sync.php          # Style synchronization
│   ├── class-logger.php              # Debug logging
│   ├── class-compatibility.php       # Dependency checks
│   └── class-asset-manager.php       # CSS/JS assets
├── widgets/
│   ├── class-figma-container.php     # Container widget
│   ├── class-figma-button.php        # Button widget
│   ├── class-figma-image.php         # Image widget
│   ├── class-figma-heading.php       # Heading widget
│   ├── class-figma-icon-box.php      # Icon box widget
│   └── class-figma-section.php       # Section widget
├── dynamic-tags/
│   ├── class-figma-field.php         # Field dynamic tag
│   └── class-figma-text.php          # Text dynamic tag
├── admin/
│   ├── css/admin.css                 # Admin styles
│   ├── js/admin.js                   # Admin scripts
│   └── views/
│       ├── dashboard.php             # Main dashboard
│       ├── templates.php             # Template list
│       ├── settings.php              # Settings page
│       └── style-sync.php            # Style sync page
├── languages/                        # Translation files
├── phpstan.neon                      # PHPStan config
└── readme.txt                        # WordPress readme

Class Details

Plugin (class-plugin.php)

Singleton that initializes all services and registers hooks. Entry point for the entire plugin.

Figma_API (class-figma-api.php)

REST client for the Figma API:

• Token management (encrypted storage)
• Rate limiting (0.5s delay between requests, max 3 retries on 429)
• Caching via WordPress transients (filterable TTL per context)
• Endpoints: files, nodes, styles, images, variables, team styles

Elementor_Renderer (class-elementor-renderer.php)

The core converter. Traverses Figma's node tree and produces Elementor-compatible JSON:

• Frames → Containers (Flexbox with direction, alignment, gap)
• Text → Heading/Button widgets (typography from Figma styles)
• Rectangles with fills → Image widgets
• Groups → Icon Box widgets
• Non-auto-layout frames → Absolute positioning
• Gradients → Elementor gradient controls
• Borders/Shadows → Elementor border/shadow controls
• Strokes → Border width/color

Admin (class-admin.php)

Handles the admin UI and all AJAX endpoints:

• Settings form (token, file key — with nonce + capability checks)
• Import workflow (fetch structure → preview → convert → save)
• Progress tracking via transients
• Template management (delete, export)
• Style sync triggers

Template_Manager (class-template-manager.php)

Manages Elementor library posts:

• Create templates with proper meta (source, file key, figma data)
• Elementor CSS regeneration on save
• Delete (verifies source is Figma first)
• Export as JSON with full wrapper data

Image_Handler (class-image-handler.php)

Downloads images from Figma's CDN:

• Batch download with progress callback
• WordPress media library integration
• Placeholder resolution (figma-image://... → attachment URLs)
• Fills endpoint for image data

Style_Sync (class-style-sync.php)

Syncs Figma design system to Elementor global styles:

• Colors (FILL styles → Elementor global colors)
• Typography (TEXT styles → Elementor system typography)
• Elementor Kit tab integration

Data Flow: Import

sequenceDiagram
    User->>Admin: Paste Figma URL
    Admin->>Figma_API: get_file(file_key)
    Figma_API->>Figma: GET /v1/files/{key}
    Figma->>Figma_API: File JSON
    Admin->>User: Display frames
    User->>Admin: Select frame + click Import
    Admin->>Figma_API: get_file_nodes(file_key, [node_id])
    Admin->>Elementor_Renderer: convert_file(file_key, node_id)
    Elementor_Renderer->>Figma_API: get_styles(file_key)
    Elementor_Renderer->>Figma_API: get_images(file_key, node_ids)
    Elementor_Renderer-->>Admin: Elementor JSON data
    Admin->>Image_Handler: resolve_image_placeholders()
    Image_Handler->>Figma_API: get_images() for each placeholder
    Image_Handler-->>Admin: Data with resolved URLs
    Admin->>Template_Manager: save_template(data, title, file_key)
    Admin->>User: Success + Edit link

Loading

Hooks

Actions

• hello_figma_api_error — triggered on Figma API errors

Filters

• hello_figma_cache_ttl — customize cache TTL per context (file, nodes, styles, images, variables, team_styles, thumbnail)
• hello_figma_api_timeout — customize API request timeout (default 120)