You are doing such a great job, Your videos helped clear so many of my doubts regarding the new variable systems on Figma also learned a few new tricks to quickly rename things. More power to you! Wish you more subs in the coming future!

You are amazing! I really searched long hours to find a good guidance on understading these things(tokens, variables, variants etc) and here you are. Thank you so much for your really helpful content!

@TDSunshine

6 ай бұрын

Aww thanks! You're very welcome!☀️🙏🏼✨

I just recently discovered your channel and I'm really enjoying the content. I'm starting a new project and I just followed your steps to create the styles and convert them to variables and WOW! Just Brilliant! Thank you for sharing. I'll taking a deeper dive into all of your content. You break it down into digestible steps which is really helpful.

@TDSunshine

7 ай бұрын

aww thank you so much! Im glad you are finding my videos helpful ☀️🤗🙏

Love your energy! Thanks for creating these videos.

@TDSunshine

7 ай бұрын

aww thanks! will do! ☀️🤗🙏🏻

Just finished this first episode . Nobody, I repeat nobody explains this s*** better than you. You're raising star ma'am!

@TDSunshine

6 ай бұрын

Aww thanks so much! ☀️💛

@anastasiiakarpovska4029

2 ай бұрын

Totally agree with you!

I love your Videos. I started Using Figma 1 month ago, and you are my inspiration ❤

@TDSunshine

11 ай бұрын

Aww thanks! happy to hear they are helpful on your Figma journey 💛☀️

I've been scouring over for design system tutorials and yours was the best that I've found!! Short, simple, organized, and most of all -- actionable. Thank you so much!!! 💖 Wishing you more success 🤗

@chrysanthiskalioti4203

3 ай бұрын

Was thinking exactly the same!

@TDSunshine

3 ай бұрын

Aww thank you so much! 🙏🏼☀️

Perfect as always :)

@TDSunshine

11 ай бұрын

Thanks! ❤️🙏🏼

Perfect as always!

@TDSunshine

2 ай бұрын

thanks! 🙏🏻☀️💛

Amazing breakdown of Figma Design System! 👏

@TDSunshine

2 ай бұрын

Thanks! 🙏🏻☀️💛

Excellent explanation. I was looking for such content for learning design systems and you covered everything thoughtfully. Honestly, I love it!!!!

@TDSunshine

Күн бұрын

Thanks! I'm glad you enjoyed it! ☀️🙏🏻💛

Another great video, thank you! Small tip on the Styler plugin, under "Customise plugin", you have the option to check/uncheck "Reverse generation order". By default, when I used it to generate the colour styles, it went from darker to lighter shades, whereas I prefer the opposite, so checking the Reverse order box fixed this nuisance super quickly :) I also used it to create Text Styles in my preferred order.

@TDSunshine

10 ай бұрын

Great tip thanks! 💛☀️

Hey, thanks a lot! You're probably one of the best at explaining design systems in such a wonderful way. Subscribing you right away.

@TDSunshine

Ай бұрын

Aww thanks! ☀️🙏🏻💛

It was brilliant! Thank you so much💜💜💜

@TDSunshine

5 ай бұрын

You’re welcome! ☀️🙏🏼💛

Thanks to discribe token system in a very simple way

@TDSunshine

14 күн бұрын

You're welcome! ☀️🙏🏻

Your videos are fantastic and easy to follow, great help! Thank you

@TDSunshine

Ай бұрын

Thanks! ☀️🙏🏻💛

Love it, really well put together.

@TDSunshine

Ай бұрын

Thanks! ☀️🙏🏻

Well explained! Thank you!👏🏽

@TDSunshine

3 ай бұрын

Thanks! 🙏🏻☀️

Amazing tutorial! Especially the tip about the branded greyscale. Keep up with the videos! Thanks.

@TDSunshine

27 күн бұрын

Thanks! ☀️🙏🏻💛

just amazing Series for learning Ui Style Guide and the way you Teach such a amazing ❤I Love it💛

@TDSunshine

4 ай бұрын

