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.asaadmahmo...
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-de...
.
Have a project? Send me a message on [e-mail] or contact me on LinkedIn.
.
👉 Follow me on Twitter and LinkedIn for more content.
/ asaadmahmood5
/ asaadmahmood

[@AMDesignAndDev]

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]

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]

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

[@ob5804]

Thank You 🙏@@AMDesignAndDev

[@GodsonChinweuba]

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]

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

[@taarushgoyal6204]

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

[@the_infinity_channel]

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

[@PeterSather]

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

[@ggavrilo]

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]

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

[@belowdelancey1025]

Very well articulated, thank you!

[@amandayu3639]

Its very smart! Thanks for sharing your wisdom :D

[@yilingkuo4226]

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

[@gme9628]

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]

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

[@AMDesignAndDev]

By showing up nested instances

[@amenesty999]

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

[@sarahstrauss5637]

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?

[@GPinaffiRodrigues]

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

[@dheerajdevaraj3512]

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

[@Татьяна-л2у5г]

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

[@AMDesignAndDev]

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

[@Татьяна-л2у5г]

@@AMDesignAndDev thank you for your explanation!

[@loremipsum4512]

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!

[@okishan]

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]

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

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

[@GabrielBOLLA-z2n]

@@AMDesignAndDev One year after your video and with the recent updates on Figma, would you still recommend to do base components? I am not sure about the pertinence right now as we got variables, props...ect. Thx

[@AMDesignAndDev]

@@GabrielBOLLA-z2n I would not.

[@Zahra-Opaia-0]

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

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

[@metinkucuk734]

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]

Noos

[@AMDesignAndDev]

Nops

[@AMDesignAndDev]

We should not use base components

[@metinkucuk734]

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

[@AMDesignAndDev]

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

[@rifatmehedi2082]

Hey bro! need a video about shadow. Thanks!

[@RaufunNur]

wow, your background changed! ❤

[@nisharmultani2671]

Nice explanation

[@imca-b-10rajwanijatishmano4]

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

[@AMDesignAndDev]

Sure

[@imca-b-10rajwanijatishmano4]

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

[@AMDesignAndDev]

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

[@imca-b-10rajwanijatishmano4]

@@AMDesignAndDev Sent you a message there

[@calvinogood]

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

[@powerhaus3d]

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

[@umerzafar]

pro tip, watch the video at .75 playback speed

[@AMDesignAndDev]

AHAHAAH :D

[@RaufunNur]

❤

[@johndaniel21343]

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]

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