Mistakes Designers make with Figma Components

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

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

50% 1

Note that with the introduction of variable properties, some suggestions like the base structure one are outdated.
Can’t stress this enough, most of these problems are horrible! Avoid them at any cost.
The last one is not a big deal and can be avoided for some components, but can be very useful for others.
Hey guys, I've launched a Paid Figma Noob to Pro course that can help you take your Design and Figma skills to the next level!
You can access it here: asaad-mahmood-s-school.teacha...
My subscribers and viewers can get a 50% discount by using the voucher "AMSUBSCRIBER".
Do subscribe, like and hit the notification icon:
/ @amdesignanddev
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
0:00 - Intro
0:27 - 1. Not creating components for resuable elements
5:05 - 2: Not making components resiable
6:14 - 3: Not using variants
6:56 - 4: Not understanding variant properties & correct names
8:32 - 5: Not using a base structure in components
10:36 - Creating the base structure
12:46 - 5.1: Not keeping the text layer name consistent on variants/components
15:28 - 6. Not using Interactive Components (less critical) .
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
/ asaadmahmood .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....

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

10 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

Комментарии : 187

@abulut 2 года назад

Brother... I made so many design system without making a base button for variants. O my god. Thank you for that tip!

@shiuanchangtan1174 Год назад

I started using Figma by just exploring and without taking any proper courses! and I've been finding ways to properly create components but couldn't really find it. This is very very very helpful!!! Subscribed to your channel and gonna go through the videos that you have! THANK YOU!

@AyanaDesign Год назад

I love this video so much! I started with Figma a few weeks ago, watched some tutorials a this one really helped me understand the components. Thank you!

@alehdrazdou4843 2 года назад

that's a quality content I've been looking for thank you, sir

@franceslim9561 Год назад

Awsome!!! This video helps me a lot! Thanks for sharing! Looking forward to more Figma related video!

@machine1376 Год назад

This video just made me subscribe! You won me over with your focus on proper fundamentals. Thank you for this!

@LiziAltenhofen Год назад

Thank you so much for this video! It helped a lot!

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

kudos to you bro, lots of love from india 👏

@jflad8308 2 года назад

Awesome video! Please do more videos on design standards! I am learning Figma well but can’t find any info on standards of practice. This is just what I was looking for

@AMDesignAndDev 2 года назад

Hey, sure, I can have a look at it.

@akbaralinabiev Год назад

Maybe you will look once at my tutorials

@hrafnhildur3063 2 года назад

thank you thank you thank you!! exactly wha ti was looking for!

@ShetlandTec Год назад

This is gold, very important content for us newbies with Figma, thanks!

@Jaikishansingh Год назад

This is amazing i was learning and this one video thought me a lot. I was making these mistake and didn't knew why and how things are working. Much help thanks man.

@AMDesignAndDev 2 года назад

Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel.

@ilhamsultantambili8716 Год назад

Great video, thanks for sharing!

@minimalistaestheticdesigne3362 2 года назад

great tutorial video, so much to learn in a single video. it really helps us where we lack.

@elliot5287 Год назад

Great tips, thank you!

@natalia2722 Год назад

Thank you so much! It is very useful for newbies!

@viktoriacarralesraichynets1851 2 года назад

Super useful easy and needed video!!!!! Thanks!

@rareviz 2 года назад

Appreciate your point of view, great pointers!

@natalian8333 Год назад

Awesome video! Thank you!

@supermykola 2 года назад

That's a great video for someone starting to learn Figma. Thanks!

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

Thanks a lot! Having a Base Structure is really gold!

@julianTrichardson 2 года назад

Broooooooooooo! you taught me so much in such a short space of time. Thank you.

@AMDesignAndDev 2 года назад

Glad I could be of help!

@mohamedmontassarmejbri2796 Год назад

Thanks man , keep the good work up

@j.barclay 2 года назад

Brilliant video. Thank you for the tips!

@Carlos-dm5fo 2 года назад

Thank you this was very helpful!

@kipkorirkoech4269 Год назад

Great video and really helpful! I couldn't get a grasp on how the setuper works but it's all clear now.

@VieshKun 2 года назад

first two words were enough to know i am at a right place, thanks a lot.

@someone-kt8us 2 года назад

Really helpful!

@Mysha__ 2 года назад