Thanks! 🙏🏻☀️

Clear tutorial you are amazing ❤

@TDSunshine

9 ай бұрын

Thanks! ☀️🙌🏽

Your video is amazing. Thanks for making such wonderful and useful video for figma newbies.

@TDSunshine

27 күн бұрын

You're welcome! I'm glad it was helpful! ☀️🙏🏻

Thank you so much! You're amazing!

@TDSunshine

7 ай бұрын

aww thanks! 🙏☀️

Although the video was just 16 minutes long it look me 2 hours to get the things right but loved the session the positive energy that you radiate is just amazing ,makes learning easier for me. Will definitely complete the playlist and get better at design systems.

@TDSunshine

21 күн бұрын

haha believe me it took me way longer to make this too! Glad you got it working in the end! ☀️🙏🏻💛

Thank you for this detailed tutorial🎉 God bless you

@TDSunshine

5 ай бұрын

Thanks! 🤗 You’re welcome ☀️🙏🏼

"Fantastic breakdown of Figma Design System! 👏 Your clear and concise explanations make understanding this topic a breeze. Kudos for making complex concepts so accessible! Wishing you the best of luck with your future content endeavors!"

@TDSunshine

3 ай бұрын

aww thanks! 🙏🏻💛☀️

u deserve more subscribers, Good job

@TDSunshine

5 ай бұрын

Thanks! 🙏🏼☀️🤗

Thanks for this, you rock 🎸

@TDSunshine

Ай бұрын

You're welcome! ☀️🙏🏻

@juleonasefi5230

Ай бұрын

@@TDSunshine Planning on watching your whole series.. even after using Figma for a year or so now, this is one area I need to improve on. Slowly but surely!

Olá, eu falo do Brasil e posso garantir que suas aulas são extremamente competentes. Honestamente por aqui não encontramos um material tão completo e com tão boa explicação! Obrigado pela sua dedicação e competência. Incrível!

@TDSunshine

Ай бұрын

Obrigado! 🙏🏻☀️

You are the best!

@TDSunshine

7 ай бұрын

Thanks! 🙏🏼☀️

That's really great 😊, thank you mam

@TDSunshine

3 ай бұрын

Most welcome 😊🙏🏼☀️

You deserve to have more subscribers.

@TDSunshine

3 ай бұрын

I think so too! 🤪 thanks! 🙏🏻☀️💛

Brilliant video

@TDSunshine

11 ай бұрын

Thanks! ☀️💛

Luv it!! Thanks You :)

@TDSunshine

2 ай бұрын

You're welcome! ☀️🙏🏻

This best video what i seen before

@TDSunshine

9 ай бұрын

Thanks! ☀️

Thank you so much

@TDSunshine

Ай бұрын

You're most welcome ☀️🙏🏻💛

I've been binge-watching your videos, very useful and helpful. Thanks. I think some degree of design systems can be beneficial to kick things off, but since a design process is about going back and forth and reiterating many times, it's not easy to decide on everything ahead of time. You seem very organized, and I would like to know how you plan things ahead and how your design process is like. If possible, it'd be very nice to see your design process with a short example of a mobile app or or web app in the future. Thanks always for amazing content. 🤓💯👍

@TDSunshine

9 ай бұрын

Thanks! I completely agree about the back and worth btw! You can even see through my series that I change things from time to time. Design systems are an ever evolving process 🤗☀️ that’s a good idea though for a video topic! I’ll add it to my list ☀️💛

@djashawe88923

9 ай бұрын

Thanks a lot. I look forward to watching your design process one day for you're very organized and I'm sure it'll inspire many others including myself. @@TDSunshine

@alkesh482

8 ай бұрын

@@TDSunshine Saw your videos, it is super helpful. Thank you, Sunshine.

@alkesh482

8 ай бұрын

@@TDSunshine You can change the Lightness or Brightness value of hue to + or - 10 in Figma

Hey! You Skipped the border value parts, I try to guess it. Your files is very clean and tidy. Your 15 minutes make me follow more than 1 hour. But anyway thanks your new Figma Tutorals.

