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

Learn how to design complex components in Figma with layouts grids, subcomponent variations, theming, and instance swapping, ready for a robust design system.

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.

Article mentioned in video: Creating Atomic components in Figma by littleBits:

Other Build UX How-Tos:

View the Figma file for this how-to:

Check out the How To Design Flexible Button Components in Figma video tutorial:

Personal website:

Music:
Self produced, 2012

[buildux]

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.

[jiahnkang]

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

[antischulz]

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

[anthonyeze]

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.

[nickrichardson]

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

[nikolar]

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.

[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. 👏🏼

[uxlordsimplifyingdesignpro]

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

[digigoliath]

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

[chrisronan]

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

[ifunanyaofodu]

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

[hardboiled]

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.

[karolissteponavicius]

Super informative and well explained. Thanks.

[marlenestoffers]

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

[Maxcollz]

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

[jesseocon]

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

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

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

[louisehannah]

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

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