Base Components with Component Properties in Figma!

Рет қаралды 13,967

10 ай бұрын

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

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

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

@ob5804 8 ай бұрын

Thank You 🙏@@AMDesignAndDev

@amandayu3639 6 күн бұрын

Its very smart! Thanks for sharing your wisdom :D

@PeterSather 6 ай бұрын

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

@taarushgoyal6204 9 ай бұрын

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

@belowdelancey1025 7 ай бұрын

Very well articulated, thank you!

@yilingkuo4226 9 ай бұрын

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

@GodsonChinweuba 7 ай бұрын

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

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

Nice explanation

@the_infinity_channel 2 ай бұрын

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

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

@GPinaffiRodrigues 10 ай бұрын

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

@sarahstrauss5637 7 ай бұрын

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

wow, your background changed! ❤

@rifatmehedi2082 8 ай бұрын

Hey bro! need a video about shadow. Thanks!

@dheerajdevaraj3512 3 ай бұрын

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

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

@okishan 6 ай бұрын

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

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

@loremipsum4512 8 ай бұрын

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

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

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

@AMDesignAndDev 4 ай бұрын

By showing up nested instances

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

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

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

@AMDesignAndDev 8 ай бұрын

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

@user-he2vz4bm5l 8 ай бұрын

@@AMDesignAndDev thank you for your explanation!

@metinkucuk734 2 ай бұрын

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

Noos

@AMDesignAndDev 2 ай бұрын

Nops

@AMDesignAndDev 2 ай бұрын

We should not use base components

@metinkucuk734 2 ай бұрын

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

@AMDesignAndDev 2 ай бұрын

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

@calvinogood 10 ай бұрын

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

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

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

@AMDesignAndDev 9 ай бұрын

Sure

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

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

@AMDesignAndDev 9 ай бұрын

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

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

@@AMDesignAndDev Sent you a message there

@benjaminaraica1 Ай бұрын

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

@AMDesignAndDev Ай бұрын

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

@benjaminaraica1 Ай бұрын

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

@AMDesignAndDev Ай бұрын

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

@RaufunNur 9 ай бұрын

❤

@powerhaus3d 4 ай бұрын

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

@umerzafar 8 ай бұрын

pro tip, watch the video at .75 playback speed

@AMDesignAndDev 8 ай бұрын

AHAHAAH :D

@johndaniel21343 7 ай бұрын

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