@TDSunshine

10 ай бұрын

Hey! I create the border group at 10:53 and I do skip all the variables inside but if you pause on 11:08 you can see the ones I selected 🙃 Hope that helps! ☀

@thearaav6670

10 ай бұрын

That's helpful. Thanks@@TDSunshine

You're the bestttttttttttttttttttt

@TDSunshine

Күн бұрын

aww thanks! ☀️🙏🏻💛

I just started learning variables from your lectures. I loved it. My suggestion is to take a video from starting to ending you can create web or mobile app design in figma using variables.that could be useful because the values 50,100,200 where to use in different areas

@TDSunshine

4 ай бұрын

Thanks! great idea! ☀️💛🙏🏻

Thanks !!

@TDSunshine

11 ай бұрын

You're welcome! 🙏🏼☀️

very good👏👏

@TDSunshine

5 ай бұрын

Thanks 🙏🏼☀️

Great tutorial!! I'll practice and try to convert the Material Design color styles to variables (dark/light). If it work, the challenge will be setup these variables to all MD components 😅

@TDSunshine

9 ай бұрын

It’s lots of work to convert a library but might be worth the effort in the long run! ☀️

I was lazy and checked if there's a new plug-in to create variables directly - there is! Color Variables Creator by masha. Very useful

@TDSunshine

14 күн бұрын

ooo great thanks! When I made this video variables were super new so there wasn't much out there yet haha thanks for sharing! ☀️🙏🏻💛

@michaelachaushev5780

14 күн бұрын

@@TDSunshine thank you for making such comprehensive videos! Love your content:)

love it. and also u

@TDSunshine

7 ай бұрын

🙏🏼☀️

Nice video

@TDSunshine

2 ай бұрын

Thanks! ☀️🙏🏻

Heey! Also been binge-watching your videos. I just love how clean and organized things are explained 👏 Q: Say if you want to reuse this system for another project, and you need to build new brand colors - how would you do this? My guess is generating a primary palette and replace the purple colors?

@TDSunshine

5 ай бұрын

Thanks! great question :) Basically yes. For example if you follow this video you can change the greyscale primitives to match the new brand colour and then you can either change the purple primitives to match your brand and it will keep all the alias's "alive" OR you can reconnect your tokens and semantics to new primitives. I hope that helps! ☀️🙏🏻

@TDSunshine

5 ай бұрын

You can even change the variable name in the primitives and all the connections will still remain intact! ☀

@henrikjuhl6587

5 ай бұрын

Tru tru 💪@@TDSunshine

Very nice

@TDSunshine

4 ай бұрын

Thanks! ☀️🙏🏻

@krishnpal9503

4 ай бұрын

@@TDSunshine i like your way to describing the topic, and i listend your all video and i like to most word is "Hey" which means "Here" i listened maytime to understand this word only but I really love your work and style 🤗😃 👌

It always remains a bit "difficult" for me to follow at this pace ... but it works (unfortunately I can't understand English language very well 🙈). But the way the tutorials are presented is really great. And always sooooo much useful information. Many thanks ❤ 👍🏻

@TDSunshine

14 күн бұрын

You're welcome! ☀️🙏🏻💛

Thank you for a great video! What would you recommend to organize variables for light vs dark mode and multi-brands?

@TDSunshine

7 ай бұрын

Thanks! This is a bit of a make shift one right now :/ Variables are still in Beta and Figma has announced that they are working on theming. You can always use modes to swap between different modes and themes. And you could use styles + componentes and swap between libraries but that does not effect variables right now. I hope that kind of helps ☀️🙃

The boss. No arguing there accepted.

@TDSunshine

4 ай бұрын

Thanks! 🕶️☀️🙏🏻

Yey! I finally found something that I need. Thank you! Your new subscriber here!

@TDSunshine

2 ай бұрын

aww thanks! 🙏🏻☀️💛

Great Insight and clear explanation! Could you please shed more light on how to add tokens for dark mode?

@TDSunshine

6 ай бұрын

Thanks! I have tis video on how to use variables for light and dark mode :) I hope that helps! ☀️🤗 *Figma light & dark mode variables* - kzread.info/dash/bejne/nGWkrsmSn6TPmqw.html

