Build it in Figma: Create a Design System - Foundations

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/...
#Figma #DesignSystem #DesignSystems #UXDesign

[@fajleyrabbe2930]

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

[@theanalyst9629]

Thanks man !!

[@plutonium.]

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

[@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!

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

[@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 🤩

[@fernakiki]

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

[@sarahtara]

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

[@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?

[@donghuantonyli6223]

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

[@mariachiara9690]

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

[@dhritimansen3111]

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

[@jeremykerner2100]

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

[@gc_marcelli]

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

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

[@paulocgrf]

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

[@Heydjcam]

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

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

[@human-connections]

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

[@CashNet72]

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

[@ninajarah]

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

[@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]

😉

[@victoramusan3980]

Thank you for doing this, Really helpful

[@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 😊

[@gaelgundin2496]

the dark mode background tip is fire

[@luanacuzzo9693]

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

[@priceandproduct]

Thanks for your all efforts.

[@jvfontenele]

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

[@srishti7544]

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

[@caophuvinhfplhcm]

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

[@yu-tingchang114]

Highly appreciated for sharing this!!!!

[@Samuels691]

This is gold! Thank you

[@TheSuesmitsa]

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

[@lucidcannibal]

I really needed the links on this videos.

[@osherezra8460]

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

[@User_hoalheia]

Amazing video, thank you!

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

[@ytRap007]

thank you very much for this support for the community.

[@thesisterhoodspot]

Amen!! Mo

[@erikbriones]

wow! thanks Figma team for this video 🙂

[@dansolo360]

I am so grateful for this!

[@jokerrhe]

Thank you so much!

[@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?

[@shingtak2388]

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

[@ruaxe3478]

really really helpful! Love Figma forever!

[@whatsnewnow4469]

i learn lot thanks mentor.

[@sultanahmed9694]

Very confident and very frank!!

[@amazingworld9595]

Figma is the best for design system

[@maychai2101]

Thanks for this!! love this

[@ekaterinadergam4596]

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

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

[@stanmx]

Great started! Thank you for made it.

[@educobuci]

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

[@bnatalie]

Such a good questions 🙌

[@crisdimarco]

Great course! Thank you!

[@tonimaunde]

Nice video.

[@dothaihuy]

great video. Thank you so much.

[@Ntnismink]

Thank you so much, Teacher.

[@isaacmelchizedek7777]

Very useful stuff! Thanks a lot.

[@daisya2950]

thnks Figma team :)

[@MassivMobile]

This s so useful! Thank you

[@kalakaarabhishek3669]

Thanks buddy ✨✨✨

[@adegnikaobachola7010]

Thanks for this sir

[@darahp1398]

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

[@gloomybloom3674]

Very good, thank you.

[@ignacioeestrada]

great video!

[@dallas-cole]

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

[@andigomez1993]

Man this is exactly what I needed, thanks.

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

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

[@emilyemslee]

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

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

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

[@sohhamm]

Time to use Figma, thanks

[@basuki094]

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

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

[@sumitpatil2100]

She reminded me of the movie: Smile 💀

[@williamcooper7790]

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

[@simonuxdesigns]

You got me at golden ratio

[@meghadarekar6726]

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

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

[@user-fm2rx2pr9x]

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

[@okupaonome1032]

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

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

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

[@masonicsf]

Rogie! 👋

[@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?

[@siscashservicesltd9419]

What a Mad Boi typography GIG for 30 mins

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

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

[@rebeckahanson7931]

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

[@yueyin3374]

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

[@jem5451]

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

[@arundhatitiwari5333]

How do we create a library in Figma?

[@aghahowadaniel6090]

that woman creeped e out for an entire hour hahaha

[@user-uw3ew4sv3z]

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

[@ilyassenajah4524]

is this the genuis who made figma?

[@meghanakankara2883]

was that Pablo Stanley talking?

[@achintyaagrawal]

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

[@rogerstich7603]

would you provide links to those Typo Sites?

[@AndiGalpern]

Praying to the pet hair Gods. Thank you for this video.

[@marwinthedja5450]

@3:48 'kay fingers crushed ;)