Features

Features

🎨 Design Conversion

Elementor Containers (Flexbox)

Figma frames are converted to Elementor Flexbox containers with proper direction, alignment, and spacing. The plugin maps:

• layoutMode → Flexbox direction (row/column)
• primaryAxisAlignItems → justify-content
• counterAxisAlignItems → align-items
• itemSpacing → gap
• padding → padding
• itemReverseZIndex → reverse column/row

Typography

Full typography preservation including:

• Font family (via Figma style lookup)
• Font size (px)
• Font weight
• Line height
• Letter spacing
• Text color
• Text alignment
• Text decoration

Colors & Gradients

• Solid colors — converted to hex or rgba
• Linear gradients — angle, stops, opacity preserved
• Radial gradients — position and radius mapped
• Opacities — respected via rgba or Elementor opacity controls

Borders & Shadows

• Border width — uniform or per-side (top/right/bottom/left)
• Border color — with opacity support
• Border radius — uniform or per-corner
• Box shadows — color, blur, spread, offset, inset

Buttons

Figma text nodes with button-like properties are detected and converted to Elementor Button widgets with:

• Text and link
• Background color with hover states
• Border radius
• Icon support
• Alignment

Headings

Figma text nodes are converted to Elementor Heading widgets with full typography settings.

Images

Figma rectangle nodes with fill images are converted to Elementor Image widgets. Images are downloaded from Figma's CDN.

Icon Boxes

Figma frames with icon-like elements are converted to Elementor Icon Box widgets with:

• Icon color and size
• Title and description
• Hover effects
• Alignment

📐 Absolute Positioning

Non-auto-layout Figma frames (where layoutMode is null) have their children positioned absolutely using Elementor's positioning controls. The plugin:

• Calculates relative position (x and y from bounding boxes)
• Sets _position: absolute (widgets) or position: absolute (containers)
• Configures _offset_orientation_h/v as start (for positive offsets) or end (for negative offsets)
• Sets explicit width/height from the bounding box
• Skips rotated nodes (rotation > 0.01) — these require relativeTransform matrix support (planned)

🔒 Security

Token Encryption

Your Figma Personal Access Token is encrypted at rest using AES-256-CBC with WordPress's wp_salt('AUTH_KEY') as the encryption key. Old plaintext tokens are automatically detected and encrypted on the next settings save.

Input Validation

All user inputs are sanitized with sanitize_text_field(). All AJAX endpoints verify both nonces and user capabilities (manage_options).

SQL Safety

All database queries use $wpdb->prepare() with parameterized queries. No raw SQL string interpolation.

⏱️ Real-time Progress

During import, a progress bar shows:

• Current stage (fetching, converting, downloading, saving)
• Percentage complete
• Per-image download progress (e.g., 3/15 images)

The progress is tracked via WordPress transients and polled via AJAX every 1.5 seconds.

🔄 Style Sync

Sync Figma design system styles to Elementor global styles:

• Colors — Figma fill styles → Elementor global colors
• Typography — Figma text styles → Elementor global typography
• Accessible from Figma Sync → Style Sync or the Elementor Kit settings

⚡ Performance

• Caching — All Figma API responses are cached via WordPress transients (file data, nodes, styles, images, variables)
• Configurable TTL — Filter hello_figma_cache_ttl to customize cache duration per context
• Configurable Timeout — Filter hello_figma_api_timeout to adjust API request timeout (default 120s)
• Rate Limiting — Built-in rate limiter respects Figma's 2 requests/second limit