Build it in Figma: Create a Design System - Foundations
Вставка
- Опубліковано 23 лип 2020
- Create your style guide, type scale, and brand color scheme and turn them into shared styles, grids, and typography to kick off designing a design system from scratch.
Figma is free to use. Sign up here: bit.ly/2WRIe6s
Figma File: www.figma.com/community/file/...
#Figma #DesignSystem #DesignSystems #UXDesign - Наука та технологія
6:00 Typography
35:30 Color
44:30 Create color shade with gradient(tips)
Thanks man !!
Animations With Figma ua-cam.com/video/aMFUuGZ9LEs/v-deo.html
For a moment I asked myself: "How does the lady in the video keep that smile for 1 hour?" 🤣🤣🤣
hahaha
Thanks for making me laugh :D
You idiots they took a picture of her
i just think like that, hmm the lady keep smile , hahahaha
LOL I thought the same
Thanks for doing these. I feel I just watched an episode of Bob Ross if he was a UI/UX designer
Totally! The modern day Bob Ross of digital design!
This was really great! I’m looking forward to watching the whole process. You have an amazing teaching style! 🙏💥
Just a little fact from someone who loves math: it's a myth that the golden ratio is found "everywhere in nature". It's found in cacti and in some flowers, but most other places it's "found" are by people who are explicitly looking for it because they've heard it's so cool.
Don't get me wrong, it's *mathematically* an amazing number - a Pisot number (irrational number whose powers approach integers) - the most irrational number (by a certain measure of irrationality) in existence - its continued fraction form contains an infinite series of 1s - etc.
But it is *not* actually aesthetically much more special than any other number except because people use it all the time so we're used to seeing it and it looks familiar!
ua-cam.com/video/sj8Sg8qnjOg/v-deo.html
AGREED 100%! I'm a math teacher, plus run a math/philosophy group. I have studied the Golden Ratio (GR) extensive, and written on it. It is indeed a very interesting mathematical object. But as noted, common/public perception is generally misinformed. In addition to 'The Great Dream's' comments, the GR as "most pleasing" ratio rectangle is unsupported. A "famous" experiment was done in the late 1800s, but has not been reproduced. For those truly interested in the matter, google "Keith Devlin golden ratio": he has thoroughly researched it, and spoken at length on it. TL/DR: Some GR claims are supported, many are not, a few are "grey".
@@swamihuman9395 concur, not to mention that everything may be thought of as mathematical.
@@ddellagostino Have you checked out the MATHEMATICAL UNIVERSE HYPOTHESIS, MUH (by Max Tegmark)? Not that I'm proponent, or have any definite assessment, but it is at least "interesting". Essentially, it states that the Universe is not merely described by math, but the the Universe is, in fact, a math object! Interested to hear your thoughts...
BTW, my math/philosophy group can be found on Facebook: www.tinyurl.com/WingCircle.
The more complex designs I’m creating, the more I love and appreciate design systems 🤩
Love that you're doing this series! Considering the move from Sketch and this is a really great walkthrough.
Do it, dude. Sketch is great, but there is so much more in Figma
Very helpful! New to figma but it's been fun and easy to get into a productive groove. Thanks for the help!
I love Figma - thank you for making the tool & resources to educate designers around the world! - Fellow Product Designer
Just what I'd been looking for! Thanks, Rogie! You're great!
Why did I pay for a Figma tutorial online class? 😭this is way better and it's free 😭
This is so great! thank you so much, I am just learning to build my first Design Systems, these tips are super insightful
😉
This is an amazing resource. One thing I would love to see is that if you could list the plugins you used in this video in the description. Thanks.
Thank you for doing this, Really helpful
Thank you for this great video! Need more of this content 🔥
Your an incredible guy dude, keep sharing your knowledge! Cheers from brazil
When you randomly come across family while looking for tutorials. ROGIEEEEE!! Holla! Thanks for this! It really helped!
For some reason, i felt people work in Figma always choose to use bigger font size. However if you look at the website, even this website, you will see the base case is 14px. Not only that, the is only 20px. Shocking?
What a awesome tutorial love the 46:00 tip thank you. Thanks
really really helpful! Love Figma forever!
Well put together 👏 an element of improvement would be word economy, it could be 1/3 the length, I say that with respect and good intentions 😊
Great started! Thank you for made it.
wow! thanks Figma team for this video 🙂
Thank you so much for the clarity and step-by-step examples! One hour flew by with you!
Great course! Thank you!
Appreciated all your works. It's freakingly amazing. Thank you verrrry much.
Thank you lord for this. Thank you Figma team. 👏🏾👏🏾👏🏾👏🏾👏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾
Very useful stuff!
Thanks a lot.
I am so grateful for this!
23:15 - The shortcut to increase or decrease font size is Cmd+shift+
Thanks for doing this series! Is there a way that I can join in for these livestreams?
I would love how you use variants and auto layouts when creating a design system
thing is he isn't using variants. The variant feature was added in October 22. A lot the complex naming etc. is useless
Highly appreciated for sharing this!!!!
Would be great if you could drop all the links mentioned in the video in the description.
commenting on this just so hopefully someone from the figma team drops them
Just check his Figma file. There are all links posted in the description.
@@maximbrykov Thanks bro
up
The links are in the figma file link www.figma.com/community/file/867135839870202854
Thanks for this!! love this
Your style of talking and comedy reminds me so much of Mac in Always Sunny. Also great stuff, super helpful.
Can you also make a video on how to "use a design system" to create different layouts and end user screens?
Great tutorial! How do you do at ~13:30 showing the buttons you hitting?! (CMD, SHIFT...)
Very confident and very frank!!
Does Figma allow for text style overrides similar to sketch for attributes besides color like weight, capitalization, italics, etc? Would like to avoid creating alts if possible.
This s so useful! Thank you
great video. Thank you so much.
I'm two years late, this is cool-overwhelming stuff. love the FONTS t-shirt!
Man this is exactly what I needed, thanks.
This is gold! Thank you
Thank you Figma... I am only starting today.. but looking forward
Such a good questions 🙌
Amazing video, thank you!
thank you so much for your help)it is a great video!!
Thank you so much, Teacher.
Very good, thank you.
Can you access all the articles mentioned in the video? Or get the name of plugins?
I had a color defined for my Typography but when I made a text style out of it, the color wasn't copied to. Why is that?
thnks Figma team :)
Thanks! But consider recording at 60 fps next time please!
Great video sir,
Can I use this design system for my freelance work?
great content, I really got value from this. thank you so much
I really needed the links on this videos.
Thanks for your all efforts.
Anyone know the link he was referred to at the end?
Hey @Rogie you didn't drop the link to those articles used on the video. Please drop so we can read through. Thanks
He put everything in description of the Figma file on the Figma Community www.figma.com/community/file/867135839870202854/Build-it-in-Figma%3A-Design-Systems-%E2%80%94%C2%A0Components-Continued...
I have a question about the font size choices - If you end up just adjusting the font sizes to 14/16/24... and so on then what's the point of doing all of the multiples of the Golden Ratio? Shouldn't there just be a standard font size and line height that is always used in any application or design system?
Great questions! 👍🏻
I was thinking the same!!
Did you get an answer?
the dark mode background tip is fire
I have checked his file and I found out that the line height of the -Bold- is set auto.
Why are line height of -Body- and -Small- typo style are set? Although others are auto.
what font you using for 'typography' word?
great video!
Thank you for your video!
I just have one question: Why do we need so many Typography styles? Is it for WEB and APP? App's screen is small, I am not sure about very big and very small sizes...
for fun, of course...
great tutorial. thanks! does anyone have the color palettes plugin url?
Where can I find the speaker's social media? I like the way he explains things, makes it easy to understand.
really great! but please resize or use a laptop to record bc unless someone is using desktop to watch this, its impossible to read
What about multiple-font type systems? Anybody have any good links?
i learn lot thanks mentor.
would you provide links to those Typo Sites?
Is there a way to get the links he talks about?
Can you post the link to the flexible grid system? I wish there was a way to search comments it's probably here already.
why did you also make use of the multiples of 8 after using 1.62
Thanks for this sir
Nice video.
in middle he is telling about sharing the article from where we can learn the line height , but i am not getting it where he have mentioned that.. can anybody just help me.
anyone knows where i can attend his class? Rogie king?
where i can see the chat .he mentioned about
I might get this all wrong becouse im a noob. but when you first multiply the font size with 1.62 and after that adjust it to a factor of eight. In my world you are not using the golden ration. You might as well just do the fonts with a factor of eight?
Time to use Figma, thanks
can you share the template?
Can you please share the website link you are using in the videos
Please where can i find link to the plugin for color palette. I'm a new UX designer. Thank you.
Thank you so much!
Thanks buddy ✨✨✨
If we create design system in the start of design the product after that when we combine elements in UI screen and if they are not looking good then what we need to do ?
I believe the person the person building the design system has to consider how the product is going to look like when building out the design system. Also, the process is iterative and it is expected to evolve. What do you think?
@@idrisayinde1612 hey bro, I need your help please
@@danekwunife4893 what would you like me to help you out with?
where are those links?
The worst design error is the webcam placement position haha. The rest is awesome.
How do we create a library in Figma?
Figma is the best for design system
Praying to the pet hair Gods. Thank you for this video.
Does anyone know why he's increasing or decreasing the spacing by percentage because 'it might not maintain the right relationship doing -1, because that's a fixed value.' What does this mean? Maintain the right relationship to what?
Thanks!
Ah, is it because when you change other values like line height and font size, they then change with the letter spacing in a consistent way?
was that Pablo Stanley talking?
can somebody link the articles here?
Following
For anyone looking for an intro to creating styles in Figma (rather than how to develop a typographic brand identity), skip straight to 28:20.
it will be helpful if any can send me links for the color paletes PLUGINS
Rogie! 👋