AI Express ModeHow It Works

How AI Express Mode Works (Conversion Workflow)

The 7 steps of an AI Express Mode conversion, from picking a design to opening your finished page.

Once you've installed the Figma plugin and chosen AI Express Mode, here's what happens, step by step.

A full AI Express Mode conversion, from selecting a frame to opening the finished page

First time seeing the Connect site step above? See Connect Your Site for how to get your Connection Link and link your WordPress site.

Step 1: Select Design

Click Select a frame to open a picker showing your Figma file's pages and frames as thumbnails with checkboxes. Check the one you want to convert, then click Done. It works best on optimized, auto-layout designs (see Design Optimization).

You'll land back on Step 1 with a large preview of your chosen page, with an X to remove it if you picked the wrong one. Click Next to continue, or Back to pick a different one. After you click Next, UiChemy checks your frame and reads its structure, you'll see an "Analyzing your design" step with an "Assessing design health" progress indicator while it works.

The health check ends in one of three ways:

  • Your design is in good shape, UiChemy moves on by itself.
  • We need to tidy up your design first, some areas use groups or shapes as backgrounds. Click Tidy up & continue and UiChemy makes an improved copy to convert, so your original design stays exactly as it is.
  • Your design isn't ready yet, the health check rates it as poor and won't convert it. You'll see each reason with what to fix. Fix them in Figma, then try again. See Troubleshooting.

If the check flags an issue, select the main (top-level) frame, not an inner layout or nested element, and put your design in Auto Layout first.

Step 2: Connect Site

Choose the WordPress site to publish your page to. This uses the same connection as Live Import.

Pick your site from the Select Site list, each connected site has its own edit and delete icons if you need to update or remove it. Don't see it? Click Add another site (requires UiChemy Pro, connecting more than one site is a Pro feature). First time here? Set up the connection once in Connect your site.

UiChemy then runs a quick Site Check to confirm your site is ready. WordPress, UiChemy, and Elementor must be present and active, and so must UiChemy Pro when your site reports it. Nexter Extension and Nexter Theme are optional rows that never block Next. When the required rows pass, click Next.

  • Your site isn't listed. Click Add another site (Pro), or set up the connection in Connect your site.
  • A Site Check item is missing or inactive. Use the Install, Activate, or Update button on that row, then re-check.

Step 3: Choose Setup

Decide how much of your site this conversion changes: Full Setup or Page Only.

Full Setup, tagged "Fresh sites" in the plugin, imports this page and sets up your global colors, typography, and the header and footer. Best for a fresh site. To save your header and footer as templates, UiChemy needs a theme builder: either Elementor Pro or the free Nexter Extension (the Nexter Theme is optional). If you have neither, Full Setup stays selectable, but a Theme Builder Missing popup offers a one-click Install Nexter Extension and a Continue anyway button, and your header and footer then import as sections on the page instead of site-wide.

Page Only imports just this page. Your existing colors, header, and footer stay untouched. Choose this when you're adding a page to a site that already has its branding set up.

Full Setup replaces your site's existing global colors, typography, header, and footer. Only use it on a new or empty site, if you're adding a page to a site that already has branding in place, use Page Only instead.

Building a brand-new site → Full Setup. Adding to an existing site you don't want to change → Page Only.

Step 4: Fix Gaps

Decide whether AI Express reproduces your design exactly, or tidies up small issues as it converts.

  • Keep my design exactly, your design is reproduced as you built it, nothing is changed. Choose this when your Figma file is polished and you want a faithful, one-to-one result.
  • Clean it up as it converts, AI Express fixes minor issues while converting, such as spacing, contrast, interactive states, and tap targets. Choose this when your design has small inconsistencies you'd like smoothed out.

For example, if two buttons in your Figma file have slightly different padding, Clean it up as it converts will even them out automatically. Keep my design exactly leaves them as-is.

Either way, the result is fully editable afterward, so you can still adjust anything in the Composer.

Step 5: Add Motion

Add smooth animations that enhance interactions without changing your layout or content. Motion is applied during the conversion. Pick one of three tiers:

  • Static, nothing moves. Everything sits still and the page loads fastest.
  • Subtle, small, tasteful movement. Sections fade in as you scroll, light and fast.
  • Immersive, rich movement. Shifting backgrounds, depth as you scroll, and effects that follow your cursor, kept smooth.

Want the lightest, calmest page → Static. Want a bit of life without distraction → Subtle. Want a rich, animated feel → Immersive. You can also add or change motion later by asking AI Chat inside the Composer.

Static suits a simple business page. Subtle fits most modern sites, portfolios, SaaS pages, service businesses. Immersive suits creative portfolios or premium marketing pages where extra motion supports the brand.

Step 6: Review

Your last check before the page is built. You'll see the frame you're converting plus a summary of your choices, each with an Edit link so you can jump back and change it: Site, Setup (Full or Page Only), Fix gaps (on or off), Motion tier, and Model. Below that, a Direction toggle sets the page's text direction, Left to right by default. A Credits line shows roughly how many Credits this conversion needs and how many you have left, click it to expand the breakdown.

The Credits estimate updates if you change your Setup, Fix gaps, Motion, or Model choice. Richer motion, Full Setup, Fix gaps, and the Best model typically cost more.

This is also where the plugin confirms your design is in Auto Layout. When it looks right, click Convert.

If the Auto Layout check flags an issue, fix your design in Figma, then return to this screen. See Design Optimization.

Click Edit on the Model row to choose how much power goes into the conversion:

  • Standard (default), great accuracy, faster, and uses fewer credits. Right for most pages.
  • Best, top accuracy for complex or detail-heavy designs. Uses more credits.

Start with Standard, and switch to Best when a design has lots of fine detail.

When you click Convert, UiChemy compares the estimate with your balance first. If you don't have enough, a You're out of credits popup shows how many credits the conversion needs and how many you have, with a Get more credits button. Nothing is spent until you have enough.

If you see "Could not connect," make sure the UiChemy plugin is active and your Connection Link is correct, then click Retry. See Troubleshooting if it persists.

Step 7: Build & Open Your Page

Once you click Convert, UiChemy builds your page. An overall progress percentage tracks the whole process while it works through a few stages:

  • Warming up the AI engine, getting ready to process your design.
  • Reading your design, parsing your frames, layers, and auto layout.
  • Checking site config, connecting to your WordPress site.
  • Syncing design tokens, your colors and typography.
  • Fixing the gaps, only if you chose Clean it up as it converts.
  • Uploading header and Uploading footer, only on a Full Setup.
  • Converting and publishing, mapping your design to widgets and pushing them to your site, section by section. You'll see a live list of which sections are composing, for example "Header composing," "Our Product composing," and so on.

You can Stop at any point.

When it finishes, UiChemy saves your page as a draft on your site. The screen also shows how much time you saved and how many Credits the conversion used, click that line to expand the breakdown. Click Open to see your converted page in your browser, ready to review and publish when you're happy.

Frequently Asked Questions

What to Do Next

Click Open to see your page on your site and publish it. Want to change something first? Pick a path below.