Nice tut, thanks, do you have a method for picking your primary shades before you initiate a system?

@TDSunshine

2 ай бұрын

You're welcome! it depends on lots of factors! I go through it a little in this video (kzread.info/dash/bejne/aY57qamxh6vPZ8o.html) but you can also google " how to select a brand colour" you will find lots of guides out there! I hope that helps 🙏🏻☀️💛

Recently found a video of yours and this is the next one I've seen. Greeat tutorials! I am wondering regarding these color tokens, when you have a company with a brand manual that already have a lighter or darker color - and those are the only ones that can be used. Do you still build the design system like this with all the different shades despite them never being used?

@TDSunshine

5 ай бұрын

Thanks! It's a bit different when you already have brand colours in place. Sometimes its still useful to get some more shades of your brand colours for backgrounds or visual hierarchy but some brands are really strict about colour use. So sadly my answer is the dreaded - it depends 🙈 the beauty of variables is you can make them to suit your needs 🤗 Sorry its not a more straightforward answer 🙃☀️

@joakimsommar1509

5 ай бұрын

​@@TDSunshine I appreciate your answer - and I know, it's not always easy to give a straight forward answer, so no worries about that! :) Your answer still helped me though since you mentioned it depends and you can do what suits your needs :)

Thank you for this very simple explanation! Made my start with variables so much easier :) One question tho, how do you go about making hover, pressed and disabled states for each of these tokens?

@TDSunshine

3 ай бұрын

You're welcome! You can do that using modes or using different variables on your components ☀️🙏🏻 Figma have a great video on this - kzread.info/dash/bejne/hIyFmrqPmdXgmtY.html

I love you videos and it's keeping me up to speed in using variables. I would like to know what plugin are you using to do those shortcut keys that does batch renaming? Thanks

@TDSunshine

10 ай бұрын

Thanks Neil! Batch renaming is a native function in Figma you just need to select more than one element and tap CMD+R/CTRL+R. If you mean the little green squares at the bottom left of my videos that popup when I click on a keyboard key than thats just a graphic I made and added in when editing ☀️🙏🏻

@NeilCuestas

10 ай бұрын

Oh, I see. 😂 I haven't tried selecting more than one element. I just hit CMD+R, expecting a prompt or something. Thanks for explaining. Looking forward to more Figma variables content on your channel. 😊

@TDSunshine

10 ай бұрын

@@NeilCuestas No worries! selecting only one element and then CMD+R will let you rename that layer in the layers panel ☺ More variable videos will be coming up for sure so keep a look out! ☀

Hey, great video! I'm just not sure how you choose the first main colors to then base your shades on?

@TDSunshine

5 ай бұрын

Thanks! If you mean the rainbow colours from the start, I just kind of chose ones I liked and wanted to show an example with lots of colours. But sometimes your designs might not need so many, or maybe you already have brand colours to work with and then you can shade less ! it really depends on your needs 🤗 I have this video where I go through a more simplified process of creating a pallet with just a primary and secondary brand colour - kzread.info/dash/bejne/aY57qamxh6vPZ8o.html I hope that helps ☀️🤗

Thanks for the video. Really liked your teaching style. I have a question. Is it add or remove value to ux using different shades of semantic colors? Are you using colors like this in your projects?

@TDSunshine

23 күн бұрын

Thanks! great question, I think the most important thing is to keep it accessible. Sometimes to us, as designers, a slight change in shade is super clear but to anyone else it's barely noticeable. So I would caution against using different shades for different meanings. But you can use shades of the same colour to emphasise their semantic meaning. ☀️🙏🏻

Can't wait to see how you handle the Typography system since, as far as I know, there's no way to natively "tokenize" fonts in Figma (please, knock me down with this assumption!!)

