Base Components with Component Properties in Figma!

Learn about the distinct and insane benifits of using base components with component properties in Figma!
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/...
Use the AMSUBSCRIBER voucher code to get 50% off!
Be sure to subscribe and hit the notification icon! It really helps me help you and others like you be better designers, freelancers, entrepreneurs, and people in general!
/ @amdesignanddev
.
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....
.
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
.
👉 Follow me on Twitter and LinkedIn for more content.
/ asaadmahmood5
/ asaadmahmood

Пікірлер: 55

  • @AMDesignAndDev
    @AMDesignAndDev10 ай бұрын

    Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use the AMSUBSCRIBER voucher code to get 50% off!

  • @ob5804

    @ob5804

    8 ай бұрын

    Hi, sorry, it's not about the buttons, but please tell me how to insert pictures into a figma in a text block between words?

  • @AMDesignAndDev

    @AMDesignAndDev

    8 ай бұрын

    @@ob5804 Create an autolayout, add multiple text elements, and add images as well, arrange them, and enable wrapping for the autolayout.

  • @ob5804

    @ob5804

    8 ай бұрын

    Thank You 🙏@@AMDesignAndDev

  • @amandayu3639
    @amandayu36396 күн бұрын

    Its very smart! Thanks for sharing your wisdom :D

  • @PeterSather
    @PeterSather6 ай бұрын

    Your videos are the absolute BEST! I cannot wait to take your full class!

  • @taarushgoyal6204
    @taarushgoyal62049 ай бұрын

    This is exactly what I was looking for, thank you so much!

  • @belowdelancey1025
    @belowdelancey10257 ай бұрын

    Very well articulated, thank you!

  • @yilingkuo4226
    @yilingkuo42269 ай бұрын

    Thanks! Finally found a video is help me to reduce variants with different sizes and states🎉appreciate it

  • @GodsonChinweuba
    @GodsonChinweuba7 ай бұрын

    This is just on point. It becomes even more magical when you have Colour and Size variables. It’ll be easy to move around projects and turn things around with just a few clicks. Thanks man ❤

  • @nerdalert1980

    @nerdalert1980

    5 ай бұрын

    I can't seem to find anything on this. Do you have a link or an article? I know i've seen it somewhere before..

  • @Gavriloster
    @Gavriloster8 ай бұрын

    I have been looking for the 'right' way to do it for a couple of days now. This clarifies so much for me. TY TY! :)

  • @AMDesignAndDev

    @AMDesignAndDev

    8 ай бұрын

    Hey, there is no right way :D, this is just one way, but it also has its limitations (increasing padding will mess up the height so you have to cognizant of that).

  • @nisharmultani2671
    @nisharmultani267110 ай бұрын

    Nice explanation

  • @the_infinity_channel
    @the_infinity_channel2 ай бұрын

    Exactly no one is talking about this. The problem is when you pass all the basics and go to the videos of couple of minutes thinking you gonna learn something. I did the same mistake and when I needed more properties I got to the problem... Really good video

  • @Zahra-Opaia-0
    @Zahra-Opaia-010 ай бұрын

    Would you please make a video about "how to use variants with cards" , i mean the sizes , needed content ...ect.

  • @GPinaffiRodrigues
    @GPinaffiRodrigues10 ай бұрын

    Is it worth creating base icon sizes and adding instances of them to your buttons?

  • @sarahstrauss5637
    @sarahstrauss56377 ай бұрын

    Hi, this is really good to see! I have a similar iteration in some of my designs but ran into an issue: If I want to change the widht into fill container, then the internal .base components doesnt follow it and keeps the hug width. This is specially annoying when designing for mobile. Do you have any tips?

  • @RaufunNur
    @RaufunNur9 ай бұрын

    wow, your background changed! ❤

  • @rifatmehedi2082
    @rifatmehedi20828 ай бұрын

    Hey bro! need a video about shadow. Thanks!

  • @dheerajdevaraj3512
    @dheerajdevaraj35123 ай бұрын

    Hi, Really nice one! 😊 one doubt. What about form group? What are the changes happens if we use component property apply to create form group

  • @amenesty999
    @amenesty9992 ай бұрын

    Are the buttons resizable? I did the same thing and couldn't resize them...they aren't responsive

  • @okishan
    @okishan6 ай бұрын

    Can relate to this so much! Just a quick question - did you figure out why did the icon color not show correctly earlier? was it because the color was not linked to a style? Thanks!

  • @rahadianfajar4701

    @rahadianfajar4701

    5 ай бұрын

    Same question. What the difference between with we use color style and color variable on it?

  • @loremipsum4512
    @loremipsum45128 ай бұрын

    How to set the right panel so that the New Button and the Base Button blocks are visible at the same time? (I can only switch in the drop-down menu.) Can someone help me? Thanks for the video, it was very helpful!

  • @gme9628
    @gme96282 ай бұрын

    When i delete the size variants in "new button" section, sizes are works very fine but my left and right icon colors are broken :( in your video in 10:25 when you delete other size variations, your buttons size and colors are works perfect. i watched your video like 10 times but my icon colors are broken when i delete size variations of stroke variant..

  • @DanSinor
    @DanSinor4 ай бұрын

    How did you get the _base component properties to show below the instance properties in the right bar? As show at 3:33

  • @AMDesignAndDev

    @AMDesignAndDev

    4 ай бұрын

    By showing up nested instances

  • @tellingermartin
    @tellingermartinАй бұрын

    Is there a way to set this up in an already finished design system so that I don't break all the already finished and downstream components? Thanks a lot for the tip

  • @AMDesignAndDev

    @AMDesignAndDev

    Ай бұрын

    You don't really have to do this. This is a good to have if you like using the base structure, but not a must. If your components are done and published without them, then don't do this.

  • @user-he2vz4bm5l
    @user-he2vz4bm5l8 ай бұрын

    Hey! Is there any way to combine both New Button and Base Button properties 11:05 so that they don't appear separately?

  • @AMDesignAndDev

    @AMDesignAndDev

    8 ай бұрын

    Nops, as then you'll just be creating properties inside the overlapping component instead of exposing the base button properties.

  • @user-he2vz4bm5l

    @user-he2vz4bm5l

    8 ай бұрын

    @@AMDesignAndDev thank you for your explanation!

  • @metinkucuk734
    @metinkucuk7343 ай бұрын

    Hey there! Your videos are perfect. I have question tho: Do you think that it is still relevant to use _base structure after introduction of multi-edit in Figma?

  • @AMDesignAndDev

    @AMDesignAndDev

    3 ай бұрын

    Noos

  • @AMDesignAndDev

    @AMDesignAndDev

    3 ай бұрын

    Nops

  • @AMDesignAndDev

    @AMDesignAndDev

    3 ай бұрын

    We should not use base components

  • @metinkucuk734

    @metinkucuk734

    3 ай бұрын

    @@AMDesignAndDev so you mean base era is completely over?:))

  • @AMDesignAndDev

    @AMDesignAndDev

    3 ай бұрын

    @@metinkucuk734 anyone who wants to use it can, but now I don’t think it provides too much value

  • @calvinogood
    @calvinogood10 ай бұрын

    I'm still stick with base component since day 1. 😅

  • @imca-b-10rajwanijatishmano4
    @imca-b-10rajwanijatishmano49 ай бұрын

    explanation is just too good! Though when practicing it by myself I have some confusion, can you please help?

  • @AMDesignAndDev

    @AMDesignAndDev

    9 ай бұрын

    Sure

  • @imca-b-10rajwanijatishmano4

    @imca-b-10rajwanijatishmano4

    9 ай бұрын

    @@AMDesignAndDev Oh thank you!! how can i contact you?

  • @AMDesignAndDev

    @AMDesignAndDev

    9 ай бұрын

    @@imca-b-10rajwanijatishmano4 twitter.com/AsaadMahmood5

  • @imca-b-10rajwanijatishmano4

    @imca-b-10rajwanijatishmano4

    9 ай бұрын

    @@AMDesignAndDev Sent you a message there

  • @benjaminaraica1
    @benjaminaraica1Ай бұрын

    Hi! Is the base button still being used in UI? or was this discontinued?

  • @AMDesignAndDev

    @AMDesignAndDev

    Ай бұрын

    You can use it, but it’s not standard practice anymore

  • @benjaminaraica1

    @benjaminaraica1

    Ай бұрын

    @@AMDesignAndDev Really? its such a practical way to create components! Is there a reason? or did Figma come up with something better?

  • @AMDesignAndDev

    @AMDesignAndDev

    Ай бұрын

    @@benjaminaraica1 i agree, but with the multi edit feature and the component properties, the need for it definitely reeduces.

  • @RaufunNur
    @RaufunNur9 ай бұрын

  • @powerhaus3d
    @powerhaus3d4 ай бұрын

    Though the most logical, this method doesn't work well in my experience and presents issues.

  • @umerzafar
    @umerzafar8 ай бұрын

    pro tip, watch the video at .75 playback speed

  • @AMDesignAndDev

    @AMDesignAndDev

    8 ай бұрын

    AHAHAAH :D

  • @johndaniel21343
    @johndaniel213437 ай бұрын

    EVERYbody do the same exemple with properties it's not creative at all and not helping me doing what I want to do cause ALL do the same with button

  • @AMDesignAndDev

    @AMDesignAndDev

    7 ай бұрын

    What do you want to see? The reason why we do a button is because we take the most common component and explain how to do the “technique”. The purpose here is not to be creative with the type of component rather the technique