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
@AMDesignAndDev3 жыл бұрын
Hey, sure, I can have a look at it.
@akbaralinabiev2 жыл бұрын
Maybe you will look once at my tutorials
@hrafnhildur30632 жыл бұрын
thank you thank you thank you!! exactly wha ti was looking for!
@abulut2 жыл бұрын
Brother... I made so many design system without making a base button for variants. O my god. Thank you for that tip!
@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.
@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".
@ilhamsultantambili87162 жыл бұрын
Great video, thanks for sharing!
@pearlite62432 жыл бұрын
Assalaamualaikum brother, your videos are very helpful! JazakAllahu khairan
@AMDesignAndDev2 жыл бұрын
Walaikum As Salam brother! Wa iyyaka
@brianchristensen93192 жыл бұрын
All of this is right but what a freaking nuance mess. Figma could make this structure somewhat automated and self explanitory in the experience. I can think of 3 designs that are distinctly different all of which would relieve the need for people to magically know these things. Lamesville!
@AMDesignAndDev2 жыл бұрын
It is, however, I just want to add that a lot of the things like the base structure and the naming are now "almost redundant". With Figma's new properties, you can't use them with base components, and the naming conflicts can also be prevented using the "text" property.
@nikita2560 Жыл бұрын
Where do you get all those nice colors you had?
@kishorekumar821610 ай бұрын
kudos to you bro, lots of love from india 👏
@mertkarabay47132 жыл бұрын
Why does it it matter isn't it the end result the most important aspect I don't get it. If you are coding it there is absolutely no point of doing these. Roast me if needed
@AMDesignAndDev2 жыл бұрын
Created a video especially for that question. kzbin.info/www/bejne/bHelZYChhaaMq5Y
@NowqQ2 жыл бұрын
comnts, even though they paid for their versions.
@janpodgorski93432 жыл бұрын
That was amazing. Please make more videos like that.
@AMDesignAndDev2 жыл бұрын
Will do sir :)
@the-secrettutorials2 жыл бұрын
Everytime you talk, your microphone gives me those awkward McDonald`s noises
@AMDesignAndDev2 жыл бұрын
Thank you for pointing that out, probably need a better mic
@the-secrettutorials2 жыл бұрын
@@AMDesignAndDev I personally recommend the Zoom H1 Handy Recorder for low budget but really high end sound ;) You can even get the older verison second hand for way cheaper than the 100$ that you'd pay for the new one.
@someone-kt8us2 жыл бұрын
Really helpful!
@rshivaa8632 жыл бұрын
Well explained
@AMDesignAndDev2 жыл бұрын
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.
@mafiyaproduction55702 жыл бұрын
Doing the Sa Fcukin tNice tutorialng
@LILI4N_sp2 жыл бұрын
I have pro tools 12.5 wNice tutorialch I bought back in 15 and It is really nightmare DAW for my soft creation. I have powerful computer but
@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.
@pierrelesaignoux24702 жыл бұрын
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
@vian8871 Жыл бұрын
great video but you keep making back and forth and it is quite difficult to know what is the ''best practices'' and what no...
@Gaspifz2 жыл бұрын
touch with a financial adviser was how I was able to outperform the market during the pandemic and raise a profit of roughly $40
@abdelbassetsassaoui85202 жыл бұрын
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
@nayyarali5682 жыл бұрын
If someone want to have your mentorship..... How can be done? Thanks
@mathSALIKSIK2 жыл бұрын
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
@nicholasgood4702 жыл бұрын
Thanks - very important tips here starting off much appreciated (too bad no one told you before recording this a bird crapped on your hat:)
@user-ki7qf6gn6w2 жыл бұрын
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
@mischugo2 жыл бұрын
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
@AMDesignAndDev2 жыл бұрын
Thanks for the feedback, it definitely has limitations, but in my opinion, it’s much better than going all without.
@chidorirasenganz2 жыл бұрын
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
@figurich2 жыл бұрын
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.
@mischugo2 жыл бұрын
@@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 ;-)
@irfaanbhatti5752 жыл бұрын
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.
@Uix5172 жыл бұрын
yes i do agree with you
@k.mfirnas81302 жыл бұрын
how to improve my attention span , I have good ideas and soft that I tNice tutorialnk up , the problem is putting it down in fruit loops and knowing
@aniket_mane25 Жыл бұрын
thank you so much Sir.. Specially for 5th one..
@maryamodu83492 жыл бұрын
Thank you so much for this insightful video, God bless you
@Mysha__2 жыл бұрын
Taking time to avoid huge maintenance issues afterwards. Tks a lot.
@linenwood133 жыл бұрын
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?
@AMDesignAndDev3 жыл бұрын
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.
@franceslim95612 жыл бұрын
Awsome!!! This video helps me a lot! Thanks for sharing! Looking forward to more Figma related video!
@joynicolas Жыл бұрын
Thank you for the helpful video. If possible please add the shortcut keys which you have used, that will also help us.
@AMDesignAndDev2 жыл бұрын
Some suggestions like the base structure setup is no longer relevant with the new Figma properties update. So do check that out. kzbin.info/www/bejne/mYCqqp2YbtaaeNk Additionally, now even different text layer names may not be an issue if you link them with a component text property.
@Galaunicorn Жыл бұрын
Thank you so much! It is very useful for newbies!
@fahadhussain1986 Жыл бұрын
Behtareen bhaijaan, I was getting the same issues, keep posting these types of issues
@ayushgairola330711 ай бұрын
Q : Why i can't see Variant column as shown on your screen at 13 : 43 ?
@radixsam76902 жыл бұрын
Excellent video ...............................Thank You !!!
@valbalano58112 жыл бұрын
dude, you're the best!
@AMDesignAndDev2 жыл бұрын
Means a lot :)
@shiuanchangtan11742 жыл бұрын
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!
@iuliamuntean7352 жыл бұрын
Amazing video! I don't have the resizing option in the right side, why is that?
@LiziAltenhofen Жыл бұрын
Thank you so much for this video! It helped a lot!
@vishnuhrp2 жыл бұрын
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?
@AMDesignAndDev2 жыл бұрын
You can check some of my other videos where I show you how to create components. Figma Noob to Pro! 04: Components kzbin.info/www/bejne/qnWyeIh5a7FqjNE Etc I recently have also started creating a design system playlist, so do check it out
@yusefess3 жыл бұрын
It was great as always. If you can make a practical video on how to use colors in user interface design.
@AMDesignAndDev3 жыл бұрын
Sure Yusef, I can have a look at that.
@mertkarabay22622 жыл бұрын
not gonna lie i hate making components I code it I really do not need it and prefer spending time on vscode
@AMDesignAndDev2 жыл бұрын
Makes sense if you're a frontend guy!
@mertkarabay22622 жыл бұрын
@@AMDesignAndDev. Business just cares about the end product. I’m not to flex on other ux designers:)
@AMDesignAndDev2 жыл бұрын
@@mertkarabay2262 Yes, but imagine having a UI library that is linked to 50 different files, and in those files, there are 50 different pages. Heck just changing 10 buttons individually in 10 different files would make you realize the point. So a total of 500 instances of a single component. Imagine updating those designs individually if you want to make a change, or there's a branding change. More and more companies are investing time in their Design Libraries. More and more companies are investing time in this. But for really small, and novice companies don't really see the value of this.
@AMDesignAndDev2 жыл бұрын
@@mertkarabay2262 Also that is not to say that components are useful when you have 50 different files. Even when I'm working on a single file, and I have a component used in 10 places, its much easier for me to go to one place and change that rather than changing that indiivudally. And since I'm a frontend guy, I do the same, I create classes or components in react for a thing that's repeated so its easier to change, otherwise it gets really troublesome and tiring to maintain the UI. So if you're a frontend guy, I'd really recommend avoiding having everything separated out, that's extremely bad practice. Using components within the frontend, or creating unified styles is going to really help you. The business may not care whether you're used classes or components on the frontend, but it will actually help you and others to maintain the code. And the same principles apply on the design side.
@bvs4552 жыл бұрын
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
@AMDesignAndDev2 жыл бұрын
Nops, a lot of duplicated design if we’re duplicating the navbar for lets say 13 items or more in the sidebar.
@mostafahamad80542 жыл бұрын
How do u put the channel rack in the playlist
@chiyoo92 жыл бұрын
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?
@AMDesignAndDev2 жыл бұрын
Make sure the layer names are the same in both variants.
@VieshKun2 жыл бұрын
first two words were enough to know i am at a right place, thanks a lot.
@princejamalminhas32712 жыл бұрын
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?
@natalian83332 жыл бұрын
Awesome video! Thank you!
@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
@davidjohnt.serdoncillo76552 жыл бұрын
i would like to be one of your students , how do i contact you?
@nqh288kael22 жыл бұрын
Any idea why my gms softs different?
@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 :)
@davetheglitch_ Жыл бұрын
Does this same logic apply to bottom NAV bars? Because I've been struggling with prototyping each states
@AMDesignAndDev Жыл бұрын
For sure.
@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.
@babatundeodeyemi82552 жыл бұрын
Atomic design approach 👌🏾👌🏾
@alehdrazdou48432 жыл бұрын
that's a quality content I've been looking for thank you, sir
@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
@Carlos-dm5fo2 жыл бұрын
Thank you this was very helpful!
@alzidaanlimited90822 жыл бұрын
Thanks for wasting my ti.
@BK-lx5mo2 жыл бұрын
What UI kit or template are you using that has all of the color and font styles you're using here? (Great video!)
@AMDesignAndDev2 жыл бұрын
I think its tailwind Ui Css from some Figma community file.
@minimalistaestheticdesigne33622 жыл бұрын
great tutorial video, so much to learn in a single video. it really helps us where we lack.
@DevTeam-y3j Жыл бұрын
Bro what is that annoying noise in the background it's driving me 🥜's Great tutorial though! 👍👍
@AMDesignAndDev Жыл бұрын
I have no idea
@elliot52872 жыл бұрын
Great tips, thank you!
@tobi777710 ай бұрын
Very valuable. Thx!
@viktoriacarralesraichynets18512 жыл бұрын
Super useful easy and needed video!!!!! Thanks!
@Autolayout2 жыл бұрын
Very insightful.
@souvikchakraborty1122 жыл бұрын
Practical content. Keep it up
@asianinsaan37872 жыл бұрын
Couldn't agree more!
@neil782 жыл бұрын
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?
@AMDesignAndDev2 жыл бұрын
Yea, In Figma you can’t delete items from an instance like in XD, so you’ll just be hiding the arrow.
@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.
@sample18012 жыл бұрын
Thank you very much
@chidorirasenganz2 жыл бұрын
This is the approach I’ve been trying to get my team to adopt! They just look at me like I’m crazy 😂
@AMDesignAndDev2 жыл бұрын
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.
@joseflinha2 жыл бұрын
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
@AMDesignAndDev2 жыл бұрын
You can have a look at my buttons video: kzbin.info/www/bejne/eoDFanaAbtKjj6s
@joseflinha2 жыл бұрын
@@AMDesignAndDev Thanks, I write comment there :)
@rareviz2 жыл бұрын
Appreciate your point of view, great pointers!
@AliAhmed-ri5ty2 жыл бұрын
Wonderful and informative. Keep making these, they sure help newbies like me.
@AMDesignAndDev2 жыл бұрын
Will do Ali :)
@sheldonlouis78952 жыл бұрын
Very helpful, wish I saw this earlier
@julianTrichardson2 жыл бұрын
Broooooooooooo! you taught me so much in such a short space of time. Thank you.
@AMDesignAndDev2 жыл бұрын
Glad I could be of help!
@omotayotaiwo43752 жыл бұрын
This is one of the best video I’ve seen.
@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?
@laweffect2 жыл бұрын
Top job, sir.
@mrajax_01012 жыл бұрын
Assalamualaikum, Zarbardastt Video
@AMDesignAndDev2 жыл бұрын
Walaikum As Salam Jazak Allah :)
@tobysilverman33432 жыл бұрын
super helpful!
@karenbeal61372 жыл бұрын
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!
@AMDesignAndDev2 жыл бұрын
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.
@XanSintax2 жыл бұрын
@@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.
@AMDesignAndDev2 жыл бұрын
@@XanSintax That's an excellent point. I would consider that for later videos!
@positron18902 жыл бұрын
Hi! Many thanks 🙏
@AyanaDesign2 жыл бұрын
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!
@ilzamwyd2 жыл бұрын
You help?
@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.
@machine13762 жыл бұрын
This video just made me subscribe! You won me over with your focus on proper fundamentals. Thank you for this!
@yiyang87182 жыл бұрын
super clear and helpful. thanks so much !!!
@AMDesignAndDev2 жыл бұрын
Thank you!
@ursulasingleton11602 жыл бұрын
Is there a link to your public training courses, please?
@AMDesignAndDev2 жыл бұрын
I don’t have any public courses yet.
@AMDesignAndDev Жыл бұрын
I have finally launched a full premium course on Figma: asaad-mahmood-s-school.teachable.com/ You can use the voucher "amsubscriber" to get a 50% off.
@anaaguilar40162 жыл бұрын
🥺I feel so grateful, thank you!
@AMDesignAndDev2 жыл бұрын
You’re welcome 😊
@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!