Create a Design System with Figma - Full Course

[@DasJaegar]

A tip from a fellow designer: Check if the developers plan to use a framework, you use the components from their to design

[@khadidjamoghrani197]

what do you mean

[@DasJaegar]

@@khadidjamoghrani197 Let’s say the developers are going to use material-ui framework for react, you can get the components and design the product using that

[@C0llector]

thought developer should follow what designer design not other way round

[@littlechange]

@@C0llector That's not true all the time. Development is more complex than design. So, developers tend to use already built components from famous UI libraries like (mui, ant design, etc). You can ask developer which library they are familiar with and will be using and then you can use (Figma) libraries of those UI libraries. I think MUI has a figma file for their design system but I'm not sure about Ant Design. If the website is simple with not much complex components involved than the designer can use whatever Figma design is handed to him and he will custom code that design from scratch.

[@migo33]

@@littlechange That's correct in certain circumstances and when the company/ team is small and mostly dev-driven. We use Base Web component library and it's half-baked Figma resource and it's quite a mess after a couple of years. Best to have a single source of truth such as a Figma file even if it's based on a known library. The issue is that many of those known libraries (MUI, bootstrap etc) update their code but not that Figma file. This is a huge risk and waste of time in the long run.

[@sabrinetizaoui1315]

High value content! Thank you very much for making design knowledge accessible to everyone. It's really rare to find quality content for free nowadays unfortunately! I salute the initiative and the mindset behind it

[@Carroty_Peg]

Why should quality content be free all the time? Pay for these people's time. Stop whining!

[@feelcollins4358]

@@Carroty_Peg A year late but he didn't say it should be free all the time. Real quality content is almost always paid and rarely free according to him and he would like it to be more available (which I disagree honestly since there is already plenty of great free content)

[@karaokewaala9107]

Wow y'all picking up the trends and releasing faster than many big websites and platforms. So great!

[@VintageTV_USA]

Thanks for the Figma course. VERY helpful information... The A prefix in the Material Design color charts (such as A100) refers to "Accent". Which is what the lighter colors are meant to be used for. The accent should be used for the floating action button and interactive elements, such as text fields and cursors, text selection, progress bars, selection controls, buttons, and slider links.

[@cliffivey]

Do you mean any element that is being used: hover over, clicking, high lighted etc..? When you are talking about "action" or elements that are "interacting" while the user is surfing around? Is that what you mean when Figma is referring that "A" in A100? Accent colors when a user is "interacting" with elements. I'm other words Accent color for interacting. I think I'm making sense of it lol sorry for the repeated words here

[@jdmji]

@@cliffivey Accents means just that, something that you want to stand out in the page. Generally those are the elements you want the user to pay attention to (a button they want to press, etc)

[@Nabhel]

Thank you so much, this is very detailed, i truly appreciate the team for making this knowledge available for free.

[@9856359]

Oh shoot...this is a must! I haven't watch it yet but props for posting an 8h course for free!

[@germanandresruizhernandez3979]

I love FCC, it's the best KZbin channel of the web

[@gregtegreg]

For around 15:49 > you can have it cleaner > a Frame called Colors > inside create an Auto Layout component and duplicate that for all the colors. So instead of Frame / rectangle color / 2 text fields you'll have > Frame / Auto Layout Frames

[@stevedoetsch]

You know it will be well organized and detailed video when the very title of the video makes you ask a question that is immediately answered upon starting the video, which is: "What is a design system?

[@dimakazantsev9240]

This dude knows and can everything

[@KazzyOfficial]

This is amazing thank you Tutorial Tim. I just started working with programmers and this video is exactly what I needed! Where are these files in the description box that the video keeps referencing that we can download ? Can’t find them

[@TutorialTim]

Here you go! You can duplicate them from my figma community profile www.figma.com/@tim

[@KazzyOfficial]

@@TutorialTim Thank you! I actually just bought your course on your website. So excited to get started!! Do you do one on ones ever?

[@brunorocha9898]

Amazing!!! thank you for the content.. 7 hours later I lerned a lot.. but I feel that I could watch this video more 3 times and still learn a lot

[@1980nikolov]

Once i finish this video i will get a subscription from your page. I mean, you have to be somehow reimbursed for going that extra mile and providing amazing content. Thank you very much!

[@jelilabudu]

😊 Is this fellow a lower grade teacher? I'm one hour into the course, and each concept he explains get me closer to building my own efficient design system. ❤ One question though, why is he using three drop shadow for each elevation? Can someone explain it to me?

[@viciouz25]

God bless you for churning high quality courses for free.

[@LuBre]

Design Systems are very cool for if you're creating similar apps/websites for similar clients. In any other case they're almost useless. I've got very different clients in very different business areas (fashion, pharmacy, b2b, small stores, beauty, legal, ...) and it's just impossible to have one solid design system to fit them all. Of course you still follow some basic design/UI/UX rules (padding, margins, proper font choices, negative space, etc) but a legal firm will have a completely different website/app compared to a hospital website/app. There is no way to recycle the same guidelines.

