Discover ways to construct a design system in Figma. By the tip of this course you’ll turn into a grasp of constructing design programs in Figma and understanding grasp parts.
✏️ Course developed by Tim Sullivan. Take a look at his channel: https://www.youtube.com/channel/UCTGmiyXawbVmFJjpiYSw0Gw
🔗 Tim’s web site: https://tutorialtim.com/
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:03:03) Making a Colour System
⌨️ (0:22:23) Constructing a Kind System in Figma
⌨️ (0:35:16) Elevation
⌨️ (0:57:33) Product & System Icons
⌨️ (1:11:26) Textual content Legibility
⌨️ (1:30:58) States
⌨️ (1:50:53) Choice (Interplay)
⌨️ (1:55:02) Understanding Format
⌨️ (2:04:15) Pixel Density
⌨️ (2:12:05) Spacing Strategies
⌨️ (2:24:19) Responsive Grid Format
⌨️ (2:48:59) App Bar – Backside
⌨️ (3:07:55) App Bar – High
⌨️ (3:22:37) Backdrop
⌨️ (3:41:58) Banners
⌨️ (4:06:45) Backside Navigation
⌨️ (4:19:15) Buttons – Floating Motion Button
⌨️ (4:38:54) Buttons
⌨️ (5:06:04) Playing cards
⌨️ (5:41:10) Chips
⌨️ (5:58:15) Dialogs
⌨️ (6:28:56) Date Pickers
⌨️ (7:32:22) Dividers
🎉 Due to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse
—
Study to code without spending a dime and get a developer job: https://www.freecodecamp.org
Learn a whole lot of articles on programming: https://freecodecamp.org/information
And subscribe for brand spanking new movies on know-how day-after-day: https://youtube.com/subscription_center?add_user=freecodecamp
source
Here are some exercise files you can duplicate to follow along and reference to have access to all of the components built in this video! Hope you enjoyed the video 🙂
Color Palette File:
https://www.figma.com/community/file/829552758151188415/Material-Design—Color-Palette
Material Design System File (Before Adding Auto Layout, Variants, and States):
https://www.figma.com/community/file/991525247245496517/Material-Design-System—Before-Adding-Auto-Layout%2C-Variants%2C-and-States
great tutorial but Material is really messy .. no wonder their devices are mess too.. lol… ios is very clean
absolutely hate autolayout .. messes everything up
been a while auto layout still is creates mess at the end
please do newer Material design 3 tutorial
please do IOS design system tutorial
Whats the purpose of having so many shades of every colour in use case when desinging ?
please please do the same for IOS
Nice
really nice videos!… but what is up with all that swallowing??… I'm sorry but it's so annoying doing that in front of the mic… 🙁
7 hours of top class Figma lessons? My mind is blown. God, I love the Internet.
Thanks so much freecodecamp!!!
wow
nice
Thank you very much, I've learned a lot from this amazing content!
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
Am I the only person put-off by the way the intro guy talks? It’s like he’s being held hostage or sum.. blink twice man
Figma is used for designing mobile apps and layouts for products in e-commerce websites.
Some of the questions that get asked is what is the design process, what is the design system used, and how have you solved the problem of the client through your design? Design is all about problem solving. How can we learn about design process in Figma?
Every UI designer must watch this
Emirates Flight Booking App Design Using Figma – Complete Video 👉 https://youtu.be/B8KCBD-9-ec
take a look
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!
Unable to use your shared styles. It says Includes 'three missing libraries' and then says 'missing library'
What is design system
Wow this is so helpful!!!
Thank you so much so detail
What an amazing tutorial! Very helpfull! Thank you for making Figma and Material Design knowledge accessible and understandable to everyone. Hugs from Chile!
Very insightful, thanks for sharing!
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.
1:20:06 how can i screenshot and at the same time copy and paste on figma? i got mac as well
How to make and copy the screenshot? Is there any tool for that…
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.
thanks for you content king
Damn!!! So much rich content
please make videos in hindi urdu……
Tons of thanks.
Thanks bro for the tutorial. Because of you, I was helped without having to buy books that cost millions
Awesome, Thanks so much!
Wow y'all picking up the trends and releasing faster than many big websites and platforms. So great!
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
where is spanish?
This one video just made ton of paid course useless.
I'm professional but still I'm looking for more UI videos like thsi 😅
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?
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?
Figma nutz