@TDSunshine

10 ай бұрын

Sadly you’re right :/ but Figma did announce that typography variables are in the works! The video about typography system will go live on Monday so watch this space 👀👀

Thanks............

@TDSunshine

Күн бұрын

You're welcome! .......... ☀️🙏🏻

hi, thank you so much for this it really helps me to learn color system using variables. the way you explained it is easier to understand. i just wanna ask after i use it, why is it that when i use it in UI design, semantic colors like warning, error, and success don't show up in libraries? any tips to make them appear?

@TDSunshine

Ай бұрын

Thanks! They are different modes of the same colour so you will only see one of them and then you will need to change the mode of the element you use them on to see the others. You can change modes in the layer section of the design panel. 🙏🏼☀️

Great video! I’m having problems with how to use the colour system now. If I have two new designs projects, one with a primary green theme and one with a primary pink theme, how can I globally change the colours for each project - because if I change the primary colour on the design system it affects both projects that using the design system? Am I thinking about this in the wrong way? Do I have to duplicate the design system for every single project I work on?

@TDSunshine

Ай бұрын

Thanks! its best practice to use a separate design system per project (if they are for different brands for example). If you are using styles and not variables you can use the swap library function. Im uploading a video on "swap library" in 2 weeks so watch this space! ☀️🙏🏻💛

Dear Mam, Special thankx for sharing valuable lecture about design system. Please make landing page by using design system for better understanding how to apply all knowledge at once. Love from Pakistan❤❤❤❤ ❤

@TDSunshine

27 күн бұрын

Thank you! ☀️🙏🏻💛

@liaqatali7633

27 күн бұрын

@@TDSunshine Mam Pleas make series on landing page by using design system like real world project

can you do a course on creating components with varients and properties for design systems

@TDSunshine

5 ай бұрын

hey! the rest of this series has just that! ☀️ You can have a look at this playlist - kzread.info/head/PLx-zZQ15gdAozTLq2xMRFhPKp6fjhoZ3E

@smilli6415

5 ай бұрын

ok looking forward for more videos @@TDSunshine

Hey Great video. Question for you that I can't seem to find a no nonsense answer, its seems to be quite a bit of extra work to covert colours from styles to variables. What the benefit of using variables above styles? You mentioned it it was was to apply colours to elements but its also the just as easy with styles? thanks

@TDSunshine

3 ай бұрын

Great question! The value of variables is that you can connect variables to other variables. So you can create a sort of system of referencing. Right now styles have a bit more to offer than variables in terms of colours because you can’t save multiple colours into one variable and they can only be solid colours. So you win some you lose some 🤪 I hope that makes sense! I also have this video where I talk about the whole referencing thing in more detail ☀️🙏🏼 - *Variables best practice* - kzread.info/dash/bejne/iYF4rLtxZrXOfNI.html

Hey Tair - thank you so much for creating these. As someone moving from Sketch over to Figma a lot of this was really confusing but you managed to make it fun, easy to understand and accessible - even for me!! One question I have though, I notice that you don't create Variables or Tokens for Black #000000 or White #FFFFFF - is there a particular reason for this?

@TDSunshine

14 күн бұрын

Hey! I usually make black and white variables / styles in my project and I am a big believer in this! I think in this method I wanted to show lots of other things to do with colours and it kind of slipped my mind. ☀️🙏🏻

Thank you so much. The video is amazing. I have just one question, normally we use modes for dark and light. so why do you do this for success, warning........and also how do I create dark mode then?

@TDSunshine

5 ай бұрын

You're welcome! ☺️ it all depends on what you need for your project and designs! In this example I only had light mode so could utilise modes for other things. I have this video that shows how I would use modes for light and dark - kzread.info/dash/bejne/nGWkrsmSn6TPmqw.html
. I hope that helps ☀️🤗🙏🏻

@ashishzanzane6602

5 ай бұрын

Thank you.@@TDSunshine I really appreciate your efforts, I have seen so many videos but nobody could explain the design system in this manner. Thank You so much.

