Design System 101: free Beginner Figma Tutorial for UIUX Designers

Ғылым және технология

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

Пікірлер: 50

  • @penguinxed
    @penguinxed Жыл бұрын

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

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    Thanks for letting me know!

  • @mohammednajeb3716
    @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

    @AlienaCai

    Жыл бұрын

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

  • @Vinsomer
    @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

    @AlienaCai

    Жыл бұрын

    Thank you so much for letting me know!~

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

  • @anaisabel19
    @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

    @AlienaCai

    Жыл бұрын

    Yay! Thank you!

  • @SJoe-js2lk
    @SJoe-js2lk11 ай бұрын

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

  • @Cindyreella_
    @Cindyreella_ Жыл бұрын

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

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    Thank youuu

  • @Mumont
    @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

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

  • @aleor614
    @aleor614 Жыл бұрын

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

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    Thank you Alejandra!

  • @jproud06
    @jproud066 ай бұрын

    That was awesome, thank you. Really useful

  • @priceandproduct
    @priceandproduct3 ай бұрын

    It's a wholesome video! Thanks.

  • @vanitapanda3151
    @vanitapanda3151 Жыл бұрын

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

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    Thank you Vanita!

  • @yeshilhendup430
    @yeshilhendup430 Жыл бұрын

    excited

  • @rush2004
    @rush20047 ай бұрын

    Awesome - thank u

  • @djashawe88923
    @djashawe8892311 ай бұрын

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

  • @miraosato2976
    @miraosato2976 Жыл бұрын

    Thank u so much …as a beginner this helped

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    Thanks for letting me know!

  • @user-kt6gu1mm1g
    @user-kt6gu1mm1g Жыл бұрын

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

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    You're welcome 😊

  • @petergangmei
    @petergangmei11 ай бұрын

    It’s very helpful 🎉

  • @theoriviere6219
    @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

    @AlienaCai

    Жыл бұрын

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

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

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

  • @pradyumnaux
    @pradyumnaux6 ай бұрын

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

  • @AlienaCai

    @AlienaCai

    6 ай бұрын

    Totally! Thanks so much for sharing.

  • @SamarHayatOfficial
    @SamarHayatOfficial4 ай бұрын

    Here I'm again refreshing my brain data😂

  • @Peace_seeker
    @Peace_seeker2 ай бұрын

    make more vedios on figma please you teach exccelently

  • @balukarithika1223
    @balukarithika12232 ай бұрын

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

  • @AlienaCai

    @AlienaCai

    2 ай бұрын

    Thank you, I will!

  • @user-cz9im
    @user-cz9im Жыл бұрын

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

  • @kawaiihikari0
    @kawaiihikari09 ай бұрын

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

  • @stewdean
    @stewdean6 ай бұрын

    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

    @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
    @tracyy66192 ай бұрын

    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

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

  • @xingyu1088
    @xingyu1088 Жыл бұрын

    支持支持❤

  • @AlienaCai

    @AlienaCai

    Жыл бұрын

    谢谢谢谢❤

  • @OscarC789
    @OscarC7895 ай бұрын

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

  • @djhaulix1581
    @djhaulix15819 ай бұрын

    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

    @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

    @djhaulix1581

    8 ай бұрын

    thanks for your response@@AlienaCai

  • @froilanmartinez5752
    @froilanmartinez57526 ай бұрын

    .

Келесі