How to Design Complex Components in Figma | Card UI with Layout Grids

[@buildux]

With the introduction of Auto Layout, making complex components in Figma is even easier now. I've created an updated how-to that covers the latest process: kzbin.info/www/bejne/aKnOm6GPZtljrrM Using Frames and Layout Constraints as covered in this video still works great, and is an important skill in Figma for certain situations where Auto Layout can't quite achieve the desired effect, but Auto Layout brings a new, powerful way to handle flexible containers that unlocks even more possibilities.

[@jiahnkang780]

This is the Best UI card/component creation how-to video. Thank you so much

[@anthonyeze7312]

Just getting started with UI/UX Design and especially Figma and I must say I'm glad I found your channel - off to a good start. Thanks for the tuts.

[@buildux]

Thanks so much for the kind words! Happy to hear you're finding the videos helpful. More to come!

[@antischulz]

I must say I'm glad I found your channel. You are doing worl much much better.

[@buildux]

Thank you so much for the support and kind words.

[@nikolar91]

Hi there! Nice video, it's really informative to see how someone is thinking about the whole design process in Figma. I also like to keep everything tight and I rely heavily on components and styles. I have few suggestions that maybe you can consider: 1. In my opinion I think you made the component system good, but when you came cards you made it to complex for no good reason. I don't see the advantage of having the one master component of all the cards, specially when you have 2 color themes. Too many hidden layers, that can get easily confusing. My suggestion is have each card as a separate master component (not a master component that is nested in another component), because let's say in one moment you want to change a position of button on one of your cards to be right oriented instead of left? You will have to go to you master component duplicate, figure out which one of the hidden layers is the one you want to move, than move it and hide it again. But than you have other components that used that button and you want to have them to stay on the left side, so actually on your master component you need to duplicate that button, align to the right side, hide it, find the instance you were originally working on, turn on the new button. If originally all your cards were maser components than you would just take that button and align it right. 2. Having a helper spacer components really makes sense to me if you quickly want to measure something and you don't want to draw new rectangles all the time. But I don't see much of a need to keep them for developers. They will use Code mode in Figma, in that mode when you select an object and move a courser to any other object you will get smart guides showing you exact relative sizes between those 2 objects. Tip: you get the same effect in Design mode if you hold ALT while an object is selected, move your cursor around and see relative distances. 3. Grids. I don't really get why you need so many of them in your cards. The only real use was when you were rescaling the height of your cards. You said it yourself that they get confusing in one moment, I prefer to use them as less as possible. Since your design system is revolving around 8px rule, why not just use the general 8px grid? That way you can visually see how everything is spaced. Oh, and someone told you the trick of having just one horizontal line, you can use the same trick for the vertical as well. Even more faster way is to just use the ruler guides, no need for writing down numbers - you can do it visually. Just make sure that you move your cursor inside of your frame when you are dragging the guide, that way guide is shown only in that frame and it sticks to it. Problem with both approaches is that in the lines will be constrained to top left corner and you can't change it (yet?), so it doesn't help with the guides on right and bottom if you want to have scalable component in all directions (hope you get this). 4. Nudge. I haven't notice you use it at all, it's super useful. When you move the selected object hold shift and it will jump more than one pixel. Nudge amount is 10px by default but you can change it to 8px, just search it in the menu. That makes life way more easier, in most of the cases you don't need the spacer helpers. Need something to be 8px relative to the text? Just put your object so it aligns with the text and nudge it, no spacer needed. This in combination with the 8px grid makes things way faster. As a conclusion, I think in some cases you went too far with defining strict rules. I think that point of the design systems is to make your work faster, easier and consistent. Having a flexible system helps with that, you always need to balance strict rules with the ability to change them. Maybe try not to reach the point where everything is reduced to a single master component or to have them as less as possible just for the sake of it. Or to have guides everywhere even if you don't actually need them, but it looks like it would be good to have them.

[@buildux]

