Design System 101: free Beginner Figma Tutorial for UIUX Designers

[@penguinxed]

As a procrastinator, I prefer these kinds of short tutorials, thank you :)

[@AlienaCai]

Thanks for letting me know!

[@YuniataSilvnaa-w5t]

I'm a front-end developer with 10 years of experience, and the knowledge you shared in your video is invaluable. Thank you for making this information available for free on KZbin; well done!

[@mohammednajeb3716]

You are one of the few people who explains in a very short and precise way as you go straight into the point, thank you so much, keep up the amazing work.. My best regards.

[@AlienaCai]

Thank you Mohammed! I'm glad it was helpful 😄

[@Vinsomer]

Thank you so much for this, Aliena. I'm still fairly new to everything, and the whole idea of components, variables, master components, and assets scare me. Especially when I see videos of people using and making them so casually and quickly. It's nice to get a slowed down version of how and why to use them. And you keep driving the point of using community resources, something I never would have looked at without you. Thank you! ❤

[@AlienaCai]

Thank you so much for letting me know!~

[@AlienaCai]

P.S. A shortcut to select the right layer in design system is holding Command or Control so that you don't have to click multiple times. (Shout out to Theo for reminding me) Help me shape my Figma course 👉 forms.gle/qZU7hVN7gT2o7Tbe9 Figma 👉 psxid.figma.com/mtvfdvfjvpps Figma professional plan 👉 psxid.figma.com/sp3ulqgt744y-cb44ct Enjoy!

[@Mumont]

Can you believe that I was waiting for this info from my first job as UX junior designer and none explain that like you? Finally, I resigned to this company trying to figure it out few things. Well known fintech company. This info is actually pure gold....thank u from Australia. The majority of information on design systems revolves around creating a basic version and this is ok but no enough. However, the experience of working with a design system already made it within a large corporation is vastly different, and you nail it. You made a clear and spectacular 15 min video explaining something that many senior UX can't do it. Thank u again.

[@AlienaCai]

I am so glad that this video was helpful. I experienced it myself so I know what's lacking out here. I've learned the basics of how to create some basic style myself. But after I joined eBay, I realized that tech companies have a dedicated team on creating design systems, and most of us need to learn how to use it, rather than how to create one. I hope more people can find this video 😄

[@Cindyreella_]

I love how fresh, informative and useful your videos are.

[@AlienaCai]

Thank youuu

[@aleor614]

I'm just starting my journey from Graphic Designer to UX Designer! Your videos have been super helpful, thanks a lot :D

[@AlienaCai]

Thank you Alejandra!

[@anaisabel19]

I found your channel yesterday and I couldn’t be more happy that I did ❤️! I’ve been binge watching ur videos and Im loving it so far ❤️

[@AlienaCai]

Yay! Thank you!

[@SJoe-js2lk]

thanks for always clearly defining things.. small thing but it makes such a difference! with so much ui/ux jargon, i find it's easy to forget and lose focus when i'm designing...!

[@pradyumnaux]

4:09 instead of clicking multiple times for selecting an element just hold cntrl/cmd and then click that element. Hope it helps😇

[@AlienaCai]

Totally! Thanks so much for sharing.

[@theoriviere6219]

Great video again ! Love your videos As a tip, we can select a sub-element by holding ctrl in Figma, and click. Instead of clicking several times to access it

[@AlienaCai]

😮 O.M.G... That works so smooth 🤣🤣🤣 (Command in Mac) I have to add this in my video description.

[@AlienaCai]

Okay I've just added this to the description and the pinned comment. Thank you!!

[@vanitapanda3151]

so amazing ... your videos have really helped me as a ux designer ! thank you

[@AlienaCai]

Thank you Vanita!

[@gloriacassidy]

Thank you for this. Could you please make another for a mobile design?

[@djashawe88923]