Interesting approach! I have a few questions and thoughts about it. One of the benefits of design tokens is their support for semi-automated dark mode, which is valuable for accessibility and the increasing preference for dark themes among users. In your approach, you used variable modes to separate tokens by context. How would you scale this architecture to support dark mode effectively? Additionally, many products either currently support or may want to support multiple UI themes in the future. From my understanding, variable modes are particularly well-suited for this, allowing a seamless switch between light, dark, or any other theme with minimal effort. Is there an aspect I might be missing here? Looking forward to your reply!

@TDSunshine

Ай бұрын

Thanks! So in this example, I took an approach where there is not dark mode so you can use modes for other things like semantic colours. But yes I agree that the most classic case would be to use modes for light and dark mode which makes the swap so easy! When Figma announced variables they said they are working on themeing but its not live yet so one day soon I hope they will launch it! For now you can use "swap library" but bare in mid you can't swap variables :/ I have a video going live about this on Tuesday so keep a look out ☀️🙏🏻💛

Hello, really helpful video, thank you! One question, why did you call the greyscale collection 'Style tokens'? Is this to enable adding more colours as modes later if desired? Not sure why you have separated this from the semantic colour set. Thanks again - finding your videos really helpful for understanding variables and tokens!

@TDSunshine

9 ай бұрын

The reason I separated them was because the semantic ones have modes and the others don’t so I couldn’t have them in the same collection. Essentially style tokens are like my default styles and then semantic token are for when I need to use colours with meaning or that are connected to the brand/primary colours. I hope that makes sense! ☀️🤗

@karenbeal2387

2 ай бұрын

Hello again - I am wondering about using modes for warning/error/success etc when the websites I usually design rarely have the need for them… Have you set up the modes in the Semantic collection purely to make it easier to map onto the style guide? I am not sure how else you would need to change an entire webpage design into 'error' mode for example? Just trying to work out how best to set up my next project file. @@TDSunshine

@tracyy6619

2 ай бұрын

@@karenbeal2387 same question, those scenarios are not common, and I wonder if those worth the efforts to set up ?

kindly @TD sunshine mam kindly create a complete design system series and cover all the topics

@TDSunshine

3 ай бұрын

Adding to my list! ☀️🙏🏼

Hi! Great video, learning alot! I have a question about the last part in the video(error, warning and success). I Have followed every step you go through and I have copied the primary color frame and when Im switching to error, warning or success, only the surface colors are switching and not border and text. What have I missed? I have the professional subscription

@Wict0r7

3 ай бұрын

Issue solved, now it works great! =) A tip for all of you is to be more specific when you name your variables so the system knows from which collections, the colors should be taken from. Instead of just "default". example can be "SemSurfaceDefault".

@TDSunshine

3 ай бұрын

Great point! Yes sometimes it gets a bit buggy when variables have the same names / similar ones. Also I find I myself make mistakes and select the wrong ones sometimes because of that 🤪☀️🙏🏼

@Wict0r7

3 ай бұрын

@@TDSunshine Thank you! But you are doing a great job by teaching your skills and knowledge. You describe the steps very simply and clearly, which makes it easy to follow along. We learn from each other! :) Keep up your great job

Should I create a design system for every project? Or can you explain how design systems would adapt to multiple projects with different brand colors etc?

@yumegrade5581

8 ай бұрын

Amazing video btw, I’m excited to watch and learn from the entire series! 😊

@TDSunshine

8 ай бұрын

Thanks! This is a great question! I have a video going live in a few hours that will go through best practice in setting up a new project! Basically I would say it really depends on the type of project you are designing. But when you start you will usually duplicate design systems into the project (your own ones or ones from the community) and then tweeks them to match what you are working on. ☀️ I hope that helps!