Taking time to avoid huge maintenance issues afterwards. Tks a lot.

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

Very valuable. Thx!

@maryamodu8349 2 года назад

Thank you so much for this insightful video, God bless you

@fahadhussain1986 Год назад

Behtareen bhaijaan, I was getting the same issues, keep posting these types of issues

@radixsam7690 Год назад

Excellent video ...............................Thank You !!!

@wacky-dee 2 года назад

Yeah, definitely worth to remember about those things!

@AliAhmed-ri5ty 2 года назад

Wonderful and informative. Keep making these, they sure help newbies like me.

@AMDesignAndDev 2 года назад

Will do Ali :)

@AMDesignAndDev 2 года назад

Some suggestions like the base structure setup is no longer relevant with the new Figma properties update. So do check that out. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cOGyjb9qgBw.html Additionally, now even different text layer names may not be an issue if you link them with a component text property.

@yiyang8718 2 года назад

super clear and helpful. thanks so much !!!

@AMDesignAndDev 2 года назад

Thank you!

@Autolayout 2 года назад

Very insightful.

@tobysilverman3343 2 года назад

super helpful!

@laweffect 2 года назад

Top job, sir.

@omotayotaiwo4375 2 года назад

This is one of the best video I’ve seen.

@jswanson859 Год назад

Well, I'v e made some of these mistakes but I think my biggest mistake was not creating a base structure. That is genius and will be doing that from now on. It makes so much sense, I've never seen that before in an video. I think Figma should be promoting that in their office hours videos too. I see to many people create a lot of extra buttons and having to make multiple changes. THANK YOU!

@janpodgorski9343 2 года назад

That was amazing. Please make more videos like that.

@AMDesignAndDev 2 года назад

Will do sir :)

@rshivaa863 2 года назад

Well explained

@AMDesignAndDev Год назад

Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.

@linenwood13 2 года назад

Thank you so much, very well explained, useful tips! I am also curious if I didn't add a base component from the beginning, can I do it afterwards and "attach" it to existing variants or I have to recreate everything from scratch?

@AMDesignAndDev 2 года назад

Thank you Alina. You can attach a base component afterwards but that will mess up the instances that have been used throughout the product. So if you haven't done that, you can leave them, it's not the end of the world, but try to do that the next time you create a component to save yourself time and effort.

@samisakdesign 2 года назад

This is such a useful tutorial thank you so much

@AMDesignAndDev 2 года назад

Glad it was helpful!

@souvikchakraborty112 2 года назад

Practical content. Keep it up

@mostafahamad8054 Год назад

How do u put the channel rack in the playlist

@anaaguilar4016 2 года назад

🥺I feel so grateful, thank you!

@AMDesignAndDev 2 года назад

You’re welcome 😊

@nextdemy7534 2 года назад

AMAZING!

@irfaanbhatti575 2 года назад

Hello sir, I am happy that I found you on youtube. Such a great and very helpful channel for learning Figma. Sir, I have a very humble request to make a video explaining "The correct usage of Constraints & resizing while applying Autolayout- What happens if we use the Fill container, Hug content, and so forth". This is the crucial topic, I guess, we newbies mostly go wrong with them, so I am hopefully looking forward to you for the great help as usual. Thank you very much, sir.

@Uix517 Год назад

yes i do agree with you

@princejamalminhas3271 2 года назад

Very useful video, as a person who used to create all designs in Adobe XD, there is one feature I can't seem to figure out how it works in Figma. In Adobe XD there is a feature where you can create a component and use the instance of that component and add elements to that instance while still preserving the style of the master component. However in Figma, it does not see that's possible to add elements to an instance but only change / delete elements that already exist. Is it possible to add new design elements to an instance of a component without touching the master component but the instance itself?

@rajdeepghosh 2 года назад

Great video!! But how did you convert the icon name text into its corresponding icon using a text style?

@AMDesignAndDev Год назад

Hey guys, I've launched a Paid Figma Noob to Pro course that can help you take your Design and Figma skills to the next level! You can access it here: asaad-mahmood-s-school.teachable.com/p/figma-noob-to-pro My subscribers and viewers can get a 50% discount by using the voucher "AMSUBSCRIBER".

@steffsamtoy3310 2 года назад

helpful tips, thank you so much !!!

