Docs

Getting Started with UpBuilder

Convert your Figma designs to Webflow or Elementor in minutes. No auto layout required.

Prerequisites

  • A Figma account (free or paid)
  • An UpBuilder account (sign up free)
  • Your design in Figma (any design - no auto layout needed)
1

Install the Figma Plugin

Open Figma and install the UpBuilder plugin from the Figma Community:

Install UpBuilder Plugin

After installing, you can access it via Plugins → UpBuilder in Figma's menu, or right-click on the canvas and select Plugins → UpBuilder.

2

Select Your Frames

In Figma, select the frames you want to convert. These could be:

  • A single page design (hero, features, footer in one frame)
  • Multiple section frames (separate frames for each section)
  • A complete multi-page website
Pro tip: Organize sections into separate top-level frames. UpBuilder will convert each frame into a reusable section.
3

Open the Plugin and Configure

With your frames selected, open the UpBuilder plugin. You'll see:

  • Selected frames - thumbnails of what will be exported
  • Export options - responsive, hover effects, animations
  • Platform - Webflow or Elementor

Configure the options based on your needs:

  • Responsive - generates tablet and mobile breakpoints
  • Hover effects - adds subtle hover transitions to buttons/links
  • Scroll animations - enables scroll-triggered reveal effects
4

Export and Paste

Click the Export button in the plugin. This copies the export data to your clipboard.

Then go to your UpBuilder dashboard and paste:

Ctrl + V
or
Cmd + V
(on Mac)

Your designs will appear as cards. You can select which ones to include in your build.

The export data expires after 1 hour. If you see an "expired" message, just re-export from Figma.
5

Let Claude Build Your Site

Add any instructions in the text field (optional) and click Build. Claude will analyze your designs and generate:

  • Clean, semantic HTML structure
  • Client-First CSS classes (for Webflow)
  • Responsive breakpoints (if enabled)
  • Hover states and interactions

You can watch the build progress in real-time. The preview updates as sections are completed.

6

Export to Webflow or Elementor

Once the build is complete, click the Export button:

For Webflow

Connect your Webflow account and push directly to a site. All classes, styles, and structure are preserved.

For Elementor

Download the export package and import it into WordPress via Elementor's template system.

Next Steps

Common Questions

Do I need auto layout in Figma?

No! UpBuilder works with any Figma design. Our AI analyzes your layout visually and creates proper responsive CSS without requiring auto layout.

What if my export expires?

Export data expires after 1 hour for security. Simply open the Figma plugin again, make sure your frames are selected, and click Export.

Can I edit the build afterwards?

Yes! After the initial build, you can chat with Claude to make changes: "Make the hero taller", "Change the button color to blue", etc.