I don't have Figma professional. You mentioned that use groupings instead of modes. So inside "Semantic colors", I created Primary/Surface, primary/Border, Primary/Text. And inside of each of these 3, I created their respective colors. And then I repeated this for error, warning and success, and now I have total 36 variables, unlike yours, where you had 9. Am I doing this right? And if I am doing this right, and off course I would not have the option of "Change variable mode" like you did at 15:08, what option would I have for doing what you did at 15:08? Again thanks.

@TDSunshine

9 ай бұрын

Hey! Yeah without the professional plan groups are the best way forward 😇 because you can’t “change variable mode” you need to reassign the variables when you need to use a different semantic colour. So if you are using primary/surface and you need it to be an error then you just change the variable to error/surface. Because of the grouping you can easily search the variables for the different semantics ☀️🤗

Why do we need to delete the styles after create variables? is it okay to keep it there? Will this combination helps you keep things organized, make updates easily, and ensure a cohesive design?

@TDSunshine

Күн бұрын

Having styles and variables with the same name can be confusing. You might accidentally use one instead of the other and not realise and then be unable to prototype it or control it dynamically. ☀️🙏🏻

Hi there. Am I doing something wrong? I'm on a professional account and creating semantic tokens. I was able to create the default but, when attempting to create the additional modes, received a figma message telling me I needed to upgrade to an Enterprise account! That doesn't seem right. What d'ya think I might have missed along the way?

@TDSunshine

2 ай бұрын

I see you solved it! 🎉☀️

Is there already a Figma plugin that can translate the colors to variables? That you mention in 05:18

@TDSunshine

14 күн бұрын

I'm sure there is! worth searching the community for one ☀️🙏🏻

hii please at 8:26, you said "if you look in your figma file you'll see this frame for color tokens" i think im confused.. but what exactly do you mean by figma file..i cant see anything on mine. or did you create that frame by your self?? @TD Sunshine

@meremo657

Ай бұрын

i really hope you see this, cause im new to design systems, and i wont lie im beyond lost

@TDSunshine

Ай бұрын

Hey! there is a link in the video description to download the file im working on in the video so you can follow along with me :) here you go - www.figma.com/community/file/1267794150131517088/design-system-1-colour-system ☀️

@meremo657

Ай бұрын

@@TDSunshine thank you so much

The default values of red, orange, yellow, green, blue, purple, pink and grey at 0:54 you have taken for the reference, where can i find those?

@TDSunshine

8 ай бұрын

I selected the circle at the top and then copied their HEX value from the fill section of the design panel. You can find the Figma file I worked with in the description if you want to duplicate it. ☀️🤗

@coralgalaxy544

8 ай бұрын

Thank you for your reply. I will do the same :)

I want to know how i can use red/ orange or green as the primary colors if its used as error warning and success

@TDSunshine

3 ай бұрын

Ooo great question! I think the main thing is to make sure there is a clear difference between them. So if I go for red as my brand colour and I also want a red for error I need to make sure they are very different “kinds of red”. And you may also want to add more visual queues to help the user differentiate that now this red means error by incorporating elements like icons, text, borders etc. I hope that helps! 🙏🏼☀️

Do mind having a look at your FIgma file, it won't open for me? Clicking the Open in Figma button does nothing. Thank you for your videos.

@TDSunshine

11 ай бұрын

It works fine for me :/ maybe you have some sort of pop up blocker or something ? You can also search for TD Sunshine in Figma community on the app or in the browser. Hope that helps ☀️🙏🏼

@streamx2

11 ай бұрын

@@TDSunshine Worked this morning, Thank you again

so we create design system after we built our web designs???

@TDSunshine

8 ай бұрын

Sometimes you start from complete 0 and start with a DS before starting the design but sometimes you might join in a project where there isn't a DS in place yet or there is an old outdated one and you need to redo them. Either way design systems are constantly evolving ☀️

what about dark mode?

@TDSunshine

7 ай бұрын

Hey! I have video about light and dark mode :) *Figma light & dark mode variables* - kzread.info/dash/bejne/nGWkrsmSn6TPmqw.html

Why is it called "Surface"? what elements belong in this category? great vid by the way (this is the type of vid that Figma should have provided)

