Build it in Figma: Create a Design System - Foundations

[@fajleyrabbe2930]

6:00 Typography 35:30 Color 44:30 Create color shade with gradient(tips)

[@theanalyst9629]

Thanks man !!

[@EchoEnglishPodcast]

Animations With Figma kzbin.info/www/bejne/l36phqh9j55_e9U

[@thegreatdream8427]

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!

[@vmedium]

kzbin.info/www/bejne/qZubhJpuptOdhck

[@swamihuman9395]

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".

[@ddellagostino]

@@swamihuman9395 concur, not to mention that everything may be thought of as mathematical.

[@swamihuman9395]

@@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...

[@swamihuman9395]

BTW, my math/philosophy group can be found on Facebook: www.tinyurl.com/WingCircle.

[@katscandance]

The more complex designs I’m creating, the more I love and appreciate design systems 🤩

[@mandadtabrizi8833]

Thanks for doing these. I feel I just watched an episode of Bob Ross if he was a UI/UX designer

[@sarahtara]

Totally! The modern day Bob Ross of digital design!

[@fernaaki]

Why did I pay for a Figma tutorial online class? 😭this is way better and it's free 😭

[@albertalbaba5101]

For a moment I asked myself: "How does the lady in the video keep that smile for 1 hour?" 🤣🤣🤣

[@sultanahmed9694]

hahaha

[@TomekSkowronek]

Thanks for making me laugh :D

[@ThuyTran-zf3cb]

You idiots they took a picture of her

[@bl_int]

i just think like that, hmm the lady keep smile , hahahaha

[@idalyruiz2544]

LOL I thought the same

[@windmaomao]

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?

[@alextgs3715]

🎯 Key Takeaways for quick navigation: 00:00 🤖 Introduction au système de conception - Définition et importance d'un système de conception, - Différenciation entre un système de conception et un kit UI. 01:11 🛠️ Détails de conception - Approche méthodique et parfois fastidieuse de la création de composants, - Vue d'ensemble du processus de conception sur cinq séries. 02:06 🎩 Astuces de conception - Utilisation de techniques pour simplifier le processus de conception, - Comparaison avec un show de cuisine pour illustrer les techniques de gain de temps. 03:03 🌐 Figma Community - Utilisation de Figma Community pour partager le progrès, - La communauté Figma est en phase bêta. 04:01 📚 Approfondissement de la typographie - Discussion sur la typographie, les rythmes typographiques et les choix de polices, - L'importance de la typographie dans le système de conception. 05:12 🖌️ Création d'un guide de style - Processus de création d'un guide de style numérique, - L'évolution et la flexibilité d'un système de conception. 06:06 📏 Échelle typographique - Construction d'une échelle typographique, - Utilisation de la méthode de la "Golden Ratio" pour l'échelle. 07:32 🖋️ Exemples de typographie - Illustration de l'utilisation de différentes tailles de police pour différents besoins, - Exemple de création d'une hiérarchie de titres et de sous-titres. 08:58 🎨 Introduction aux couleurs - Discussion sur l'importance des choix de couleurs dans le système de conception, - Référence aux outils et plugins pour aider à la sélection des couleurs. 10:11 📚 Ressources pour les couleurs - Référence à des livres et articles sur les théories des couleurs, - Lien entre la conception de couleurs et la musique. 11:20 🔗 Liaison des couleurs avec la typographie - Discussion sur la manière dont les couleurs influencent la lisibilité de la typographie, - Utilisation de la théorie des couleurs dans la pratique de la conception web. 12:31 🧱 Construction d'une échelle de couleurs - Processus de création d'une échelle de couleurs pour le système de conception, - Importance de la cohérence et de l'harmonie dans le choix des couleurs. 13:27 🌈 Application des couleurs - Application pratique des couleurs dans les composants du design, - Création de styles de couleurs dans Figma. 14:37 ⚙️ Développement et responsive design - Discussion sur le développement front-end et l'importance du design responsive, - Utilisation de Figma pour simuler différents écrans et tailles de dispositifs. Made with HARPA AIl

[@paulocgrf]

23:15 - The shortcut to increase or decrease font size is Cmd+shift+

[@YUGlMOTTO]

I love Figma - thank you for making the tool & resources to educate designers around the world! - Fellow Product Designer