First off, thank you so much for all the thoughtful feedback and helpful tips. I'd like to start of by saying I agree with all your recommendations, and will definitely consider them in future work. 1. Component composition and complexity is definitely something I struggle with, and try to improve whenever I approach a project. In my mind, there's a spectrum of having a more complex master component vs. having more complex maintenance. What I mean by that is I can build a quite complex master component (like I've done in this video) with variations, hidden layers, etc. all wrapped up into it, but then have an easier time updating how all card instances look by changing some design properties on a single component. On the other hand, I could instead build several distinct master components for each variation, and have a much simpler component to use and adjust, but then there's more complexity in updating the look of all cards if I need to update some of the design properties. Ideally, I'd love to reduce complexity and improve maintainability, but I find the way nested components work in Figma to be limiting in this area. The main struggle I have is a nested component cannot have its width/height changed, so this makes it really difficult to have really un-opinionated master components (let's say, a component just for the card's background/plate) without running into some limitations. With that in mind, I think either approach (one complex master component or multiple, simpler, detached master components) is viable, and really depends on the priorities of the design system and the team working on it/consuming it. That being said, I really am giving your recommendation some strong consideration, and might try a project with this approach in the future. 2. My use of spacer components in this video was motivated by a few things: 1. creating a dedicated design layer that can be turned on for "redlining" exports (if developers can't easily access Figma, or if a team doesn't use Figma), 2. having some more formal design system documentation of a set spacing scale, 3. having a temporary reference for layout adjustment like you mentioned, and 4. I honestly wasn't as knowledgeable or comfortable with layout grids when making this video. Since this video, I've gradually used these spacing components less and less in my components, and have definitely gotten much more proficient with layout grids. I still include them in every project as a documentation of the spacing scale, and they still come in handy for showing certain spacing in situations where layout grids create too much visual noise when enabled, which is related to your third point. 3. I agree that grids may be overused in this example. That is definitely a result of having a single master component that handles all subcomponent/layout variations, in relation to your first point. In relation to relying on a simple 8px grid, that's something I will definitely try. In the past, I've found it a little more tedious for me personally to count the number of grid lines manually vs. creating a layout grid, but reducing visual complexity and potential confusion is an important point you make. The tips/tricks you mentioned here are fantastic, and I have improved my use of single line layout grids and even single-side stretch columns/rows in future projects. 4. I also started using nudge much, much more when I discovered I could customize the nudge amount a while ago. This is a great tip you've offered, and in a couple of recent videos, I've mentioned it directly because it's sped things up so significantly, especially when combined with `Ctrl/Cmd + Arrow` or `Ctrl/Cmd + Shift + Arrow` for quickly adjusting the dimensions of the currently selected layer. Your conclusion is a very valuable thing for me to consider. I agree completely on the priorities and needs of a design system, and I think the spectrum of where to place complexity that I mentioned above is an ever-present challenge for designing any system that scales. If Figma can resolve some of the limitations of nested components, that will open a lot of doors for much simpler composition, while still allowing for very convenient maintenance. Thanks again for all your feedback. With any of the content I produce, my main intention is to show how I go about planning, building, and iterating on my projects, and the real value of sharing my process is getting such thoughtful recommendations and insights into other approaches that can be even more effective. Thanks for watching and for all the time and effort you've put into your comment! 🙇‍♂️

[@nikolar91]

​@@buildux Thanks for another great answer! It's really nice to have a meaningful conversation online. :D Maybe one ting that I want to add about the first issue: my approach would be to set up all the things into components up to molecules, but to make a component from a organism I really need good reason for that. Most of the time I won't have a problem where I have to manually change 20 cards, because usually changes are done on the level of molecules. Or let say cards you made here, probably they won't be used on 20 different screens but 3-4, so even if you need to make some great changes doing it one by one is not a big hustle. You don't change the 8px system in the middle of the design, so that now you actually need to change everything. There are also ways to make those big changes easier, find out about "Select same" options in the menu. It helps a lot if you need to select similar stuff on the screen. The main problem you have, as you said, is with buttons where you cant adjust the size of them once they are nested in the component. With my approach you don't have this problem. But than if you actually have a huge project where you use cards all over the place and you need to make a big conceptual change than your system makes sense. Again I would say it all depends of the context. My advice would be don't make some rigid rules of your workflow that you need to follow all the time, but try to make a workflow that is the best possible compromise.

[@SoyandPepper]

i respect that you pinned this! thank u

[@wrongcore]

@@buildux You're saying you gradually replaced spacing components with layout grids. I'm really curious how you would express a margin-bottom for a, say, heading, by using layout grids.

[@skube]

I would have loved to see more about how changes could be handled later on into a mature design using these primitives. You touched upon it with the simple button component but I was still curious as to how flexible the more complex components would be if say, the spacers had to change to 16px. Fantastic series though! Your in-depth knowledge about a wide range of subjects is quite remarkable. From typography, to design, to code. 👏🏼

[@buildux]

Thank you so much for the kind words! I would love to go into more detail about handling further variations with complex components. For the example you gave of spacing between elements changing, that would likely require a separate component variation to make possible, since you can't change the dimensions/positioning of elements in an instance of a component. The approach would similar to our text-only card where we duplicate the text and shift it up as needed. What are your thoughts?

[@nickrichardson8149]

Extremely helpful! Never thought about creating dedicated spacer components. Really smart idea to help during dev hand off!

[@buildux]

Thank you! Glad you found the video helpful. I really fell in love with making components for spacing values for quickly determining the layout of a component, too. Much easier for me than manually adjusting width/height and checking gaps between elements.

[@muddyjoe]

@nick Same! Definitely pulling this tactic into my workflow!

[@chrisronan]

Your technique is detailed and well implemented. Good work and thinking here.

[@buildux]

Thank you so much for the kind words and for watching!

[@uxlordsimplifyingdesignpro5544]

wow, this is a very professional tutorial. I love that you focused on a miro-subject rather than broad one. It's hard to find these pin pointed videos

[@buildux]

That's great feedback, thank you! I will be sure to make more how-tos focused on a single technique. My longer form videos show my full process of doing everything in the context of a project, which can be helpful to see how it all goes together, but for learning something the first time, I'll be sure to have a dedicated video on it.

[@digigoliath]

Just starting with FIGMA. This video is really useful for non-Designers like me. Subbed, of course.

[@buildux]

Thank you for the support!

[@hardboiled2000]

As Junior UX designer working on Live products, these tutorials are super helpful for getting those details right on the UI deliverables (sometimes hard for designers he came in from the process design anagle), using the spacing block is super helpful, and the layout grids for frame is one over sketch for me. I think slecting the right colors for a design system will forever baffle me tho.

[@buildux]

Thank you so much! I'm very happy to hear you're finding the videos to be useful in your work. Since recording this video, I've learned to use Layout Grids further and they are indeed very handy. Color palettes are definitely a huge topic. I try to pick a primary brand color and use an HSL picker to create a scale of various lightness values, adjust the saturation or hue slightly as needed to keep things looking vibrant. I think the process for selecting initial brand colors delves pretty deep into design theory, but creating a system from that can be a little more predictable based on common UI needs. This is definitely a potential topic for a future video! Thanks again.

[@hardboiled2000]

@@buildux cheers for the color tips, I'll keep that in mind.

[@ifunanyaofodu6037]

Thanks a lot for these videos. I've learnt so much from watching you work. Thanks again.

[@buildux]

Thank you so much for the kind words and for watching! How-Tos and videos are in the works 😉

[@KamakazeCOG]

this was an amazing tutorial.

[@buildux]

Thank you so much!

[@karolissteponavicius6673]

Super informative and well explained. Thanks.

[@buildux]

Thank you for watching!

[@marlenestoffers7496]

Great tricks.. thank you! I like the Primitive card idea. You've saved me some time!

[@jesseocon]

Thank you so much for this tutorial. It is so helpful as I'm just getting started with Figma.

[@buildux]

Glad to hear it! Auto Layout is so new that I'll keep evolving more workflow, so more tutorials are in the works. Thanks for watching!

[@anismahmud3636]

Nice explanation

[@buildux]

Thank you for watching!

[@Maxcollz]

with same guides would you come up with for the desktop version

[@louisehannah6127]

Excellent tutorial! Any plans for additional videos on complex components such as, data grids?

[@buildux]

Absolutely! There are several more tutorials in the works. I've actually been playing a tutorial on data tables for quite a long time, but was waiting for Auto Layout to launch before I recorded it. Thanks for watching!

[@Ahmuyr]

You can actually solve many problems you are describing directly in Figma. For example, the button having the extra space around can be fixed by reducing the "frame" container while still keeping the content same. This is done by holding control and resizing the component frame. Second thing is making a single horizontal line with grids. If you for example what a horizontal line; What you do is select "Row", count: 0, color:100% type:top height:192 offset:192 gutter:0 And this way you only get a single line at 192px from top.

[@buildux]

Thank you for the suggestions! I agree with both recommendations. Since making this video, I've continued to refine my process and do follow your advice. I now size component frames to not include focus rings, if they would exceed the desired layout dimensions. I also have learned Layout Grids more thoroughly and have definitely started incorporation the left column/top row trick you detailed so well to create single-line layouts. Thanks again for the great suggestions and for helping me to continuously improve!

[@Litonfiredesign]

Something cool I found out. You can create a single grid line ( instead of creating 2 lines in the occasion that you only need one ) You simply set the count to 0 ( Zero ) and then set the type to either top / bottom or left / right then the rest is the same. Now you can have all of your grid lines in place and never turn any off.

[@buildux]

This is perfect! I found out about this after making this video and wished I had known it sooner. Thank you for posting here to help others who are watching.

[@IkedaDogbo]

im brand new to figma/UI design but don't want to miss a possible gem lol. Are you referring to the layout grid?

[@FaridNobar]

Thanks for you perfect tutorial. I think for making other variations you can shift the text box height to it's below grid line and change it's constraint to top&bottom so you don't need to manually check the height of the text box whenever you change the height of a component.

[@buildux]

Great suggestion! This would be a really nice improvement, since you could quickly adjust the component's height to accommodate any length of text. This would also help retain the spacing between the text and any buttons/links at the bottom of the card.

[@wanderdias6645]

Are you planning to do a beginner series on UI Design?

[@buildux]

Great question! The current focus of Build UX is to show expert HTML, CSS, accessibility, and designer-developer handoff, as these topics don't get enough attention. Although I started my career in design, I'm not sure if I'll be making a series solely focused on design. I will likely create a series about the basics of accessibility, which will have a section focused on design, but this channel currently assumes viewers have some foundational knowledge in design and development. What UI Design topics would you like to see? What would be most helpful in your work? Thanks again for the great question and for watching.

[@9KoubA2]

This is excellent, and very sad to only see

[@buildux]

Thanks for the kind words! I'm so humbled to have anyone watching these videos, so I've been so surprised to see the number of views this video has received. Good call! I definitely could have made a dedicated grid style for each variation, and turned them on/off for specific component instances. I think with a good naming convention to keep layout grids grouped by component this would scale quite nicely, or try to stick to a limited set of grids, such as 16px padding all around. I'll consider making a video regarding soft vs. hard grids. I'll need to research this further to make sure I understand what this terminology refers to, but I'll keep it in mind. Thanks for watching!

[@重力术士]

Wow! Really great video tutorial! It will be very helpful if you can add subtitles in the video. Thank you!

[@buildux]

Thank you! Glad you enjoyed the video. I would definitely like to have subtitles on videos to make them more widely accessible. My goal is to grow this channel to the point where it's possible to have subtitles for all videos. Thank you for your patience with this, and thanks again for watching!

[@dotsona07]

Great video, i wonder though if it would be easier to space the design using a 4px grid on the frames/components rather than drag out and align little spacers. Just a thought. Although the spacer is nice for documentation 🙂

[@buildux]

Absolutely! I design on a 4px and use spacers more as a visual reference for developer handoff as a form of "redlining". That being said, I don't use them as often anymore once I figured out you can customize the nudge amount in Figma. The spacers are totally optional and I only really use them to document spacing that isn't shown with Layout Grids.

[@bassamazizi7505]

Amazing!! All my appreciation ♥ ))

