> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.
# Step by Step Introduction of Figma to Elementor Using UiChemy
A complete walkthrough of exporting a Figma design as an Elementor template with UiChemy.
Figma has become a go-to design tool for many designers, offering a collaborative and versatile platform. With UiChemy, you can take your Figma designs and export them as an Elementor template to use directly in the Elementor website builder.
## Before You Start
### Recommended Server Requirements
Make sure your server has these settings for a smooth template import in Elementor:
- **PHP Time Limit** (`max_execution_time`): 300s
- **PHP Memory Limit**: 256M
- **PHP Upload Limit**: >100M
- **max_allowed_packet** for MySQL: >5MB
You can make these changes yourself, or contact your hosting provider to increase the PHP time limit, memory limit, and upload limit.
### Required Elementor Settings
Make sure the free **Elementor** plugin (3.11.5 or above) is installed and activated.
Before importing, enable the **Elementor Flexbox container**: go to **Elementor → Settings → Features**, select **Active** from the Flexbox Container dropdown, and save.
Make sure **SVG file upload** is enabled: go to **Elementor → Settings → Advanced**, select **Enable** from the Enable Unfiltered File Uploads dropdown, and click **Save Changes**.
Set your permalink structure to **Post name**: go to **Settings → Permalinks → Permalink structure**, select **Post name**, and save.
## Choosing Your Workflow
Go to **Resources → Plugins**, search for **UiChemy**, and click on it, this opens the UiChemy plugin interface. Log in to your account.
Choose **Classic Mode** ("Full control over every step") from the mode picker, and click **Start**.
Pick a workflow: **Step by Step Method** (recommended for new users, walks you through tagging and every stage from prep to publish), **Quick Conversion** (for experienced users who already know the tagging flow, fewer steps), or **Templates** (start from an optimized section instead of your own design).
## Step by Step Method
This walkthrough follows **Step by Step Method**, which takes you through 8 steps.
A full Classic Mode conversion using Step by Step Method, from optimizing your design to opening the imported page
First time seeing the **Select Site** step above? See [Connect Your Site](/introduction/connect-your-site) for how to get your Connection Link and link your WordPress site.
Choose which widget set to convert into: **Elementor Default**, or **Editor V4 [Alpha]** if you're using Elementor's newer atomic editor. Click **Select pages** to open a picker with checkboxes for your Figma file's pages and frames, pick one or more. Each selected page appears as a card, click the **+** tile to add another. Click **Next** when you're done.
UiChemy checks your design for multi-layer media (icons, illustrations, or images built from several layers) that convert more cleanly as a single flattened layer.
- If your design is already optimized, you'll see a confirmation and can continue straight to **Next**.
- If not, you'll see the specific layers that need attention (for example, a layer named `avatar-pile`). Click **Lock** on each one, or **Lock All** to flatten every flagged layer at once. Use **Rescan** if you've since made changes in Figma.
Decide how much manual tagging control you want:
- **Auto Widget Selection**, UiChemy automatically uses the 4 core widgets, Container, Heading, Text, and Image, to convert your entire design.
- **Manual Widget Tagging**, tag elements to more widgets beyond the core 4, like Button, Carousel, or Gallery, based on your design's needs.
- **Atomic Elements (v4)**, convert to Elementor's newer v4 Atomic Editor instead, no manual tagging, UiChemy maps each layer to the closest atomic primitive automatically. See [Atomic Elements (v4)](/tagging-library/elementor/atomic-elements) for how this works.
This step opens the **Manage Auto Layout** panel. Classic Mode needs your design in Auto Layout to tag it accurately.
- **It's already in Auto Layout**, your design doesn't need further optimization before widget tagging, continue as-is.
- **Convert to Auto Layout**, UiChemy applies Auto Layout automatically to prepare it for widget tagging. This creates a duplicate of your selection rather than changing your original design.
This same step also lets you optimize your design before tagging, toggle between:
- Select your design source from the dropdown: **Built from Scratch**, **Relume**, **Google Stitch**, **Other**, or **Figma Make** (coming soon).
- UiChemy checks your selection and tells you whether it needs optimization or is already in auto layout.
- If a frame isn't in Auto Layout, UiChemy shows a message for it. Click **Convert to Auto Layout** (Beta) to apply it.
**Example:** For a frame named **Frame 56**, you'll see **"'Frame 56' needs auto-layout"**.
Work through a guided checklist of specific issues to fix, grouped by category:
- **Media & Vectors** -> Stroked Vectors & Shapes, Flattenable Vector Groups, and Unlocked Image & Icon Layers, each flagged by priority (Low, Medium, High).
- **Layer Cleanup & Improvements** -> Clipped Nodes Outside Bounds, Invisible or Hidden Layers, and Incorrect Layer Constraints.
- **Shape Cleanup** -> unlocks as you work through the checklist.
- **Frames & Groups Cleanup** -> unlocks as you work through the checklist.
- **Text & Divider Cleanup** -> unlocks as you work through the checklist.
- **Auto Layout** -> unlocks as you work through the checklist.
Open a check to scan it. Use **Check**, **Ignore**, or **Check All** on the listed layers, **Rescan** to scan again, and **Next** to move on. A category reaches **100%, No issues found** once it's done. See [Manual Optimization](/design-optimization/auto-layout/convert-your-design#manual-optimization) for every button and check.
Skip either mode if your design is already well optimized.
Manually tag Figma layers to specific Elementor widgets, beyond the core widgets set in Step 3. Click a layer in Figma, then select the matching widget here. Choose which widget library to tag from:
- **Elementor Widgets**, the free, built-in Elementor widgets
- **Elementor Pro Widgets**, available if Elementor Pro is installed
- **The Plus Widgets**, from The Plus Addons for Elementor
A running count (**Currently: N Tagged Frames**) shows how many layers you've tagged so far. Use **Hide Tagging** / **Show Tagging** to toggle a visual overlay on the Figma canvas showing which layers are already tagged.
Choose how your design adapts across devices:
- **Smart Auto Responsive** (recommended), UiChemy applies font sizes, spacing, and layout values automatically, based on proven design practices. Best for most standard websites.
- **Manual Responsive Setup**, set your own font size, line height, padding, and flex gap values per breakpoint. See [Responsive Layout](/classic-mode/responsive-manager/responsive-layout) for the full walkthrough.
If you're using a design system, sync your Figma styles to Elementor's global classes and variables. Connect the site you want to synchronize, then set:
- **Global Container Width** -> per breakpoint, Desktop, Tablet, and Mobile by default, plus Widescreen, Laptop, Tablet Landscape, and Mobile Landscape from **+ Add Breakpoints**.
- **Global Colors** -> your Figma color styles, synced to Elementor's global color variables.
- **Global Typography** -> your Figma text styles, synced to Elementor's global typography variables.
- **Global Padding** -> a shared inner spacing value.
- **Global Border** -> a shared border style.
- **Global Border Radius** -> a shared corner-rounding value.
- **Global Gap** -> a shared flex/grid spacing value.
- **Global Shadow** -> a shared drop shadow style.
See [Figma Style Sync](/classic-mode/figma-to-elementor/global-style-sync) for the full walkthrough of container width, colors, and typography.
Set your export options before converting:
- **Export images**: choose whether UiChemy exports images itself or uses Figma's own exported images instead.
- **Image format and compression** *(Beta)*: pick the output image format and how much it's compressed.
- **Export scale**: sets the pixel density images export at.
- **Widths in percentages**: choose whether element widths export as percentages instead of fixed pixel values.
- **Minimum word count**: the number of words text needs before UiChemy tags it as an editable Editor element.
- **RTL language export** *(Beta)*: export the layout for right-to-left languages.
- **Auto detect SVGs using AI**: listed here but marked **Coming Soon**, not yet available.
Click **Convert** when you're ready.
## Quick Conversion
If you already know the tagging flow, choose **Quick Conversion** instead of Step by Step Method back at the mode picker. After Step 1 (Select Page), you'll land on a menu with the same steps, in any order you like:
- **Optimize Multi-Layer Media**
- **Convert to Auto Layout**
- **Tag Widgets**
- **Responsive Manager**
- **Sync Global Styles**
- **Conversion Settings**
Open only the ones you want to adjust, or click **Convert** directly to use the defaults.
## Export Your Design
### Choose Your Export Method
Based on your selection, UiChemy automatically decides which export methods are available. If you selected the main outer frame, you'll see two options:
Directly copy and paste the design into Elementor.
- Click **Copy**, and wait for conversion to finish.
- Click **Copy to Clipboard** to confirm, a checkmark appears once it's copied.
- Paste it into the Elementor editor with **right-click → Paste from other site**, or **Ctrl+V**.
See [Copy to Clipboard](/classic-mode/copy-mode/workflow) for the full workflow.
Export the design directly to your WordPress site, or download and upload the template manually. See [Direct Import](/classic-mode/getting-started/direct-import) for the full workflow.
Both options are also available if you selected an inner section rather than the main outer frame.
### Downloading Your Template
Which method you use here depends on your builder.
1. Click **Direct Import**.
2. Go to the **Download JSON** tab.
3. Select the pages you want to download, then click **Download All**, or download individual pages using the download icon beside each one.
4. Save the template as a JSON file.
Using [Direct Import](/classic-mode/getting-started/direct-import) instead is recommended, to reduce manual work.
When using the Figma to Gutenberg plugin, you'll see a **Copy Code** option instead. Make sure you've installed and activated both the UiChemy and The Plus Addons for Block Editor plugins, then:
1. Click **Copy Code**.
2. On the next screen, click the copy icon beside the page.
3. Go to your WordPress dashboard and add a new page.
4. Click the purple **Plus Paste** button at the top.
5. In the popup that opens, press **Ctrl+V**, the template is imported onto your page.
## Import and Use in Elementor
### Import Template in Elementor
From the WordPress Dashboard, go to **Templates** and click **Import Templates**.
Click **Browse**, select your exported template, then click **Import Now**. Depending on your design's complexity and file size, this may take a moment.
Click **View** to check the imported template.
Open the template by clicking **Edit with Elementor**.
To make sure the layout displays correctly, go to **Settings** in the Elementor editor panel and set **Page Layout** to **Elementor Full Width** or **Elementor Canvas** (only if you're building a single-page site with header, footer, etc.).
If your layout contains a common sidebar, keep the page layout at default and add the sidebar as a separate template. If your layout contains common sections like a header or footer, create separate templates for them (e.g. using the free Nexter theme) and reference them from your current template.
### Use the Template
Add a new page, save it, then click **Edit with Elementor**.
Click the folder icon (**Add Template**).
In the popup, go to the **My Template** tab, find your template, and click **Insert** to add it to the page.
When prompted to apply the template's settings to the page, click **Apply**, the page now shares the same page settings as the template.
For any issue, see [Troubleshooting](/classic-mode/troubleshooting/blank-template).
## Frequently Asked Questions
Check that the UiChemy plugin is installed and activated on your WordPress site, and that your Connection Link is entered correctly in the Direct Import popup. A common cause is pasting an old or incorrect link.
No, UiChemy only converts designs from Figma.
A PHP Time Limit of 300 seconds, PHP Memory Limit of 256MB, PHP Upload Limit over 100MB, and MySQL's max_allowed_packet over 5MB.
Direct Import, it reduces manual work by uploading your design directly to your WordPress site.