@AMDesignAndDev 2 года назад

You're so welcome!

@valbalano5811 2 года назад

dude, you're the best!

@AMDesignAndDev 2 года назад

Means a lot :)

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

thank you so much Sir.. Specially for 5th one..

@iuliamuntean735 2 года назад

Amazing video! I don't have the resizing option in the right side, why is that?

@sheldonlouis7895 2 года назад

Very helpful, wish I saw this earlier

@neil78 2 года назад

Very helpful video from someone coming from XD. When using the base structure component for a set of components, let's say a button with a right arrow, hover and inactive states, and in the future, a left arrow variant is needed. In this case would you have to add the arrow to the base component and then delete it manually from all the component variants that don't need it?

@AMDesignAndDev 2 года назад

Yea, In Figma you can’t delete items from an instance like in XD, so you’ll just be hiding the arrow.

@user-ki7qf6gn6w Год назад

purchases I made was soft soft. I knew it was my passion but I was just stuck because of trauma I couldn't deal with. Now that I'm at a

@nqh288kael2 Год назад

Any idea why my gms softs different?

@joynicolas Год назад

Thank you for the helpful video. If possible please add the shortcut keys which you have used, that will also help us.

@pearlite6243 2 года назад

Assalaamualaikum brother, your videos are very helpful! JazakAllahu khairan

@AMDesignAndDev 2 года назад

Walaikum As Salam brother! Wa iyyaka

@babatundeodeyemi8255 2 года назад

Atomic design approach 👌🏾👌🏾

@sample1801 2 года назад

Thank you very much

@chidorirasenganz 2 года назад

This is the approach I’ve been trying to get my team to adopt! They just look at me like I’m crazy 😂

@AMDesignAndDev 2 года назад

AHAHA, they will learn over time, if you get a chance, create a component for them, and once that's done, they may probably understand its value over time, especially when they have to make changes.

@positron1890 2 года назад

Hi! Many thanks 🙏

@nikita2560 Год назад

Where do you get all those nice colors you had?

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

Q : Why i can't see Variant column as shown on your screen at 13 : 43 ?

@mentholburst Год назад

how to duplicate auto layout object inside components? is it possible? So, this is my step by step, until I ask this question, 1. I create an object, ex. Button > Convert to component 2. Drag the button from local component, > Copy button (5 buttons) > Convert to autolayout > Convert to component, and finally, I got a new component and give the name as "tab". 3. Then, I drag the tab from local component, > I try to jump into the tab component, and try to duplicate the button, but nothing happen, it comes to a new component, not like when we create a basic autolayout, we can easily to duplicate the object inside the frame.

@MrJmhess77 Год назад

Stellar tutorial mate. I unfortunately fall into the first boo boo! LOL! It's videos like yours that help make us all better designers. Want to WOW your design team? == add small component interactions like AM did in his menu example (#1) The little things like this make a designers day/week. I can attest to this in real life.

@AMDesignAndDev Год назад

Thanks mate :)

@nicholasgood470 2 года назад

Thanks - very important tips here starting off much appreciated (too bad no one told you before recording this a bird crapped on your hat:)

@blondelina4370 Год назад

Hey there! I have a question about the ' Not creating components for reusable elements' part. Are the items (Home, About, Locations etc) in that header just instances of components and the header is a component? I was just listening a tutorial from Mavi Design called 'Components inside components' and he said that you should create only one item component, define structure and states and then use just instances of that item component in header. Do you agree with that method? I just wanna clear some things up in my head! Thank you!

@AMDesignAndDev Год назад

Yes. Those items in the header would be components themselves

@chiyoo9 2 года назад

Hello Thanks for this.. i converted the "Header Active and Inactive state to Combine Variants, but when i tried changing the Active and inactive states of some text in the Header, they changed the original texts to HOME instead of maybe LOCATION, ABOUT, CONTACT. please how do i solve that?

@AMDesignAndDev 2 года назад

Make sure the layer names are the same in both variants.

@yusefess 2 года назад

It was great as always. If you can make a practical video on how to use colors in user interface design.

@AMDesignAndDev 2 года назад

Sure Yusef, I can have a look at that.

@rookie1969 2 года назад

Great video, thanks for sharing. However, creating variants using this base structure I don't appear to be able to change the border radius as a property. So do I need to create a separate button base structure for rounded, straight, pill etc ? Many thanks in advance.