[@vietbach6165]

I think the main takeaway is that it is optimal to have different design systems for different clients. Although, we'd normally see big clients and companies would require designers to have a design system for the project.

[@psichotox]

Also if you work full time for a big company a design system is essential to guarantee consistency and to easily mock-up / prototype new products and features. If you're a freelancer with multiple clients, you could use a design system as a starting point and tailor it to your clients.

[@mwultra]

if the system being developed is complex, you will not only rely on design systems but it will also be your lifeline until the project is finished. So it actually depends on the scale rather than nature or domain areas of the such a project.

[@LuBre]

I wish my clients where rich enough to pay me for this stuff. Which is indeed cool and all, but it's an insane "waste of time" for most common clients.

[@RajolemWorld]

You work on fiverr?

[@LuBre]

@@RajolemWorld nope

[@GavinDavidson]

That’s my issue as well 😢

[@javierasanchez1128]

What an amazing tutorial! Very helpfull! Thank you for making Figma and Material Design knowledge accessible and understandable to everyone. Hugs from Chile!

[@KazzyOfficial]

Thank you!

[@KazzyOfficial]

Publish colours 21:00

[@KazzyOfficial]

Elevation styles 53:00

[@KazzyOfficial]

Create text style 1:22

[@KazzyOfficial]

Ended @ 1:38:00

[@thatthebee]

Thank you for creating such an amazing content. I wish I came across your video before I finish my case studies. Now it’s time to reconstruct them!

[@boravarol6537]

Where are the values for the drop shadows?? he only shows the values for the first one, there are no references to any other value charts for the shadows (45:50)

[@rishikeshg8926]

Can you please make a contend on Embedded System programing🙈...like RTOS and basics of embedded memory's

[@Ajajqiqjaa]

I NEVER KNEW THE AMAZING WORK BEHIND PHOTOSHOP, BLENDER AND CANVA !!

[@codewithguillaume]

AMAZING COURSE

[@brnheavymetal]

FreeCodeCamp reading my mind again and uploading a video exactly when I decided to study a topic

[@praveendias1180]

Thank you so much for this educational video, I learned so much.

[@somjitmethvin7656]

Thank you very much. This Full Course helping me a lot. You are taught very good.

[@rizkirahardiputra6220]

Thanks bro for the tutorial. Because of you, I was helped without having to buy books that cost millions

[@sadaffarsa6058]

This is absolutely awesome, thank you!

[@anshikajain8389]

Hey is it helpful for product management

[@ben-cb5er]

Awesome video!! Could you please do courses around data analysis field?? excel or sql or python would be amazing... Thank you

[@codelery414]

Thanks for the tutorial. I am a full stack developer and I recently started the google ux design specialisation with the aim of learning application design. However, after taking the first two courses in the specialisation, i started to have a feeling that it is not necessary for me as developer and youtube tutorial like this one could be better. What is your view?

[@minma02262]

Agree. Practicing and showing is more important.

[@Ngoozi_]

Thanks for this priceless content

[@blinyoman2036]

im watching this video every morning with a cup coffe

[@desiputtar89]

Figma is used for designing mobile apps and layouts for products in e-commerce websites.

[@limsintow]

Wow very cool! Thanks a lot for make full course about Design System

[@elizabeth4689]

man this is gold, bookmarking this for later on

[@chidiebubeemeka8359]

Very insightful, thanks for sharing!

[@ogundekoadegbenga3766]

I haven't watched it yet but I already gave a like...wow...

[@fantasyteamshorts6112]

Every UI designer must watch this

[@elenabargaoanu5763]

Thank you very much, I've learned a lot from this amazing content!

[@taika1795]

Oh man i was literally looking for this the other day!!!! thank you so much!!!!

[@mitejmadan8672]

This is the course I was looking for. Thanks for taking so much effort.

[@champaklol4680]

Believe me or not, just opened KZbin to see if there is any Figma tutorial and see what i got.

[@merisimamovic965]

4:45:13 This is NOT correct. It doesn't have a thing to do with resizing horizontally/vertically, it's about the direction in which auto-layout frame stacks the child elements... You can resize it in both ways, no matter the option. :)

[@TutorialTim]

Thanks for the correction Meris! I’ll be sure to be more precise next time!

[@CeleryBruh]

figma nuts

[@nigerianprince5389]

awesome videos. side note - it's annoying hearing you swallow on your mic. other than that - super stuff!!

[@dessydimcheva7207]

About the elevation section: Where can I find the values for the drop shadows?

[@ilijamatic1944]

I m interested in the same question :)

[@lexciobotariu]

Have you found the answer?

[@musayalwa772]

Just when I was looking for it..... Thanks

[@kackupa752]

Why use three box shadow effects? What is the CSS for this going to look like when you begin coding the design?

[@vijaychelladurai4986]

Finally I get what i needed

[@miftahulhusna8105]

i feel like i need to pay for this stuff... very helpfull, thanks a lot

[@pauljohn3898]

Awesome video will save a lot of time

[@yutaishere]

