🎨 Import Pixel-Perfect Designs with WeWeb’s Figma to No-Code Plugin

Release date:

September 3, 2025

WeWeb now has its own dedicated Figma plugin!

This gives you more control, better compatibility with the Editor, and exciting new ways to bring your designs into WeWeb.

Check out the details 👇

How to install the plugin

To install the WeWeb - Figma to no-code plugin:

In Figma, go to “Actions” → “Plugins & widgets”
Search for WeWeb
Select the “WeWeb - Figma to no-code” plugin
Click “Run”

‍

Copy your Figma design to clipboard

To copy your Figma design:

Open the plugin
Select the design that you want to import
Click “Export to WeWeb”
Click “Copy to clipboard”

‍

How to import your Figma design into WeWeb

To import your Figma design to WeWeb:

In the top navbar of the WeWeb Editor, click “More” → “Import from Figma”
In the Welcome screen, click “Copy from clipboard”
Check the design tokens, typography and spacing, and click “Next”
In the Images section, select whether you want to upload new images or map the existing ones in your project
In the Fonts section, check the fonts that were imported
Review the import summary and click “Finish” to finalize the import

‍

How to bring Figma variables and styles into WeWeb

Sometimes you don’t want to import the entire design file, you just need the tokens (colors, fonts, spacing, variables, styles) to keep things clean and flexible.

Now you can import variables and styles only:

Open the plugin and go to the “Design” tab
Click “Extract All Variables”

‍

You’ll see two modes for extracting:‍

‍Fast mode: extracts all local Figma variables, local paint & effect styles, typography, and font families.‍
Deep scan mode: required to find the library paint/effect styles (external colors and shadows) and to detect inferred variables.

How to reuse Figma components inside WeWeb

You can also import and manage components to keep them consistent in WeWeb, eliminate duplicates, and update designs faster with a single source of truth.

To manage components and mappings:

Open the plugin and go to the “Components” tab
Enter the API key of your WeWeb workspace

‍

You can find the API key if you go to your WeWeb dashboard → “Settings” → “Private Key.”

From there, you can import and map your components.

Check out our docs for a step-by-step tutorial.