Getting‐Started

Getting Started

This guide walks you through your first Figma-to-Elementor import.

Step 1: Configure API Access

1. Go to Figma Sync → Settings
2. Generate a Personal Access Token at Figma settings
3. Paste the token in the Figma Personal Access Token field
4. (Optional) Set a default file key
5. Click Save Settings

Note

Your token is encrypted at rest using AES-256-CBC with your WordPress salt key.

Step 2: Open Your Figma Design

1. Open your design in Figma
2. Copy the URL from your browser. It should look like: https://www.figma.com/file/abc123DEF/My-Design or https://www.figma.com/design/abc123DEF/My-Design

Step 3: Import from Dashboard

1. Go to Figma Sync → Dashboard
2. Paste your Figma URL or file key in the Step 1 field
3. Click Load Frames — the plugin fetches the file structure from Figma
4. A list of frames appears. Select one to preview
5. In Step 2, review the sections
6. Click Confirm & Import

Step 4: Monitor Progress

A real-time progress bar shows:

• 10% — Fetching design from Figma
• 30% — Converting sections
• 40% — Downloading images (with per-image progress)
• 80% — Saving template
• 100% — Complete!

Step 5: Edit with Elementor

Once complete, click Edit with Elementor to open your template in the Elementor editor.

Tip

Non-auto-layout Figma frames are converted with absolute positioning automatically, preserving your exact pixel placement.