[@buildux]

Thank you! Much appreciated.

[@za9067]

Thank you for the tutorial. I have learnt quite a few things. I have a slightly different question for you. Do you record the video and audio separately or together? What microphone do you use?

[@buildux]

I record the video and audio together. I find this is easiest to edit them together in my workflow. If I make a mistake while speaking, I simply pausing, don't move anything on screen, restate what I'm trying to say, and then continue working. My microphone is a CAD E100S condenser mic. I have it connected to a Focusrite 2i4. This setup isn't necessary, but it's something I invested into a few years ago for various projects that required me to record speaking. On the software side, I use Ableton for recording and doing some simple cleanup. I already had Ableton for making music (sound as the background song in this video), but other programs would work great for recording vocals. I've thought about doing a behind the scenes video on my process, because I have some unique automation for setting up the recording and my editing workflow. Would you be interested in that? Thanks for watching!

[@artsmuga1330]

Thank you very much for your videos - they are very useful and informative! I have a question: I need to create a master for the table header. but it is assumed that the number of columns in the table may be different, as well as may be different length of column names. How to build a component correctly, because I cannot move elements in the child component after? I will be grateful if you record a video lesson on this topic! I think it will be useful not only for me! Thanks and good luck!

[@buildux]

Thank you so much for the kind words, Art! Very happy to hear the videos are useful for you. Designing components for tables that scale to any number of columns/rows is definitely an interesting challenge. I will look into this and try to come up with a good solution. Great question!

