วีดีโอ

These videos are rare and designers who pay attention to master this are a LOT more valuable in big organisations. Crazy that we can watch these videos for free. I've learned a lot from you

hi! At which collection would you add the dark mode? I have added the different colours on the primitive, but when creating alias it's not possible to select the mode colour. So at which section would i set my different colours? Do they have to be set up as a primitive as well?

Thanks for this great video! I'd love to get your advice. My brand includes a green color that's quite similar to the green I picked for the 'success' color. I'm considering using just one green palette and then applying the same palette for both the success and secondary colors. What do you think about this approach?

Hmm I dont know about this. We chose to do component-level component to be able to have the opportunity to change styles on component level. For example: if a tab-bar and a button both were applied to a primary color (alias), and you want to change only the button colors, you won't be able to because there is no component level variable.

Thank you so much for the course. I’ve been trying for weeks to figure out how to name color styles and how to organize them in a way that minimizes the number of styles while covering the maximum number of components. Your videos have been extremely helpful! I also have a silly question: how do you quickly duplicate new styles when creating them in the variants panel? I tried using the "cmd+d" and "cmd+v" shortcuts, but they don’t work there. I have to right-click to make a copy. 😂

Thank you so much for this!!! Taking design and bootcamp courses will teach you all the things about design thinking, but something like this would have been so useful towards the end to get designers on their way and able to push out designs more quickly after familiarizing with the basics of figma. I love the detail with which you discuss things and go through them step by tiny step. My design work has expanded to platforms and dashboards, so having a system like this feels invaluable in communicating stuff to my developers. Thanks SO much for helping me create this!! Onto the next video and joining UI Collective. :)

This is money

The opacity technique for colour scales are rather bad, colours get desaturated very easily and quickly. It’s better to generate perception based colour scales.

. items componts will not be published

So far, the most straight forward and simplest introduction tutorial about Figma Tokens and Variables. Great job👏

Your titles don't pass ADA

Can you for example use the same red-500 on a warning card background, but also use it on a hover state of a warning breadcrumb?

Thanks, best UI/UX channel out there, keep up with the videos.

Hi, thanks a lot for this video, helps so much for me to understand the variables. But I have a stupid question, which is when it comes to the boolean variable, I can't find this "layer" setting on the right side panel in my figma, there's only "Appearance" on the side with the eyes icon, which i can show the button or hide the button, but I can't apply the "boolean" variant to the button, I couldn't find where this "Layer" is, do you know where I can find it? Thanks!

what's the two fingers tap means?

Thank you, it was exactly what I was looking for

Great content as always. Congrats from Brazil 🙏

Seriously good content! Love that you dont rush ! Keep it up!

Do I need figma paid subscription to follow up on this video?

I really enjoyed your videos on UI/UX design! I have already signed up on your website, but I couldn’t find any courses from scratch for beginners in the UX/UI field. Could you please let me know where I can access the complete course, including tutorials on Figma? I would love to learn more. Tnx!

Beside the fact not being able to asign variables to main components / variants I would like to be able to assign multiple variables as I want to cover more than just 2 viewports but not every viewport has its own variant.

1:08:10 September has 30 days.😅

From India, your video is very useful 😊 this series.

Yesss! Part 3. Really excited to get started on this new part, i would love to see a color picker component if thats possible. Keep up the good work!

Babe wakeup, the new video of UI Collective has been dropped.

Thanks!

I feel like the example with the banner would be much easier prototyped with an overlay in the prototype panel. What's the pro of doing it with a boolean variable instead?

This is exactly the tutorial i needed to get a good grip on a start in figma and ui/ux design. Didn't know people created design systems before this and i love that it is so up to date. I'm really excited to see what the future episodes are gonna be about. Keep up the good work!

It's quite sneaky of you not to mention that the overlay locks your interface from further interactions ) And for a some time, until the window disappears, you can't click on the buttons.

Thanks for the video. With so many nice plugins related to accessibility available, it should just be part of the process and done directly in Figna.

this video has made us so clear on the concept of variable and token, looking forward to such valuable content in the future, Thank you!

It's a pity that switching between dark and light themes doesn't work

How does one call these variables in a separate file, I have a design system set up and I can call it from the team library. My question is how do I call these variables as well over there or do I need to first create this process in my design system file and republish the entire thing, will that enable me to call these variables as well?

Amazing checklist and presentation. I was hoping to get whole figma file instead of just checklist though.

We want part 3 now where you start building screens with this design system and show more grids and responsive part

How do you use underline or Caps properties when defining typography tokens?

For more comprehensive design system Token Studio is still dominating by far. We have currently over 500,000 Tokens on our design system. and a lot of them are Alias coming from Global, Primitive & Semantic. Something we found is that it's hard to build/edit alias token on figma which creates a lot of works because we need to update each tokens one by ones. Something that can take us days of work with figma can take us days of work.

4:10 this is such a good tip already i cant wait to see the rest of this video