Thanks so much! This is very useful!

[@visheshgour]

I'm professional but still I'm looking for more UI videos like thsi 😅

[@jeeyuuni]

Thanks for this amazing tutorial! Where can i find the link to the icons source file? I couldn't find the link in the descriptions/comments !

[@anandmagar6132]

Thank you so much so detail

[@p.mousumipriyadarshini8677]

Damn..I was looking for this man!!

[@EmadRahman_eee]

Tons of thanks.

[@TK-wp3iw]

*How UX design is related to front end development and how it is helpful in front end??? Is there difference between UXUI and front end development??*

[@11vag]

UX is more about planning and defining the flow of the software, as well as defining personas (user types) and doing research. UI is all about the graphic representation of things. It's about designing icons or buttons for instance and giving information a graphical representation on screen. At some point, UX and UI overlap to some extent, but when you start studying the two, you start seeing the differences. As a developer, most likely you'll be given the UX/UI done, just for you to convert everything into code, but if you are a freelancer, you'll need to define those things before even thinking about coding.

[@TK-wp3iw]

@@11vag ohhh I got it..so the already made up uxui project is given to front end developer and now he or she will create the final product based on that uxui using the code... also having a degree in Marketing is beneficial for UXUI jobs or should I get a degree in IT (talking about masters) because I am planning to do if after my undergrad so what will you suggest??? Thank you:)

[@infographie]

Excellent.

[@Lokesh3152]

Dude I was just searching for thus

[@nentangtoituonglai]

Awesome, Thanks so much!

[@lorrieuiux5802]

Oh WOW! This video came right when I needed it

[@digigoliath]

Wow, Super Awesome!!! TQVM!!

[@achyutpal3865]

I ready needed a tutorial like this.

[@ahmadsahal6588]

you are great, I have permission to save and permission to study

[@ytRap007]

great video for design system.

[@muhammadfathurrahman5510]

thanks for you content king

[@tokjonaracaj5133]

We didn't understand the values you inputed in Elevation ?

[@mixedmesh3404]

Unable to use your shared styles. It says Includes 'three missing libraries' and then says 'missing library'

[@tushensu]

Bro I just started learning design and now this, I am emotional.

[@aditya_AiG]

After looking this video time... It's going to take for me months to finish it 😂😂

[@adipurnomo5683]

Go ahead bro

[@shadmansudipto7287]

That's normal. You won't remember a thing if you don't do things as you learn them. Only watching videos is not enough. Even when I have been programming in C# for 2 years, if I see something new I often forget it unless I try it out myself.

[@faizandanish7295]

Thanks for the Amazing Gem

[@asaad1022]

I love this already.

[@_akachukwusilas]

Great work!

[@thepanoramiq3738]

Thanks!

[@tonys490]

Whats the purpose of having so many shades of every colour in use case when desinging ?

[@honey78665]

Figma grindset.💪

[@Filippahop]

Wow this is so helpful!!!

[@MelinaBering1]

This is great, but does anyone know where I can find out the Best Practices for creating components, file organization, plugin development, naming conventions, etc?

[@ErtugrulElibol1610]

Same.

[@denis9971]

Amazing course, thank you so much for sharing all that content! I'm curious, what's the opposite of Google's Material Design style? Is there some sort of flat style design system which is also a free open source library like Material Design?

[@victorbjorklund]

Wow!!!!! Yes!!! I need this!!!

[@holymason7]

17:00 why is the same color code have different shade? im talking about the red 200 and 300. They have the same hex but why different shade?

[@zeyadahmed7199]

hello i have a question do you used a professional or organization version of figma and does it make deference between them ???

[@prakul19]

i want to know this guy mac model damn he has literally opened every single app anyone know ? Mac Pro ?

[@montanathecreator]

To every struggling KZbinr like myself... keep pushing we Gon be there soon ❤️🇬🇭

[@tonys490]

please do newer Material design 3 tutorial

[@RahulYadav-nk6wp]

This is gold! 🙌

[@KishanLalBJ]

Much need one for me..

[@entrepreneurcity3317]

is this like a white label canva type of deal? If not how can I obtain that? A system that I can create graphic designs templates and customers can customize themselves??

[@ajithr1255]

Love this! Watching @ 2x :)

[@apurva_dahiya]

Can we publish our design sytem in Figma Starter pack? I tried after building the color system, I wasn't able to publish.

[@josephkitheka5019]

#let's show love to the channel guy'z

[@TruongNGiang-vs3mc]

So fabulous!

[@Boldzite]

Please I think there is an updated in m3 material design The present one is different from this making it difficult for me to follow and understand For example the layout grid,responsive design ... In the current one there is no value for the breakpoint like the one in this video The break point here just shows width

[@jeromeberthet7957]

Wow great job ! ;)

[@filetmignon9978]

Love the video, but is it just me or is Tim's website super laggy?

[@neillunavat]

Can you do a video on pybullet library? Please.

[@v.krishnankaushik9812]

Create a course on axure please

[@Kitsune_Dev]

I NEED THIS YAAAS