[@artsmuga1330]

Thank! Waiting for new videos

[@yookaze]

Awesome video. Were you using the grids only as a visual queue so that you don't have to have the spacer layer switched on all the time? I know it's possible to anchor constraints of an element to the grid the element sits on. Is that how you are using the grid as well? Thank you. ( I know in your buttons video you talk about using a grid with 0 gutter as a padding for the text; is that what's happening here too?)

[@buildux]

Great questions! I do apply constraints wherever possible to make the components more scalable as the height changes. That being said, I've learned more advanced use cases for Layout Grids since making this video, so it's possible I missed some opportunities to constrain certain elements. I find myself using my custom spacer components less often the more I learn what's possible with Layout Grids, but they are still very handy as documentation for the development stage.

[@benitochavezt9890]

thats why you have guides and rulers, no need to have one component for every space you want inside every frame... you can add constraints as well and save a lot of time as well.

[@buildux]

I might not be understanding things correctly, but in my experience you can't make positioning changes to layers within a component instance. So, in the case of not showing the card image in an instance, there would be no way to have the card text "slide up" to the top of the card, which is why I've resorted to duplicating some layers to achieve different variations. Is there something I can do instead? I've found this as a workaround but would love a better solution. All of this will be much easier soon when Figma launches dynamic layout: twitter.com/figmadesign/status/1176150305379160065 After this is out, I'll be recording a whole series of new how-tos because it makes many things much easier and makes even more things possible for the first time.

[@antischulz]

thanks man

[@igor5379]

awesome!

[@antischulz]

thanks man!

[@zaccomusic]

good content I hope you keep update :)

