A tip from a fellow designer: Check if the developers plan to use a framework, you use the components from their to design
@khadidjamoghrani1972 жыл бұрын
what do you mean
@DasJaegar2 жыл бұрын
@@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.
@sabrinetizaoui13153 жыл бұрын
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_Peg3 жыл бұрын
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)
@karaokewaala91073 жыл бұрын
Wow y'all picking up the trends and releasing faster than many big websites and platforms. So great!
@VintageTV_USA3 жыл бұрын
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.
@cliffivey3 жыл бұрын
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
@jdmji2 жыл бұрын
@@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)
@Nabhel2 жыл бұрын
Thank you so much, this is very detailed, i truly appreciate the team for making this knowledge available for free.
@98563593 жыл бұрын
Oh shoot...this is a must! I haven't watch it yet but props for posting an 8h course for free!
@germanandresruizhernandez39793 жыл бұрын
I love FCC, it's the best KZbin channel of the web
@gregtegreg2 жыл бұрын
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
@stevedoetsch2 жыл бұрын
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?
@dimakazantsev92403 жыл бұрын
This dude knows and can everything
@KazzyOfficial3 жыл бұрын
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
@TutorialTim3 жыл бұрын
Here you go! You can duplicate them from my figma community profile www.figma.com/@tim
@KazzyOfficial3 жыл бұрын
@@TutorialTim Thank you! I actually just bought your course on your website. So excited to get started!! Do you do one on ones ever?
@brunorocha98982 жыл бұрын
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
@1980nikolov2 жыл бұрын
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!
@jelilabudu2 ай бұрын
😊 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.
@LuBre3 жыл бұрын
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.
@vietbach61653 жыл бұрын
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.
@psichotox2 жыл бұрын
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.
@LuBre2 жыл бұрын
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
@GavinDavidson11 ай бұрын
That’s my issue as well 😢
@javierasanchez11282 жыл бұрын
What an amazing tutorial! Very helpfull! Thank you for making Figma and Material Design knowledge accessible and understandable to everyone. Hugs from Chile!
@KazzyOfficial3 жыл бұрын
Thank you!
@KazzyOfficial3 жыл бұрын
Publish colours 21:00
@KazzyOfficial3 жыл бұрын
Elevation styles 53:00
@KazzyOfficial3 жыл бұрын
Create text style 1:22
@KazzyOfficial3 жыл бұрын
Ended @ 1:38:00
@thatthebee2 жыл бұрын
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!
@boravarol65373 жыл бұрын
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)
@rishikeshg89263 жыл бұрын
Can you please make a contend on Embedded System programing🙈...like RTOS and basics of embedded memory's
@Ajajqiqjaa3 жыл бұрын
I NEVER KNEW THE AMAZING WORK BEHIND PHOTOSHOP, BLENDER AND CANVA !!
@codewithguillaume9 ай бұрын
AMAZING COURSE
@brnheavymetal3 жыл бұрын
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.
@somjitmethvin76562 жыл бұрын
Thank you very much. This Full Course helping me a lot. You are taught very good.
@rizkirahardiputra62202 жыл бұрын
Thanks bro for the tutorial. Because of you, I was helped without having to buy books that cost millions
@sadaffarsa60583 ай бұрын
This is absolutely awesome, thank you!
@anshikajain83892 ай бұрын
Hey is it helpful for product management
@ben-cb5er3 жыл бұрын
Awesome video!! Could you please do courses around data analysis field?? excel or sql or python would be amazing... Thank you
@codelery4142 жыл бұрын
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?
@minma022622 жыл бұрын
Agree. Practicing and showing is more important.
@Ngoozi_ Жыл бұрын
Thanks for this priceless content
@blinyoman2036 Жыл бұрын
im watching this video every morning with a cup coffe
@desiputtar892 жыл бұрын
Figma is used for designing mobile apps and layouts for products in e-commerce websites.
@limsintow3 жыл бұрын
Wow very cool! Thanks a lot for make full course about Design System
@elizabeth46893 жыл бұрын
man this is gold, bookmarking this for later on
@chidiebubeemeka83592 жыл бұрын
Very insightful, thanks for sharing!
@ogundekoadegbenga37663 жыл бұрын
I haven't watched it yet but I already gave a like...wow...
@fantasyteamshorts61122 жыл бұрын
Every UI designer must watch this
@elenabargaoanu57632 жыл бұрын
Thank you very much, I've learned a lot from this amazing content!
@taika17953 жыл бұрын
Oh man i was literally looking for this the other day!!!! thank you so much!!!!
@mitejmadan86722 жыл бұрын
This is the course I was looking for. Thanks for taking so much effort.
@champaklol46803 жыл бұрын
Believe me or not, just opened KZbin to see if there is any Figma tutorial and see what i got.
@merisimamovic9653 жыл бұрын
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. :)
@TutorialTim3 жыл бұрын
Thanks for the correction Meris! I’ll be sure to be more precise next time!
@CeleryBruh3 жыл бұрын
figma nuts
@nigerianprince53892 жыл бұрын
awesome videos. side note - it's annoying hearing you swallow on your mic. other than that - super stuff!!
@dessydimcheva72073 жыл бұрын
About the elevation section: Where can I find the values for the drop shadows?
@ilijamatic19443 жыл бұрын
I m interested in the same question :)
@lexciobotariu2 жыл бұрын
Have you found the answer?
@musayalwa7723 жыл бұрын
Just when I was looking for it..... Thanks
@kackupa7522 жыл бұрын
Why use three box shadow effects? What is the CSS for this going to look like when you begin coding the design?
@vijaychelladurai49863 жыл бұрын
Finally I get what i needed
@miftahulhusna81053 жыл бұрын
i feel like i need to pay for this stuff... very helpfull, thanks a lot
@pauljohn38983 жыл бұрын
Awesome video will save a lot of time
@yutaishere3 жыл бұрын
Thanks so much! This is very useful!
@visheshgour2 жыл бұрын
I'm professional but still I'm looking for more UI videos like thsi 😅
@jeeyuuni3 жыл бұрын
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 !
@anandmagar61322 жыл бұрын
Thank you so much so detail
@p.mousumipriyadarshini86773 жыл бұрын
Damn..I was looking for this man!!
@EmadRahman_eee2 жыл бұрын
Tons of thanks.
@TK-wp3iw3 жыл бұрын
*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??*
@11vag3 жыл бұрын
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-wp3iw3 жыл бұрын
@@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:)
@infographie5 ай бұрын
Excellent.
@Lokesh31523 жыл бұрын
Dude I was just searching for thus
@nentangtoituonglai2 жыл бұрын
Awesome, Thanks so much!
@lorrieuiux58023 жыл бұрын
Oh WOW! This video came right when I needed it
@digigoliath3 жыл бұрын
Wow, Super Awesome!!! TQVM!!
@achyutpal38653 жыл бұрын
I ready needed a tutorial like this.
@ahmadsahal65882 жыл бұрын
you are great, I have permission to save and permission to study
@ytRap0073 жыл бұрын
great video for design system.
@muhammadfathurrahman55102 жыл бұрын
thanks for you content king
@tokjonaracaj51333 ай бұрын
We didn't understand the values you inputed in Elevation ?
@mixedmesh34042 жыл бұрын
Unable to use your shared styles. It says Includes 'three missing libraries' and then says 'missing library'
@tushensu3 жыл бұрын
Bro I just started learning design and now this, I am emotional.
@aditya_AiG3 жыл бұрын
After looking this video time... It's going to take for me months to finish it 😂😂
@adipurnomo56833 жыл бұрын
Go ahead bro
@shadmansudipto72873 жыл бұрын
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.
@faizandanish72952 жыл бұрын
Thanks for the Amazing Gem
@asaad10223 жыл бұрын
I love this already.
@_akachukwusilas Жыл бұрын
Great work!
@thepanoramiq37382 жыл бұрын
Thanks!
@tonys4902 жыл бұрын
Whats the purpose of having so many shades of every colour in use case when desinging ?
@honey786652 жыл бұрын
Figma grindset.💪
@Filippahop2 жыл бұрын
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.
@denis99712 жыл бұрын
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?
@victorbjorklund3 жыл бұрын
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 ???
@prakul193 жыл бұрын
i want to know this guy mac model damn he has literally opened every single app anyone know ? Mac Pro ?
@montanathecreator3 жыл бұрын
To every struggling KZbinr like myself... keep pushing we Gon be there soon ❤️🇬🇭
@tonys4902 жыл бұрын
please do newer Material design 3 tutorial
@RahulYadav-nk6wp3 жыл бұрын
This is gold! 🙌
@KishanLalBJ3 жыл бұрын
Much need one for me..
@entrepreneurcity33173 жыл бұрын
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??
@ajithr12553 жыл бұрын
Love this! Watching @ 2x :)
@apurva_dahiya10 ай бұрын
Can we publish our design sytem in Figma Starter pack? I tried after building the color system, I wasn't able to publish.
@josephkitheka50193 жыл бұрын
#let's show love to the channel guy'z
@TruongNGiang-vs3mc3 жыл бұрын
So fabulous!
@Boldzite10 ай бұрын
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
@jeromeberthet79572 жыл бұрын
Wow great job ! ;)
@filetmignon99783 жыл бұрын
Love the video, but is it just me or is Tim's website super laggy?