We've improved the way you bring Figma designs into WeWeb 🚀
Until now, importing Figma designs and styles required two separate processes.
With this release, we've streamlined the experience and added more flexibility and control.
Now you get:
- More accurate and flexible imports with clear mapping of colors, images, and fonts.
- A unified, consistent workflow instead of two separate import processes.
- Greater control over mapping and adjustments.
- Reduced manual work post-import.
So that you can focus on refining your app instead of fixing import issues.
What's changed
You can now import your designs through a guided flow in the WeWeb Editor using Figma's Builder.io plugin.
How it works
Here are the written instructions as well 👇
- In Figma, open your file and select the section or full page you want to import.
- Choose between Easy mode and Precise mode depending on your design complexity:
- Easy mode: ideal for quickly testing ideas, prototyping, and validating design directions early in the process.
- Precise mode: ideal for production-ready, pixel-perfect imports (auto layout has to be applied).
- Export the design and copy it to Builder.io.
- In WeWeb Editor, click "Figma Export Wizard."
- Paste from clipboard.
You’ll then be guided through the following steps:
- Introduction: a quick overview of the design and style import.
- Library Colors Mapping: map Figma variables to your WeWeb library colors. You can create new variables or link to existing ones.
- Images: choose whether to upload images from Figma or replace them with images already in your WeWeb project.
- Fonts: any Google Fonts used in your Figma design will be detected:
- If a font already exists in your project, you'll be notified.
- If new fonts are detected, you can import them.
- Summary: review all import details. When you’re ready, click "Finish."
After importing, you can continue to fine-tune the styles and designs directly in WeWeb as you see fit.
Check out our docs to learn more.
As always, let us know what you think 🙂
