Return

Importing a design from Figma

Bring a Figma design into WeWeb so you can build faster and stay consistent.

Steps at a glance

1. Prepare your Figma file (clean frames and consistent styles).
2. Use the Figma import flow in WeWeb.
3. Review the imported structure and fix any small layout issues.

1) Prepare your Figma file

• Keep your page layout inside a clear frame.
• Use consistent text styles and colors.
• Name layers clearly so it is easier to find elements later.

2) Import into WeWeb

1. In WeWeb, open the Interface.
2. Use the Figma import tool to connect to your Figma file.
3. Select the frame(s) you want to import.
4. Run the import.

3) After import: verify the basics

• Check spacing and alignment (especially on responsive breakpoints).
• Confirm fonts and colors match what you expect.
• Convert repeated UI patterns into components so you can reuse them.

Common pitfalls

The layout looks different than Figma

• Check responsive settings and container widths.
• Some effects may need small tweaks in WeWeb styles.

Related guides

Generating a custom coded component

Create a custom coded component and use it like any other element in your interface.

Intermediate8 min

Setup different languages in your app

Add multiple languages so users can view your app in their preferred language.

Beginner7 min