Base Components with Component Properties in Figma!

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

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

50% 1

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

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

4 сен 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

Комментарии : 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 9 месяцев назад

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

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

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

Thank You 🙏@@AMDesignAndDev

@taarushgoyal6204 10 месяцев назад

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

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

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

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

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

@yilingkuo4226 10 месяцев назад

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

@belowdelancey1025 8 месяцев назад

Very well articulated, thank you!

@GodsonChinweuba 8 месяцев назад

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

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

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

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

@amandayu3639 Месяц назад

Its very smart! Thanks for sharing your wisdom :D

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

@Zahra-Opaia-0 10 месяцев назад

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

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

@nisharmultani2671 10 месяцев назад

Nice explanation

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

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

@dheerajdevaraj3512 4 месяца назад

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

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

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

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

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

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

Hey bro! need a video about shadow. Thanks!

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

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

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

By showing up nested instances

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

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

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.

@RaufunNur 10 месяцев назад

wow, your background changed! ❤

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

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

Noos

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

Nops

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

We should not use base components

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

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

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

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

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

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

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

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

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

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

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

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

@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

@calvinogood 10 месяцев назад

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

@RaufunNur 10 месяцев назад

❤

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

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

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

pro tip, watch the video at .75 playback speed

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

AHAHAAH :D

@johndaniel21343 8 месяцев назад

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

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