Appearance

Import Figma designs ​

Bring your Figma designs directly into WeWeb with pixel-perfect accuracy, including colors, images, and fonts.

Add the Builder.io plugin ​

Before you can import designs, you'll need to add the Builder.io plugin to your Figma workspace:

  1. in Figma, click the Figma icon in the top left corner
  2. go to Plugins > Manage plugins
  3. search for "builder.io" and add the plugin to your workspace

Understanding Auto Layout ​

The quality of your import depends heavily on whether your Figma design uses Auto Layout. This concept is crucial for getting the best results.

What is Auto Layout? ​

Auto Layout is a Figma feature that controls how elements inside a frame position themselves relative to one another. Think of it like telling elements how to behave when things change around them.

Without Auto Layout, elements have fixed positions that don't relate to other elements. You can drag elements anywhere within a frame, which works fine in Figma but doesn't translate well to web development.

With Auto Layout enabled, elements position themselves relative to each other. You can control spacing, padding, and alignment, and elements move together as a cohesive unit. This creates layouts that work perfectly on the web.

How to enable Auto Layout ​

To turn on Auto Layout for any frame in Figma, select your frame and look for the Auto Layout section in the Design panel on the right. Click the Auto Layout button (it looks like a grid icon), then configure the direction (vertical or horizontal), padding, and gap between elements.

WHY AUTO LAYOUT MATTERS

Auto Layout tells your elements how to behave relative to each other, just like they would on a real website. Without it, the import tool has to guess how your design should work, which often leads to layouts that don't look quite right.

Name your layers for smart component detection ​

The Figma import can automatically detect and convert your design elements into functional WeWeb components based on how you name your layers in Figma. This saves you time by creating interactive elements instead of just visual designs.

Form containers ​

Name any layer with [ww-form] and it will be converted into a functional form container in WeWeb. This is perfect for wrapping multiple input fields and buttons together.

Buttons ​

Name any layer with [ww-button] to create a functional button in WeWeb. The system creates an overlay structure with a functional button that handles clicks and your original visual design.

Submit buttons get special treatment: If your layer name contains "submit" or the text content says "submit", it will automatically be configured as a submit button for forms.

Input fields ​

Name any layer with [ww-input] to create functional input fields. The system is smart about detecting what type of input you need based on additional keywords in your layer name:

  • search → search input
  • email → email input
  • password → password input
  • number → number input
  • date → date input
  • time → time input
  • tel or phone → telephone input
  • textarea or message → textarea input
  • anything else → text input

Placeholder text detection: The system automatically detects placeholder text patterns like "enter your email" or "type your message" and sets them up properly in the input field.

Smart padding: The import tool analyzes your design for icons and automatically calculates the right padding for your input fields so text doesn't overlap with decorative elements.

Field naming ​

When you use these layer naming conventions, WeWeb automatically generates clean field names for your form elements. For example, a layer named [ww-input] User Email becomes a field called user_email in your form.

LAYER NAMING BEST PRACTICE

Use descriptive layer names like [ww-input] Email Address or [ww-button] Sign Up Button. The clearer your layer names, the better your imported components will work in WeWeb.

Choose your export mode ​

The Builder.io plugin offers two export options based on whether you're using Auto Layout.

Easy mode is what you'll use when your designs don't use Auto Layout. The plugin makes its best guess about element positioning, which works for simple designs but may require manual adjustments. Results can be unpredictable for complex layouts.

Precise mode is for designs that use Auto Layout. This provides much more accurate imports and is recommended for all designs when possible. It creates true one-to-one replicas of your Figma designs.

QUALITY DIFFERENCE

The difference between these two modes is significant. With Auto Layout + Precise mode, you'll get pixel-perfect imports that match your design exactly, with proper responsive behavior and elements that work together as intended. Without Auto Layout using Easy mode, you'll still get good results for simple designs, but you may need manual positioning adjustments, and complex layouts might not import correctly.

Export from Figma ​

Once your design is ready, here's how to export it:

  1. select the frame or design you want to export in Figma
  2. right-click and choose Plugins > Builder.io
  3. choose your export mode (Easy for designs without Auto Layout or Precise for designs with Auto Layout)
  4. click Export design and wait for the analysis to complete
  5. click Copy to builder when ready

Import into WeWeb ​

Now you can bring your design into WeWeb. In the WeWeb Editor, click More > Import from Figma, then click Paste from clipboard in the bottom right of the modal. You'll go through an import wizard with a few steps.

Map your colors ​

The system will detect all colors used in your design and help you organize them. Colors with matching names in your project will be mapped automatically, while colors not found in your project will be prepared for creation. Take a moment to review that all color mappings look correct before proceeding.

Handle your images ​

You'll see a list of all images detected in your design. For each image, you can either upload it as a new asset in your WeWeb project or select an image that already exists in your project. Images with exact matching names will be mapped automatically.

Import Google Fonts ​

If your design uses Google Fonts, you can import them into your project at this stage. This ensures your text looks exactly as designed.

Confirm and finish ​

Review the summary of what will be imported, then click Finish. Your design will be automatically placed onto your page.

Working with imported designs ​

Understanding the structure ​

Imported designs are placed as their own section on your page, which keeps everything organized and makes it easy to move your design around.

If you want to move an imported design inside another section on your page, open the imported section in the Navigator. You can then drag the contents of the imported section into an existing section where you want it to appear. Once you've moved the design elements, you can delete the now-empty imported section if you no longer need it.

Tips for best results ​

Here are some key things that will help you get the best imports:

  • use Auto Layout in your Figma designs whenever possible
  • choose Precise mode when you have Auto Layout enabled
  • organize your Figma layers with clear, descriptive names
  • use consistent naming for colors and images between Figma and WeWeb
  • keep your designs organized in well-structured frames

For the best results, we strongly recommend using Auto Layout in your Figma designs and selecting the Precise export option.

CONTINUE LEARNING

Ready to start styling your imported designs? Learn how to customize colors, fonts, and layouts to match your brand.

Learn about styling properties →