วีดีโอ

This so amazing, a rp design system, I just finished this ep and wondering what's in the next ep!!

Designer: Maps all the colors, Adds accessibility rules, Annotations, Documents entire flow. Dev: Fill -> Detach style 🤣

Love this! Thanks for sharing. Really simple too. However...I have this need to have a left sidebar that collapses. So I could easily create a component that has the two variants, expanded and collapsed. But can I easily just make a button that swaps the variant on-click? For whatever reason I am having a mental block on that right now. Any demo of this?

I've got a lot to say, however, i would leave it at THANK YOU!!!

Just what i needed!

Kirk, many thanks for the video. But, still don't have proper understanding, what is the difference between 2 approaches (2t and 3t)? I 've used 3t (brand, alias, mapped), according to your previous videos. And what other design systems use 3t approach? Pls explain. Thanks

Literally every video you make means so much to me!!!! I so much appreciate the work you've done so far! Started using 3-tier token DS with tips you made and it works so much better than the system before. One question about the laptop you're using: which chip is the Mac you are using and what do you think is better to get? I'm working from a Windows desktop with a reasonable GPU but thinking of turning to the Mac side and idk what to get. Thank you a lot in advance!

For the designers watching this: Users don't care about your design system, or how you structure your Figma. Your job is to use research to identify their problems and then provide solutions. So don't sweat if you can't reproduce this effect with your designs, just do 3 versions and you're fine.

Wow, you don't know how much you helped me, thank you very much! Hugs from Brazil

Should I design the UI first or create a design system (+ design tokens) first? If the answer is to create a design system first, I must confess that I can't imagine the colors I'll use before seeing the overall picture, such as color balance and contrast when they are combined on the same page. Could you please advise me on how to proceed?

If I add a nickel for every time you said “let’s go ahead and…” 😅

Cool. Figma should have something like this built into the program, as an extension of comments and/or part of the devmode. Instead they are focusing on weird and not so useful features. Many times it seems like Figma aren't using their own product.

What’s unclear to me is what to do when the brand color is, let’s say, red or blue. My initial approach would be to create a red color scale for the brand and then select a distinguishable shade of red for semantic purposes. For example, if I’m working on a “Brand Collection,” I might create a “Brand Red Group” and a “Semantic Red Group.” However, this feels somewhat redundant, especially if they are ultimately merged into an alias that organizes the reds. Would it make more sense to have just one brand red and derive shades of it for semantic purposes instead? If you could clarify this, it would be a huge help.

Just one question, when we annotate the design like this, we are removing work of the designer sitting with the developer and telling them what is the functionality I guess. We re currently just doing it through comments. But a structure like this definitely helps.

This is fantastic, thank you

That's what I was looking for! A real professional revealing how to do a real-world work and not that conceptual bullshit... Thank you!

so are we done with design system ? or it's still left? 😅😅

Thank you!

Thanks sir. I really want to learn what is in real project and real designer using. Many tutorial just tutorial hell.

Thanks for sharing

Simple the best one!

Right on. Cool stuff that's not easy to navigate is useless.

Thanks for creating such an in-depth video on variables and design tokens, thanks Indeed!

I have a question. Let's say we have two brands (Brand A and Brand B), each has it's own typeface. How would you structure it in your collections? Would you first define a 'Type' group in individual brand collection (Brand A and Brand B) with Font family/weight/size/line-height as parameters, and then again reference them to the Alias?

A bit confused how you got the Typescale Generator

where r uh from brother , thanq for proving this gold in free

Another great video!! 🙌

Solid Explaination! I would really love some help on mapping text specific tokens and how to organize them. Line-height, font-weight, font size, font-style

Where do you set 'tooltip' in the layer in Figma's new UI?

Thank you for this, I'm learning so much!

I would highly recommend you to use two plugins , sorter and styler , they both will save so much time of yours , if you dont know how they work, you can look up yourself or im also happy to tell , drop a reply ;also thanks for the vdo!

What if you want your border for primary actions to be a gradient?

Amazing, thank you so much!!

good job, thanks for sharing!

if we set spacing and typography in a responsive variable? does it messed up all the components that using that token, if we apply that to the actual design with responsive layout? how do you handle that? thanks

@47:30 Quick tip! you can do the math within the value input so no need for a calculator. Just write your initial value * 1.6 or 1.2 (e.g - 16*1.6) and figma will do the calculation for you.

"Hi! Can you please teach us how to create a light and dark theme?"

This system is genius, i'm going to have a hard time learning to be this good but it seems worth it 😣😣

You don't need a calculator @ [6:42]. Figma fields support basic math functions. e.g., for the H1 line height, just type into the field: 60*1.2 and it calculate it for you. At least I think it does-I don't have any plugins that do this and it works for me.