How to Export Figma to Webflow: Step-by-Step Tutorial (2025)

Want to turn your Figma designs into a live Webflow site? This step-by-step guide walks you through the entire process using UpBuilder AI.

What You'll Need

• A Figma account with your design ready
• A Webflow account (free tier works)
• UpBuilder Figma plugin (free to install)

Step 1: Install the UpBuilder Figma Plugin

1. Open Figma and go to the menu (Figma icon, top-left)
2. Click "Plugins" then "Manage plugins"
3. Search for "UpBuilder"
4. Click "Install"

Step 2: Select Your Frames

In your Figma file, select the frames you want to export. You can select multiple frames at once - UpBuilder will process them all together.

Tip: Select entire page sections rather than individual elements for best results.

Step 3: Run the Plugin

1. Right-click and select "Plugins" > "UpBuilder"
2. Or use the keyboard shortcut if you've set one up
3. The plugin window will open showing your selected frames

Step 4: Export to UpBuilder

1. Click "Continue" in the plugin
2. Wait for the AI to analyze your design (usually 30-60 seconds)
3. Review the generated preview
4. Click "Export to Webflow"

Step 5: Import to Webflow

1. In Webflow, open your site in the Designer
2. Click the Apps icon (left sidebar) or press "E"
3. Search for "UpBuilder" and open it
4. Paste your export token and click "Connect"
5. Click "Start Import"

Step 6: Review and Publish

Your design is now in Webflow! Review the imported elements, make any final adjustments, and publish your site.

Common Questions

Does my Figma design need Auto Layout?

No! UpBuilder works with any Figma design, with or without Auto Layout.

Will it be responsive?

Yes. UpBuilder automatically generates styles for desktop, tablet, and mobile breakpoints.

What about fonts and images?

Images are automatically uploaded to Webflow. Fonts are matched to Webflow's available fonts or Google Fonts.