@TDSunshine

11 ай бұрын

Fair point! I used "surface" to refer to any backgrounds that we will need in our designs, page backgrounds, or component ones (buttons, drop downs etc). Regarding "semantic", for me, it means that there is meaning behind them. Such as those specific colours are used to signify a warning or an error and not just a normal state. I hope that clarifies it a little bit! ☀️🤗

@TDSunshine

11 ай бұрын

@@1deplatt I’d say save that colour and any variations of it in your system for sure! You can name the collection or style group however you want but for sure I would document it all with clear nameing

@1deplatt

11 ай бұрын

If I use a light grey color for a webpage BG (from the greyscale primitives) Should I add that color to the surface category??

@1deplatt

11 ай бұрын

@@TDSunshine Thanks :) keep up the great work!

I created a script to create swatches using the JSON list, and runs in the Scripter plugin. so you dont need to use the color picker. if you want me to send ya the script to test let me know :)

@TDSunshine

3 ай бұрын

🕶️

Is this works on figma student plan?

@TDSunshine

Ай бұрын

Yes is does! variable modes and prototyping work on education plan and any paid plans 🙏🏼☀️

@manobanismo

Ай бұрын

@@TDSunshine thank you, will defo try it!

The way your variable(Semantic) are named, I am really in doubt how they will justify the developer at the time of hand off.

@TDSunshine

9 ай бұрын

I see what you are saying as modes are a bit tricky with variables technically having the same names and just being in a different mode but As there is there is clear documentation and collaboration between designers and developers any system can work. 🤗☀️

Great Video, but tbh, Ive seen a lot of videos like this where I'm failing to understand why you'd have 4 different colours for warning, error & surface and then on top of that, duplication of the exact same for border & surface. Seems OTT, complicated & ultimately not very cohesive

@TDSunshine

3 ай бұрын

Thanks! I think it’s all about what you need in your design system. I feel like KZread is a place to share ideas and get inspired so maybe you don’t need it year 4 colours but this methods of using variable colour modes will be useful for you for something else 🤗☀️🙏🏼

If you a using modes for success/error/warning/... then you'll not be able to make Dark/Light modes. I think for that purpose better to use groups instead of modes.

@TDSunshine

9 ай бұрын

It all depends on what you need in your designs. And what works best for your personal / team preferences ☀️

Hi i can't use command+R in windows

@TDSunshine

7 ай бұрын

Use CTRL + R on a windows :)

@aichaelboulque1126

7 ай бұрын

I used cntr +R but I don't see the table

@aichaelboulque1126

7 ай бұрын

Finally I found it thank you ❤️

I doing something wrong! I was trying to create more modes rather than creating a new variable. Oops. So I don't need help after all.

@TDSunshine

2 ай бұрын

Those "+"s really messed me up too at the start! glad you managed to figure it out though 😄☀️

i do not recommend the styler plug in because it messed up all of my color swatches!!! when i used this plugin it not only doesn't add to the style on figma but it also changes my color swatches too!!=

@TDSunshine

7 ай бұрын

Oh no sorry to hear you had a bad experience with it! 🙈 there are lots of plugins out there so hopefully you will find a good one for you to use 🤗🙏🏼☀️

Not giving a shit whether I'm getting the accurate hex code from a snippet or not is definitely a me behavior

@TDSunshine

Ай бұрын

😎 thuglife ☀️

The usage of modes is not scalable

@TDSunshine

8 ай бұрын

It all depends on what you need for your designs and what your system requires ☀️

@user-on8gh2yv6s

8 ай бұрын

@@TDSunshine that is true, however, there is always needs to be consideration of designing a system scale for the future, and the way video demonstrates the usage of mode is counter intuitive on what Figma recommends, also having background in engineering and design the method is not ideal to have states in different modes

thank u i'm from iran

@TDSunshine

Ай бұрын

Kheili mamnoon! ☀️🙏🏻💛

WowCmd+R

@TDSunshine

2 ай бұрын

It’s such a game changer! ☀️💛