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.

1 Like
3

Hey Tracy,

The best way to handle the component imports is to have properties set up on the component to handle any kind of dynamic styling you wish to have.

In the example of the color fill, usually with button components, you would have some kind of “variant” select, so you could indicate the variant of the button. For example, Primary, or Secondary, or something of that nature. And then, depending on what variant the button is, you would have logic set up in the component on WeWeb to control the needed color fill.

In the Figma video, I walk through an example of a button import that has a variant property: https://youtu.be/KHykgOtBQjs?t=274

If you wanted dynamic styling on something other than a button, the premise would be the same. You would create a property to control the styling in some way, then set up the logic in the component so it styles itself correctly based on the value of the property. For example, if the property is ‘Primary’, use white as the fill color, or if the property is ‘Secondary’, use black as the fill color.

Then, whenever you import designs from Figma that use the component, the properties will have their values correctly set in WeWeb, and thus the components will have the appropriate styling applied.

I hope that helps :slight_smile:

4

Thanks for your answer!

That’s what I’ve been doing, but I thought it will take the styles from the figma component, not that I needed to recreate it completely and then map it.