Design System 101: free Beginner Figma Tutorial for UIUX Designers

Подписаться 98 тыс.

Просмотров 50 тыс.

50% 1

My Figma course 👉 fasttrackux.com
Figma 👉 psxid.figma.com/mtvfdvfjvpps
Figma professional plan 👉 psxid.figma.com/sp3ulqgt744y-...
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)
Welcome to our free Figma Design System tutorial, specifically crafted for aspiring UI/UX designers! As a UI/UX designer working in the tech industry, I wish I had access to resources like this when I was starting out, so I could have been more confident in my day-to-day tasks.
Using a design system is a crucial part of any UI/UX designer's role, and this video aims to provide you with the knowledge and skills to comfortably navigate and utilize design system components in Figma. By the end of this tutorial, you'll be well-equipped to recreate existing products or bring your own unique designs to life.
Join us as we dive into the world of design systems and explore how to efficiently work with them in Figma. Discover the benefits of design systems, master the fundamentals of Figma, and learn how to create, maintain, and collaborate using a design system. Don't miss this opportunity to level up your UI/UX design skills and become more confident in your job!
#Figma #DesignSystem #UIUXDesign #Tutorial #DesignSkills

Наука

Опубликовано:

10 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@penguinxed Год назад

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

@AlienaCai Год назад

Thanks for letting me know!

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

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

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

@jproud06 6 месяцев назад

That was awesome, thank you. Really useful

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

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

@priceandproduct 3 месяца назад

It's a wholesome video! Thanks.

@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

@rush2004 7 месяцев назад

Awesome - thank u

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

@yeshilhendup430 Год назад

excited

@petergangmei 11 месяцев назад

It’s very helpful 🎉

@vanitapanda3151 Год назад

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

@AlienaCai Год назад

Thank you Vanita!

@miraosato2976 Год назад

Thank u so much …as a beginner this helped

@AlienaCai Год назад

Thanks for letting me know!

@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?)? 💯👍🤓

@kawaiihikari0 9 месяцев назад

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

@user-cz9im Год назад

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

@SamarHayatOfficial 5 месяцев назад

Here I'm again refreshing my brain data😂

@user-kt6gu1mm1g Год назад

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

@AlienaCai Год назад

You're welcome 😊

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

@pradyumnaux 6 месяцев назад

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

@AlienaCai 6 месяцев назад

Totally! Thanks so much for sharing.

@balukarithika1223 2 месяца назад

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

@AlienaCai 2 месяца назад

Thank you, I will!

@Peace_seeker 3 месяца назад

make more vedios on figma please you teach exccelently

@stewdean 6 месяцев назад

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

@tracyy6619 3 месяца назад

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 2 месяца назад

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.

@OscarC789 6 месяцев назад

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

@xingyu1088 Год назад

支持支持❤

@AlienaCai Год назад

谢谢谢谢❤

@djhaulix1581 9 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

thanks for your response@@AlienaCai