[@alehmakaranka1089]

How did you end up with that number part in color names?

[@buildux]

Good question. I use HSL (hue, saturation, lightness) for all my colors in design and code because I like having a pallette with consistent hues but different tints through lightness values. As a result, I often include the lightness percentage in the color name so I can expand the color pallette easily. Before I did this, I would name colors like "Charcoal Light", "Charcoal Lighter", "Charcoal Lightest", and so on. But, if I wanted to add a new Charcoal color, this would often cause me to rename other colors, or have to come up with any entirely new name. By including the lightness percentage in the name, I could theoretically have 100 different versions of Charcoal that are easy to differentiate and not have to rename anything. I rarely have more than a few, but it's nice to not worry about naming as my designs evolve.

[@mieras]

Why don't you make the frame of the button smaller? So the focus ring will be outside of the frame?

[@buildux]

This is a great improvement! I've done this before, but ran into a couple situations where manually managing the frame size if I need to update the button/focus ring sizes got a little cumbersome, but I think the tradeoff is well worth it. Anything to better match the true layout and spacing is super valuable. Thanks for your suggestion and for bringing me to look into this again!

[@KP25294]

Great video @build UX. But just to nit-pick, you used the word "Affordance" incorrectly. I think you were looking for the word dominance or weight.

[@buildux]

🙇🏻‍♂️ Thank you, you are absolutely right. That's a bad habit I picked up, and I appreciate you helping me improve. After looking into it further, my understanding is that affordance is about something conveying it's purpose through appearance. Is that correct? I can see how this is different from visual emphasis through contrast, scale, weight, position, and so on. I really appreciate your feedback, because these details matter!