@AMDesignAndDev 2 года назад

You can change the border radius, that shouldn't be a problem.

@rookie1969 2 года назад

@@AMDesignAndDev Thanks so much for the prompt reply, I've now fixed this. However I have another question - is it possible to add a hover colour to the base structure of a button which - when changed - filters down through all the different button variants? The reason being that I plan to use the same button styles throughout multiple projects but the colours will change all the time depending on the project and I'm trying to avoid changing all the colours for each variant each time. Thank you.

@AMDesignAndDev 2 года назад

@@rookie1969 You can if you want to, but the purpose of the base structure is to define the sizing etc. If you want a base structure for states separately, you can create 2 levels of base structures, but I would not recommend it. So I'd say, do not do that, and have the state specific styling on the main component itself.

@rookie1969 2 года назад

@@AMDesignAndDev Thank you, you clearly know best as I'm pretty new to all this, advice taken :-)

@asianinsaan3787 Год назад

Couldn't agree more!

@michaelschultze3595 2 года назад

Thank you very much, this is very informative and helpful. But, autolayout is terrible to use in parts. Definitely missing options for better use here from my point of view. Especially for nesting objects and more complex layouts

@AMDesignAndDev 2 года назад

Thanks for the feedback, it definitely has limitations, but in my opinion, it’s much better than going all without.

@chidorirasenganz 2 года назад

It works like flexbox so if it doesn’t work in auto layout it’ll probably be difficult to impossible to develop. The only thing that is missing is a z-index of some sort but you can get around that with image fills and regular frames

@figurich 2 года назад

Actually, auto layout make much more sense because that is the way how code works in web( CSS ), iOS( SwiftUI ) or Android (Jetpack Compose). So better think in advance than afterwards.

@michaelschultze3595 2 года назад

@@figurich That is all clear to me. Autolayout is great. When I create complex boxes and have to interlace them with others, I often have to edit all the constraints again (in detail) because the responsive behavior doesn't work anymore. Maybe this could be improved overall... Like "keep settings / behavior" ONLY that is the point ;-)

@BK-lx5mo 2 года назад

What UI kit or template are you using that has all of the color and font styles you're using here? (Great video!)

@AMDesignAndDev 2 года назад

I think its tailwind Ui Css from some Figma community file.

@abdelbassetsassaoui8520 Год назад

I've been struggling to find an soft soft tutorial. I haven't watched yours yet but if the actual company is telling you nice job, then I'm

@davetheglitch_ Год назад

Does this same logic apply to bottom NAV bars? Because I've been struggling with prototyping each states

@AMDesignAndDev Год назад

For sure.

@alexanderstephen1567 2 года назад

Valuable advises! I'm curious how would you create a calendar with components/variants when it is selected a circle with the number will appear. I've done this and let's say the component is 1 default and 1 click with circle background, or whatever. But when I select, for example, another number 12 or 28...etc, I get the same number as in component - 1 circle (and not the initial number I need to be as selected). Should I make all the numbers default and selected as variants?

@AMDesignAndDev 2 года назад

I think that’s happening because you have not renamed the text in your component in correctly you only need to create the variance once and then if you apply those variance in different components or different date it should work without the text reverting back to the original variant text

@alexanderstephen1567 2 года назад

@@AMDesignAndDev Thank you for the explanation. Appreciate.

@joseflinha 2 года назад

I'm just thinking about how best to handle the "base structure" / master component in case I need a primary / secondary button and also a small / large. Is only one master component enough? Would you like some advice? Thanks

@AMDesignAndDev 2 года назад

You can have a look at my buttons video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DOb9CJ9mpYI.html

@joseflinha 2 года назад

@@AMDesignAndDev Thanks, I write comment there :)

@ft.retrospect2921 2 года назад

Excellent💛💛💛

@AMDesignAndDev 2 года назад

Thanks 🤗

@nayyarali568 2 года назад

If someone want to have your mentorship..... How can be done? Thanks

@pierrelesaignoux2470 Год назад

both the GMS and softEX setup is very different from the one ur using.. why is it so.? GMS doesn't even soft like a app one... and the

@bvs455 Год назад

How about doing a component for the whole navigation bar and make variants with each of the elements highlighted? I believe it would be easier and faster

