Figma Design System - Colour System (Using Variables & Tokens) | Part 1 | Figma Variables Tutorial
Vložit
- čas přidán 22. 07. 2024
- 🚨Follow along with this Figma file -
www.figma.com/community/file/...
➸ Try Figma For Free - bit.ly/FreeFigma
➸ Try Figma's Professional Plan - bit.ly/FigmaProfessionalPlan
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Variables best practice - • Figma VARIABLES BEST P...
3. Figma Components - • Figma Components | Mas...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to comment below. Your support means a lot and helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Welcome to the series
00:18 Creating Colour Palettes
02:25 My Greyscale Trick 🤫
03:45 Organising the Colours
05:49 Creating Colour Variables
08:16 Creating Colour Tokens
10:00 Calling a Variable Alias
12:30 Assigning the Tokens
12:53 Creating Semantic Tokens
15:54 Coming Up Next
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes - Jak na to + styl
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!
Just finished this first episode . Nobody, I repeat nobody explains this s*** better than you. You're raising star ma'am!
Aww thanks so much! ☀️💛
Totally agree with you!
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!
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.
aww thank you so much! Im glad you are finding my videos helpful ☀️🤗🙏
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 🤗
Was thinking exactly the same!
Aww thank you so much! 🙏🏼☀️
I love your Videos. I started Using Figma 1 month ago, and you are my inspiration ❤
Aww thanks! happy to hear they are helpful on your Figma journey 💛☀️
Excellent explanation. I was looking for such content for learning design systems and you covered everything thoughtfully. Honestly, I love it!!!!
Thanks! I'm glad you enjoyed it! ☀️🙏🏻💛
Love your energy! Thanks for creating these videos.
aww thanks! will do! ☀️🤗🙏🏻
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.
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.
Aww thanks! ☀️🙏🏻💛
One of the best series on Design System on CZcams. Well Done :)
Thanks! ☀️🙏🏻
Your videos are fantastic and easy to follow, great help! Thank you
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.
haha believe me it took me way longer to make this too! Glad you got it working in the end! ☀️🙏🏻💛
Perfect as always :)
Thanks! ❤️🙏🏼
Love it, really well put together.
Thanks! ☀️🙏🏻
Your channel is so under-rated!
Thanks! 🙏🏻🥹☀️
Amazing tutorial! Especially the tip about the branded greyscale. Keep up with the videos! Thanks.
Thanks! ☀️🙏🏻💛
Amazing breakdown of Figma Design System! 👏
Thanks! 🙏🏻☀️💛
Perfect as always!
thanks! 🙏🏻☀️💛
just amazing Series for learning Ui Style Guide and the way you Teach such a amazing ❤I Love it💛
Thanks! 🙏🏻☀️
Clear explanation and arrangement, you are amazing
Thanks! ☀️🙏🏻💛
"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!"
aww thanks! 🙏🏻💛☀️
Your video is amazing. Thanks for making such wonderful and useful video for figma newbies.
You're welcome! I'm glad it was helpful! ☀️🙏🏻
It was brilliant! Thank you so much💜💜💜
You’re welcome! ☀️🙏🏼💛
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!
Obrigado! 🙏🏻☀️
Well explained! Thank you!👏🏽
Thanks! 🙏🏻☀️
Clear tutorial you are amazing ❤
Thanks! ☀️🙌🏽
My mind blowing at the end of the episode
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
Thanks! great idea! ☀️💛🙏🏻
u deserve more subscribers, Good job
Thanks! 🙏🏼☀️🤗
Thanks for this, you rock 🎸
You're welcome! ☀️🙏🏻
@@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!
Thank you so much! You're amazing!
aww thanks! 🙏☀️
such a creative peron , thanks for the tips and keep it up wish the best in your life
Thanks! ☀️🙏🏻💛
Thank you for this detailed tutorial🎉 God bless you
Thanks! 🤗 You’re welcome ☀️🙏🏼
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.
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! ☀
That's helpful. Thanks@@TDSunshine
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. 🤓💯👍
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 ☀️💛
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
@@TDSunshine Saw your videos, it is super helpful. Thank you, Sunshine.
@@TDSunshine You can change the Lightness or Brightness value of hue to + or - 10 in Figma
You're the bestttttttttttttttttttt
aww thanks! ☀️🙏🏻💛
You are the best!
Thanks! 🙏🏼☀️
You deserve to have more subscribers.
I think so too! 🤪 thanks! 🙏🏻☀️💛
That's really great 😊, thank you mam
Most welcome 😊🙏🏼☀️
Luv it!! Thanks You :)
You're welcome! ☀️🙏🏻
Thanks!!
You're welcome! ☀️🙏🏻💛
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 😅
It’s lots of work to convert a library but might be worth the effort in the long run! ☀️
Thank you for a great video! What would you recommend to organize variables for light vs dark mode and multi-brands?
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 ☀️🙃
This best video what i seen before
Thanks! ☀️
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
ooo great thanks! When I made this video variables were super new so there wasn't much out there yet haha thanks for sharing! ☀️🙏🏻💛
@@TDSunshine thank you for making such comprehensive videos! Love your content:)
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?
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! ☀️🙏🏻
You can even change the variable name in the primitives and all the connections will still remain intact!
☀
Tru tru 💪@@TDSunshine
Thanks to discribe token system in a very simple way
You're welcome! ☀️🙏🏻
Thank you so much
You're most welcome ☀️🙏🏻💛
Brilliant video
Thanks! ☀️💛
Nice tut, thanks, do you have a method for picking your primary shades before you initiate a system?
You're welcome! it depends on lots of factors! I go through it a little in this video (czcams.com/video/7ZGGGxWHi7g/video.html) but you can also google " how to select a brand colour" you will find lots of guides out there! I hope that helps 🙏🏻☀️💛
very good👏👏
Thanks 🙏🏼☀️
love it. and also u
🙏🏼☀️
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 ❤ 👍🏻
You're welcome! ☀️🙏🏻💛
Nice video
Thanks! ☀️🙏🏻
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?
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! ☀️🙏🏻💛
Yey! I finally found something that I need. Thank you! Your new subscriber here!
aww thanks! 🙏🏻☀️💛
I think you should make more categories for color such as onsurface onbackground .... The table you prepared does not have many of the basic colors in the project and we will have problems in the real project. Thank you for making the second part of the colors and using the dark mode on a real project
Very nice
Thanks! ☀️🙏🏻
@@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 🤗😃 👌
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?
You're welcome! You can do that using modes or using different variables on your components ☀️🙏🏻 Figma have a great video on this - czcams.com/video/RXQ8XVirzjs/video.html
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?
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. ☀️🙏🏻
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?
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. 🙏🏼☀️
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
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* - czcams.com/video/WMDJY86RhLo/video.html
Great Insight and clear explanation! Could you please shed more light on how to add tokens for dark mode?
Thanks! I have tis video on how to use variables for light and dark mode :) I hope that helps! ☀️🤗
*Figma light & dark mode variables* - czcams.com/video/j1pLgYoAijI/video.html
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?
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 🙃☀️
@@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 :)
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
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 ☀️🙏🏻
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. 😊
@@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! ☀
I have all these colors in my design system and I added it but suppose if I have 9 new colors with the single shade only then what should I name those?
Hey, great video! I'm just not sure how you choose the first main colors to then base your shades on?
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 -
czcams.com/video/7ZGGGxWHi7g/video.html I hope that helps ☀️🤗
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❤❤❤❤
❤
Thank you! ☀️🙏🏻💛
@@TDSunshine Mam Pleas make series on landing page by using design system like real world project
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?
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 - czcams.com/video/j1pLgYoAijI/video.html . I hope that helps ☀️🤗🙏🏻
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!
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 ☀️🙏🏻💛
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
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".
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 🤪☀️🙏🏼
@@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
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!
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! ☀️🤗
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
@@karenbeal2387 same question, those scenarios are not common, and I wonder if those worth the efforts to set up ?
The boss. No arguing there accepted.
Thanks! 🕶️☀️🙏🏻
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!!)
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 👀👀
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?
I see you solved it! 🎉☀️
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.
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?
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. ☀️🙏🏻
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
i really hope you see this, cause im new to design systems, and i wont lie im beyond lost
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
☀️
@@TDSunshine thank you so much
Is there already a Figma plugin that can translate the colors to variables? That you mention in 05:18
I'm sure there is! worth searching the community for one ☀️🙏🏻
COMMENT: Professional subscription provides only 4 modes, just not enough for the example (Value, Primary, Error, Warning, Success), so I would have to go with groups. Enterprise subscription would be needed for the 4+ modes, but that is very expensive for my purposes. Anyhow, I might rename the first "Value" mode to "Primitive" and then do this with a total of 4 modes. I am just trying that.
Great tip! ☀️🙏🏻
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?
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. ☀️🙏🏻
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?
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. ☀️🤗
Thank you for your reply. I will do the same :)
Thanks............
You're welcome! .......... ☀️🙏🏻
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.
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 ☀️🙏🏼
@@TDSunshine Worked this morning, Thank you again
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?
Amazing video btw, I’m excited to watch and learn from the entire series! 😊
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!
can you do a course on creating components with varients and properties for design systems
hey! the rest of this series has just that! ☀️ You can have a look at this playlist - czcams.com/play/PLx-zZQ15gdAozTLq2xMRFhPKp6fjhoZ3E.html
ok looking forward for more videos @@TDSunshine
I want to know how i can use red/ orange or green as the primary colors if its used as error warning and success
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! 🙏🏼☀️
kindly @TD sunshine mam kindly create a complete design system series and cover all the topics
Adding to my list! ☀️🙏🏼
2:15 a.m. Completed!
that's dedication! 😎☀️🙏🏻
I saw that you created from 25 to 950 colors, but you only used a few color modes when setting the variable. What about the rest of the colors?
I grouped the different colour shades rather than using modes. But you can use anything you feel works best for your design flow ☀️🙏🏻💛
so we create design system after we built our web designs???
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 ☀️
You used material 2 to make the colors of the variable. Why didn't you use material 3?
Material 2 has this tool (m2.material.io/design/color/the-color-system.html#tools-for-picking-colors) that I don't think is available on Material 3 ☀️🙏🏻💛
@@TDSunshine Can you provide a tutorial for this link? And which system is better to go with
It is said somewhere light lighter dark darker
It is said somewhere primary onprimary secondary on secondary
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)
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! ☀️🤗
@@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
If I use a light grey color for a webpage BG (from the greyscale primitives) Should I add that color to the surface category??
@@TDSunshine Thanks :) keep up the great work!
Is this works on figma student plan?
Yes is does! variable modes and prototyping work on education plan and any paid plans 🙏🏼☀️
@@TDSunshine thank you, will defo try it!
what about dark mode?
Hey! I have video about light and dark mode :)
*Figma light & dark mode variables* - czcams.com/video/j1pLgYoAijI/video.html
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 :)
🕶️
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
Thanks! I think it’s all about what you need in your design system. I feel like CZcams 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 🤗☀️🙏🏼
The way your variable(Semantic) are named, I am really in doubt how they will justify the developer at the time of hand off.
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. 🤗☀️
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.
It all depends on what you need in your designs. And what works best for your personal / team preferences ☀️