This tutorial was very helpful. I would like to see more practical tutorials like this where you use popular design systems for ios and android. I'd greatly appreciate it if you could tell me what steps should be taken in order to access components from the Design System file directly into my project file without switching tabs(import? publish library? share? copy link?)? 💯👍🤓

[@coding-jungle]

Thank you for such a detail video.

[@Maria-m3v4d]

I am starting with figma. Thank you for this wideo ❤

[@AlienaCai]

You're welcome 😊

[@jproud06]

That was awesome, thank you. Really useful

[@miraosato2976]

Thank u so much …as a beginner this helped

[@AlienaCai]

Thanks for letting me know!

[@stewdean]

A set of Figma components is not a design system UNLESS those components are also implemented by the developers technically. Often, this is visible in Storybook. Otherwise it is a set of components. A design system is as much about the end code as the designs in Figma. So if the developers don't have the component already built code and the names/tokens are not the same as their components then you are not working with that company's design system.

[@starrwithin]

You're right because a design system is filled with elements that are already coded into the website so if something needed to be changed it would be through the design system and like you mentioned it probably needs to be developed for it to actually be within that system

[@priceandproduct]

It's a wholesome video! Thanks.

[@yeshilhendup430]

excited

[@Leochuks456]

Thanks for this amazing video really appreciate

[@leticiabraun2909]

At 15:19, what exactly did you do for the column "Photo / Vel cras auctor ...." to double ??

[@WarrenJay-l2y]

Thank you!

[@Sendra666]

Great video thank you ❤

[@user-cz9im]

Hello! Please can you tell me which computer will be the best for ui/ux designer? Thanks!

[@tracyy6619]

Is the requirement to create one's own icons and components to avoid accusations of plagiarism still prevalent? I believe few years ago, we have still been taught to create original components on sketch or icons on Illustrator to prevent potential issues. I'm curious if this standard has shifted ?

[@AlienaCai]

Ohhhh, I usually use material icons in 90% of my products, check out here: fonts.google.com/icons These are high quality open source icons from google that also make it easy for engineers to implement. If you are working with a company that has its own design system and icons, then use theirs. But other scenarios, I suggest you to go with material icons.

[@Peace_seeker]

make more vedios on figma please you teach exccelently

[@SamarHayatOfficial]

Here I'm again refreshing my brain data😂

[@mahammushtaq4262]

i havent see component overview on my design system whats the reason?

[@balukarithika1223]

I am really thank you to give this video. It is very helpful .so,You will give the more and more video . please

[@AlienaCai]

Thank you, I will!

[@rush2004]

Awesome - thank u

[@kawaiihikari0]

so with design systems are they used with the components included? and the templates?

[@OscarC789]

Everything turned purple when I was adjusting the side panel 😭 idk how to put it back how it was 😂

[@subodhkamble7150]

hey alina so If I have to do changes in design system at one place will it reflect everywhere like where the element is used basically I want to ask can I use this for making my own product ? and will it be okay to use this for making my own product

[@AlienaCai]

Great question. You can use a pre-built design system for your own product. But I'd suggest using the ones designed for everyone to use it like tailwindui, instead of brand-specific ones like Shopify/ Uber. After all, your design needs to speak for its brand identity, not some other company's brand identity. Larger Design system like tailwindui may allow more customization and better off with IP.

[@petergangmei]

It’s very helpful 🎉

[@djhaulix1581]

dammm its sooo diccicult as helll. Now I am feeling like seriously i don't know anything about figma. My dream of working in a big company seriously narrowing down a bit now.

[@AlienaCai]

Oh nooo, there are some other tutorials videos I created on wireframing, prototyping, and auto layout. To be honest, working with a design system won’t come natural. I’d suggest to start from other places 👍👍

[@djhaulix1581]

thanks for your response@@AlienaCai

[@xingyu1088]

支持支持❤

[@AlienaCai]

谢谢谢谢❤

[@froilanmartinez5752]

.