Figma Design System: 10.Variable Scoping

[@nedal_hesham]

Thx dude

[@marakidesigns9175]

Figma Evangelist🤩🤩You make better tutorials than Figma itself 😍😍 I would love to see more tutorials. Keep on good work!

[@hayaletisligiii]

I love this series...

[@phuonghoang9268]

Me too 👍

[@myfaq4722]

Thanks a lot for your content.

[@Tunasandw1ch]

Amazing, just what I needed to know! I have a question about setting up my design system structure. Let's say I have three different products with unique components but they all use the same primitive tokens with our brand colors and some spacing variables etc. I was going to create a primitive token library that is not used directly in any designs, and then create a product-specific design system library with components and semantic tokens built with primitives. What should I do with icons? I was thinking of creating a separate icon library file that could be used in all the design files since you cant really have 'semantic' icons that are mapped to primitives, but would it be better to just use the primitive library with all the other variables de-scoped so only icons show? Thanks for the help!

[@Tunasandw1ch]

nevermind, literally just watched the first video in your series which answers this exact question 🫡

[@awaises]

Could you please advise on the best way to use a design system or UI kit across multiple projects? Option 1: Should I create a separate copy of the design system for each new client and then add any necessary pages? Option 2: Should I start a new file for each project and only copy the components I need from the design system?

[@ChristopherDeane]

Until Figma releases their "Child collection" feature, which will help with this, we're stuck with either creating a lot of semantic modes or using the DS as a starter for each project. Hopefully they'll focus less on stuff that doesn't really help us scale, and more on what does :)

[@fotocube]

Happy halloween! 🎃

[@FernandoComet]

How do you move this system then to Webflow?

[@ChristopherDeane]

I was going to say the Figma to Webflow plugin from Webflow themselves, but it doesn't support collections with modes which means it doesn't see the Semantic: Color or Semantic: Type variables inside those collections. Until they fix this issue, you'll have to do it manually like I did with my main design system called Scale in Webflow and Figma... one by one, until the job was done 🙂.

[@FernandoComet]

@@ChristopherDeane Thanks a lot, very interesting knowing your workflow

[@kartikeya.m9380]

Loved this variables series ,When you will be teaching advanced prototyping .

[@ChristopherDeane]

We're about to start components so if I did do any prototyping tutorials they would be after we've covered the main baseline component... a looooooooooooong time from now 🙂.

[@ElizabethArostegui]

I am struggling with Darkmode design :( I hope you do it later please.

[@ChristopherDeane]

Once we get past a handful of components, I'll do a video where we use FDS to design something using the semantic colour and type variables, and it's then that you will see that dark mode is automatic 🙂.