Optimizing Design system Figma-Weweb

Ask us anything How do I?
1

Hey everyone,

I’m trying to simplify the process of designing in figma and then transfer to Weweb.

The goal workflow would be:

*Having a common library for fast set up in weweb (all components sync in the design system in figma)

  1. Create a new project and design in Figma using the sync design system
  2. Create a new project in Weweb using the common library
  3. Import the designs in WeWeb with the components that were adapted to the project
  4. create a project local version of the library? of the components? (I read the doc but I’m still confused)
  5. how do I manage extra colors from the new project in figma?

We usually use shadcn ui system, so sometimes the figma to weweb plugin is not the best, for example:

  • when a component is imported, doest take the color fill, I need to turn it back to normal (non component) so weweb takes the color. Which it doesn’t make sense because then I sync the component for nothing.

I’m a bit lost if what I would like to do is even possible or if I’m going in the right direction. I don’t fully understand how to proceed after the point 3.

If it’s not possible, what would you do to make it more smooth? I’m curious how people approach their design-to-development workflow with WeWeb in 2025.

I would also like to know if there are any tips in designing the design system in figma, even if we need to recreated from scratch, if it optimizes the process…

Thanks for your help :light_blue_heart:

PD: Im not the designer so Im not expert in figma and its possibilities.

2

Hi Tracy, welcome to the community :waving_hand:

Thanks for the great question!

I’ll loop in the person who authored our docs so they can provide you with the best answer.