[@denns0r]

i don't get why you are having a "maxed out" default primitive when you are pulling out instances and turn them into new components anyway. so why putting all the additional hidden layers in the first primitive? 🤔

[@denns0r]

ah i think i got it... at first i thought the instances would get turned into new master components, but instead they are instances that were put INTO new master components. that way all the changes from the original primitive will render down on all the component variations, if not overridden. did i get this correctly?

[@buildux]

That's exactly the reason why I approached it this way. With Auto Layout, you can simply toggle elements in a component to be shown/hidden, and the layout adapts as needed. It's not necessary to make separate components for each variation, since you technically could just have one component that you customize each time you use it, but sometimes it's nice to have some variants ready to draft into a design if you have multiple common versions.

[@artsmuga1330]

I have one more question. When creating an extensive UI-kit there is a need for the same icons of different sizes. At that rate, should there be different sizes for each icon? Or it’s right to create one size of icons and re-size it, but with this there is a difficulty since icons are usually placed in a frame container. How to do the right thing? Thanx!

[@buildux]

Great question! First off, as you mentioned, icons should always have a container. I recommend creating a rectangle with no fill that has the dimensions you want your icon to be, and including it as part of the component, with the icon centered inside. That way, the actual dimensions in Figma will match your desired icon container size, and the icon will be spaced correctly within that container. Regarding various sizes of icons, it depends a little on your needs. You can either design dedicated components at each scale to ensure everything is pixel perfect, or simply set the icon and container to scale as part of the component constraints. I always opt for more control, so I might have a 16x16 icon component and a separate 24x24 variation, for example, so I can make sure everything aligns to the pixel grid. Some design systems even have different icons depending on the scale to show more or less detail at different sizes. Overall, I think separate components for each size is a great place to start and makes swapping out instances quick and easy.

[@artsmuga1330]

Yes, but the question was this: Sometimes there is a need to create icons with the same icons but of different dimensions. And I wondered how to do the right - create all the 16x16 icons, and then repeat them in all the sizes I need again? This leads to an increase in UI elements. But on the other hand, Atomic Design tells us that we must strive for the minimum amount of elements. If I simply re-size the 16x16 icons to the desired dimensions, it is not always possible to get right sizes, either the icons in the container or the container itself, depending on the shape of the icon. The question is whether - need to create all the icons in all dimensions for the UI, or if it is not the right way, then how to re-size them correctly? What do you advise? Thank you very much for your answers and a good day!))

[@buildux]

@@artsmuga1330 Sorry if my previous response didn't answer your question fully; it's tough to explain this all in writing 😉 The process I would probably follow is to create an icon components for every needed icon that are 16x16, with both the icon and it's container set to scale. With the right naming convention, you can use instance swapping to quickly switch which icon is used in your design. Next, I would drag out an instance of this component, resize everything up to 24x24, for example, and create a new component. This new component has the original 16x16 component nested inside of it, but everything is scaled as needed. Now, with the new 24x24 component, you can simply open its layers and instance swap out the nested component for other icons as needed, but the sizes will automatically all scale to 24x24. This workflow would only require you to design icons once at the "default" size, and then create only one additional component for the other size(s) you need. Hopefully this makes sense. I will definitely make note of this discussion as a good video topic for a future how-to!

[@artsmuga1330]

@@buildux Thank you so much for the explanation! Yes, it would be great if you show this process as one of the episodes in your video tutorials. I am sure it will be useful. In the program, such as Figma, there are tools and it is always intuitively clear how to work with them. But the program has the same Methods of Work, which can only be explained by someone :)) Thanks again, good luck and waiting for new videos;)

[@WeltonLSantos]

Please share project figma?

[@buildux]

The link to the Figma file is in the description, but here it is for convenience: kzbin.info?event=video_description&v=TS87r64iAVE&q=https%3A%2F%2Fwww.figma.com%2Ffile%2FS40FQXjKGnIoeWVDYmI3qP%2FHow-to-Design-Complex-Components I also have an updated how-to that uses Auto Layout to achieve the component variations more easily: kzbin.info/www/bejne/aKnOm6GPZtljrrM Hope that's helpful!