[@dmitriireadz6378]

Would be great if you could drop all the links mentioned in the video in the description.

[@AbaCornejo]

commenting on this just so hopefully someone from the figma team drops them

[@maximbrykov]

Just check his Figma file. There are all links posted in the description.

[@shreehariaravind2260]

@@maximbrykov Thanks bro

[@julianaazevedo2238]

up

[@jules7926]

The links are in the figma file link www.figma.com/community/file/867135839870202854

[@jeremykerner2100]

Love that you're doing this series! Considering the move from Sketch and this is a really great walkthrough.

[@gaminwithgc]

Do it, dude. Sketch is great, but there is so much more in Figma

[@mariachiara9690]

Thank you so much for the clarity and step-by-step examples! One hour flew by with you!

[@sarahtara]

This was really great! I’m looking forward to watching the whole process. You have an amazing teaching style! 🙏💥

[@dhritimansen3111]

Thank you lord for this. Thank you Figma team. 👏🏾👏🏾👏🏾👏🏾👏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾

[@human-connections]

Your style of talking and comedy reminds me so much of Mac in Always Sunny. Also great stuff, super helpful.

[@Hope4BettaDayz]

When you randomly come across family while looking for tutorials. ROGIEEEEE!! Holla! Thanks for this! It really helped!

[@Heydjcam]

Very helpful! New to figma but it's been fun and easy to get into a productive groove. Thanks for the help!

[@ninajarah]

I'm two years late, this is cool-overwhelming stuff. love the FONTS t-shirt!

[@newtonheath92]

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.

[@specialkate00]

This is so great! thank you so much, I am just learning to build my first Design Systems, these tips are super insightful

[@theophiluschikadavid7046]

😉

[@kelewebner5880]

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.

[@vantage789]

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?

[@lisamithani2163]

Great questions! 👍🏻 I was thinking the same!!

[@mrrebelbunny5316]

Did you get an answer?

[@gaelgundin2496]

the dark mode background tip is fire

[@ytRap007]

thank you very much for this support for the community.

[@srishti7544]

Can you also make a video on how to "use a design system" to create different layouts and end user screens?

[@victoramusan3980]

Thank you for doing this, Really helpful

[@luanacuzzo9693]

Just what I'd been looking for! Thanks, Rogie! You're great!

[@samduss4193]

I did not build full project yet but also need to know that de dev can also scale all up and down according to device at the end for testing. I feel that when you have one visual with the right proportion it is not that to convert as much for other sizing

[@tobias3581]

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 😊

[@jvfontenele]

Your an incredible guy dude, keep sharing your knowledge! Cheers from brazil

[@chakhmanmohamed9436]

I would love how you use variants and auto layouts when creating a design system

[@vr2766]

thing is he isn't using variants. The variant feature was added in October 22. A lot the complex naming etc. is useless

[@caophuvinhfplhcm]

Appreciated all your works. It's freakingly amazing. Thank you verrrry much.

[@TheSuesmitsa]

Thank you Figma... I am only starting today.. but looking forward

[@priceandproduct]

Thanks for your all efforts.

[@hereandnow3511]

really great! but please resize or use a laptop to record bc unless someone is using desktop to watch this, its impossible to read

[@yu-tingchang114]

Highly appreciated for sharing this!!!!

[@gilbertumeh]

Hey @Rogie you didn't drop the link to those articles used on the video. Please drop so we can read through. Thanks

[@HeroNinja]

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...

[@darahp1398]

Anyone know the link he was referred to at the end?

[@osherezra8460]

What a awesome tutorial love the 46:00 tip thank you. Thanks

[@lucidcannibal]

I really needed the links on this videos.

[@Mimibldr]

That workflow is not realistic. Design system is not the foundation but the result of a lot of design explorations through mockups. In Figma, elements are saved as Main Components within the original mockup. And so deleting the mockup results in deleting the main component. That is too bad, because we need a place where main components are centralized as one unified design system, so they can be organized and maintained overtime, and we should be able to delete old mockups safely without impacting the library/design system. Figma does not support this logic or workflow. In Figma, library/design system are permanently attached to old mockups. It is not possible to move main components into a design system file. It is not possible to import design system from a team file (weird). Publish library does not create dedicated design system file. Design System feature conflicts with Library feature, they do not work harmoniously together. It's a pain that Figma Support does not respond.