@AMDesignAndDev Год назад

Nops, a lot of duplicated design if we’re duplicating the navbar for lets say 13 items or more in the sidebar.

@vishnuhrp 2 года назад

This is so useful, but complicated! Im a newbie, so is it possible to make a slower version of this video where we can follow along?

@AMDesignAndDev 2 года назад

You can check some of my other videos where I show you how to create components. Figma Noob to Pro! 04: Components ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tDOGUC6L7Vo.html Etc I recently have also started creating a design system playlist, so do check it out

@mathSALIKSIK Год назад

Thank you so much for tNice tutorials video. I was so confused and overwheld when I first opened soft soft and now I understand how to finally

@wmdavis9101 Год назад

If you put in all possible atoms within a component and just use component properties, is a base structure necessary? Unless you missed a possible atom wouldn't this cover all your bases?

@AMDesignAndDev Год назад

Bas structures are no longer used with component properties. See the pinned comment on this video that I made 9 months ago.

@wmdavis9101 Год назад

@@AMDesignAndDev Yea sorry, should have looked through the comments. Thanks for your proto vids, its really opened up my thought process on what's possible on figma. Do you happen to do design critiques or have forum like on discord or patreon?

@mrajax_0101 2 года назад

Assalamualaikum, Zarbardastt Video

@AMDesignAndDev 2 года назад

Walaikum As Salam Jazak Allah :)

@melvinchai7927 2 года назад

good knowledge i learn from this video, looking for more mistakes to avoid.

@mrnickb 2 года назад

Good stuff! Curious to know which components you use base components for aside from buttons. I assume text inputs too. Anything else?

@AMDesignAndDev 2 года назад

Yup, text inputs, dropdowns, checkboxes, labels, tags, basically a lot of things, anything that's repeated a few more than a few times, I prefer using base components for them.

@mrnickb 2 года назад

@@AMDesignAndDev good stuff. With inputs, do you create each atom as individual components (label, placeholder text, input box, error messages etc) and then combine them together into one base component? Or do you just have one single base component that contains it all in one?

@AMDesignAndDev 2 года назад

@@mrnickb Nops, they can be placed in the same base component, and then only the size can change on the larger versions.

@AMDesignAndDev 2 года назад

@@mrnickb You can check out these two videos: Inputs: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9AYrcB2Yp3A.html Form Group: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uOLGdkMeAws.html

@mrnickb 2 года назад

@@AMDesignAndDev you're a legend, thank you so much!!!

@HamwiMohammad Год назад

Thank you for such informative video, but I noticed that the version of your figma is different a bit from mine

@AMDesignAndDev Год назад

You’re right, and as a consequence some tips may be outdated.

@karenbeal6137 2 года назад

I've used Figma in the past but have to come back to it now as I need to use it for some projects. This is really useful and up to date which when looking for useful tips for Figma amongst the thousands is hard to come by! So many video tutorials are out of date. However, could you slow down a little bit when explaining? I followed it all and it all makes perfect sense but you talk too fast and thank goodness for no background music!

@AMDesignAndDev 2 года назад

Sure Karen, I've heard a lot of people want me to slow down, and in my recent video, I've tried slowing down. So keep in touch and keep letting me know if I should improve elsewhere.

@XanSintax 2 года назад

@@AMDesignAndDev Awesome tutorial indeed! I personally don't mind the fast pace, you can always set playback speed anyway, though I agree a slower pace would be better for most. What I find a bit confusing is your use of keyboard shortcuts. Sure, we can see them flash on the screen, but as this video was intended for noobs, it would be a nice addition to mention them at the very least.

@AMDesignAndDev 2 года назад

@@XanSintax That's an excellent point. I would consider that for later videos!

@nikita2560 Год назад

So basically a Large Button should be it's own component with it's own states rather than being a variant within a smaller button? So a mobile width button should again be it's own parent component rather than a selectable variety within a different button?

@AMDesignAndDev Год назад

Yes, now all buttons should be variants as with the new component properties update, base components don’t really work as intended.

@andycetnarskyj2848 Год назад

Aware this is an old tutorial but Figma on their recent building block webinar advised against using base components. The explain some glitches it causes towards the end.

@AMDesignAndDev Год назад

I agree, the base structure no longer works with the component properties