[@sergeyd2199]

Not sure how grids here are affecting anything at all. As I can see, everything is achived by using layout constraints, and having grid here doesn't add anything.

[@buildux]

You're absolutely right that constraints are the only thing affecting actual layout. The Layout Grids are simply there to act as a guide when positioning elements within the component, and to act as a light form of documentation for developer handoff. They are completely optional if you prefer to work without them, and I keep iterating on when I reach for them.

[@roberiodias9005]

Awsome content, no so good background music.

[@buildux]

After hearing feedback about this, I completely agree. Soon after this video, I stopped including the background music other than the into/outro. Thank you for the kind words and also for the helpful feedback!

[@MrTend0]

When I check on the Figma file in the comment: 24.19px padding left&right in the buttons... LOL

[@buildux]

Interesting. I'll have to look into this. I'm guessing something changed in Figma since this is an older file. I know they updated their typography rendering/frame sizing so that might be the cause.

[@sashabeep]

Card title must be, at least on the separated layer...

[@buildux]

Sorry, not sure I follow what you mean 🤔

[@sashabeep]

​@@buildux I mean that card title and card body text itself will be two separated elements in HTML, but you are using only one text container for both. Anyway, this is the great tutorial for building design system

[@buildux]

@@sashabeep Ahh thanks for the clarification. You definitely could have separate containers for the title and body content. In this case, I'm using paragraph spacing on the title type spec to control the margin beneath it. I usually stick to bottom margin so using paragraph spacing can be a handy representation for it. Tons of different ways to approach this!

[@wintercarver]

Thanks for the great tutorials -- just learning basic design now so these are super helpful and a nice balance of getting a little more advanced but keeping it practical. Not sure if it matches the utility, but I think you can use Figma's "guides" features to efficiently assist in adjustments instead of the "draw a rectangle" trick (that's easy, too!), which would bypass a few drag/drop and layer tinkering: help.figma.com/article/62-guides

[@buildux]

Thank you so much for the kind words! Glad you find the videos useful. I absolutely agree that using the guides/rulers is more efficient. That is a great point. Earlier in the video I use a guide to size a multi-line text frame, so I'm not sure why I used the rectangle later on. Lately I've definitely built the habit of always reaching for the guides and your suggestion is much appreciated.

[@wintercarver]

​@@buildux Glad to help. Keep the content coming! Also, fwiw, I am in favor of the chill beats in the background ;)

[@buildux]

@@wintercarver Awesome! Thanks for the feedback 🙇‍♂️

[@maverickmax909]

The background music is awesome but maybe it's better without it ...so I can listen to you speak with no distraction...#justasuggestion

[@buildux]

Thanks for the feedback! I'll consider mixing the music lower or leaving it out in future videos.

[@buildux]

I left the music out during narration in the latest video and I like it much better. Thank you so much for the great suggestion!

[@MuriloRavani]

@@buildux Consider NOT use the music. It`s nearly impossible to pay attention to the instructions with that background sound. You're talking about UX. This is UX. You don't play music in the classrooms. Thanks :)

[@buildux]

@@MuriloRavani As noted above, recent videos do not have background music. Thank you for the feedback.

[@zgmg9263]

KEEP GOING. I WILL PAY YOU $

[@zgmg9263]

I'm on Twitter at @username_ZAYDEK ❤️

[@buildux]

No money needed 😉Just happy to have you watching.

[@TheBeeOBee]

I would do anything to kill the music

[@buildux]

Based on feedback I received on these older videos, I no longer have background music during the video content. Sorry that it was disruptive!

[@jeffubeku6143]

The music playing was painful. Competing for attention

[@buildux]

Sorry about that. More recent videos only have the music in the intro/outro. There's an updated version of this tutorial without the music all the way through that makes use of Auto Layout: kzbin.info/www/bejne/aKnOm6GPZtljrrM

[@jeffubeku6143]

Thanks for your concern. I will check it out immediately. Thanks a lot

[@tolokaearnmoney4645]

At 5:08. why you have two components tab but i don't? i just have "Help & Resources" in bottom right corner of my Figma

[@buildux]

This video was before Figma redesigned the UI in 2019. In the left sidebar, the tabs for layers and assets are now at the top.