[@erikbriones]

wow! thanks Figma team for this video 🙂

[@Samuels691]

This is gold! Thank you

[@yue_el_azur]

Great tutorial! How do you do at ~13:30 showing the buttons you hitting?! (CMD, SHIFT...)

[@emilyemslee]

Where can I find the speaker's social media? I like the way he explains things, makes it easy to understand.

[@dansolo360]

I am so grateful for this!

[@ovrzls]

Can you post the link to the flexible grid system? I wish there was a way to search comments it's probably here already.

[@amazingworld9595]

Figma is the best for design system

[@ruaxe3478]

really really helpful! Love Figma forever!

[@ellradio04]

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.

[@jem5451]

Please where can i find link to the plugin for color palette. I'm a new UX designer. Thank you.

[@danny4541]

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?

[@maitrishah2364]

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.

[@vr2766]

DISCLAIMER if you watch this after October 2020, then a lot of the methodology is not applicable since the variant feature was added. They should seriously have added a disclaimer for that in the video title....

[@shingtak2388]

Thank you for this great video! Need more of this content 🔥

[@basuki094]

Great video sir, Can I use this design system for my freelance work?

[@sultanahmed9694]

Very confident and very frank!!

[@rebeckahanson7931]

Can you access all the articles mentioned in the video? Or get the name of plugins?

[@educobuci]

Thanks! But consider recording at 60 fps next time please!

[@stanmx]

Great started! Thank you for made it.

[@bnatalie]

Such a good questions 🙌

[@maychai2101]

Thanks for this!! love this

[@crisdimarco]

Great course! Thank you!

[@okupaonome1032]

why did you also make use of the multiples of 8 after using 1.62

[@whatsnewnow4469]

i learn lot thanks mentor.

[@andigomez1993]

Man this is exactly what I needed, thanks.

[@ekaterinadergam4596]

thank you so much for your help)it is a great video!!

[@loveleenjoshi9511]

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.

[@Ntnismink]

Thank you so much, Teacher.

[@MichalHadari]

great tutorial. thanks! does anyone have the color palettes plugin url?

[@isaacmelchizedek7777]

Very useful stuff! Thanks a lot.

[@MassivMobile]

This s so useful! Thank you

[@daisya2950]

thnks Figma team :)

[@kalakaarabhishek3669]

Thanks buddy ✨✨✨

[@jokerrhe]

Thank you so much!

[@RahulSharma-l8n6v]

Can you please share the website link you are using in the videos

[@dothaihuy]

great video. Thank you so much.

[@nastasyalondinium1148]

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...

[@davidshapira7565]

for fun, of course...

[@dallas-cole]

The worst design error is the webcam placement position haha. The rest is awesome.

[@tonimaunde]

Nice video.

[@rogerstich7603]

would you provide links to those Typo Sites?

[@sohhamm]

Time to use Figma, thanks

[@williamcooper7790]

Thanks for doing this series! Is there a way that I can join in for these livestreams?

[@ignacioeestrada]

great video!

[@koscarico]

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?

[@adegnikaobachola7010]

Thanks for this sir

[@gloomybloom3674]

Very good, thank you.

[@iamfrankstallone]

"Hold on... I have a small pet hair on my mouse that is not allowing me to do anything." - This is why I'm here. 🤣

[@ElizabethBuchta]

Is there a list of the links he used?

[@irfanali-cr6up]

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 ?

[@idrisayinde1612]

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?

[@danekwunife4893]

@@idrisayinde1612 hey bro, I need your help please

[@idrisayinde1612]

@@danekwunife4893 what would you like me to help you out with?

[@achintyaagrawal]

What about multiple-font type systems? Anybody have any good links?

[@mymarginalia8349]

Is there a way to get the links he talks about?

[@arundhatitiwari5333]

How do we create a library in Figma?

[@nellblacklaw-jones8929]

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!

[@nellblacklaw-jones8929]

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?

[@AS-ld5mz]

what font you using for 'typography' word?

[@simonuxdesigns]

You got me at golden ratio

[@meghadarekar6726]

great content, I really got value from this. thank you so much

[@thesisterhoodspot]

Amen!! Mo

[@axelhunger]

14:27 exist plugins in figma