How to Make Complex Components in Figma with Auto Layout (Updated!) | Build UX

hey everyone and welcome back to build UX in this out - we're gonna make some complex components in figma using auto layout here in fig mode we have some starter components that we'll use as well as some design reference to work from in terms of the components we're starting with we have our color palette which is already vetted for accessibility in terms of having sufficient color contrast we have our typography specs an image watermark icon a chevron icon as well as some buttons and links that we'll be using these buttons are actually dynamic and used Auto layout themselves and have a dedicated how-to on creating these buttons if you'd like to check that out our design references based on a passed-out - that depended on frames with layout constraints to achieve all these different variations that we see here and this required a lot of manual on tedious work to replicate some elements and also showing hide various things so we could accommodate all the variations of these layouts but now with Auto layout in figma this whole process is gonna be so much simpler and easier so to begin let's start by creating this card that has all these potential sub elements in different combinations the first thing we can start with is our typography so I'm going to hit T for the text tool and type out the discovery process selecting this text let's assign our title textile as well as a Burch color fill Bing tea again let's add another text field this time I'm gonna paste in this body copy that we see here for the card content so with that pasted in we want to make sure the copy default text style is in place as well as that same birch color fill moving on let's drag in an instance of a birch color button as well as a link of a similar color style so we have link birch and for the desktop sizing let's drag that in place and the last thing is we'll make use of our image watermark and that Chevron icon here let's change Chevron to be Burch as well just so we can see it while we're working on things right now let's bring some order to all of this mess that we've created the first thing I want to start with is considering the overall sizing of the card component so the target size I want to go for is 360 pixels and width in order to achieve this we should adjust the width of our body copy to accommodate for the padding so we hit that target 360 pixels so starting out in the width let's type 360 and we'll subtract out 32 pixels of left and right padding that we'll want to have so total let's subtract 64 from this and that will give us a final width of 2 96 now for our card title we can just drag this so that it wraps the two lines for now so that way we know it'll fit within the constraints of the card I'm gonna drag this icon into place temporarily and we'll address its layout in just a moment same thing with this button and link will handle these once we start adding actual layouts here so the first thing I want to address is this pairing of the card title with its icon and if we look at our design reference this is a variation where the whole card is clickable and this title is acting as a link so selecting our card icon we can introduce our first Auto layout layer we'll use shift a will see that we added an auto layout with this frame let's call this the card header and digging into its layout settings we don't want any padding and we want the space between these elements to be 16 pixels this is gonna be a horizontal layout so that's looking good and let's open this up we can rename this layer to be the card title and make sure both of these elements are aligned to the vertical center looking good I want this card header to have the same outer dimensions as our body copy so we hit a width of 296 and here our overall width is dynamic and it's ending up at 277 so what we'll need to do is adjust the width of this title so that way we hit that overall width of 296 and what that means is we need to add 19 pixels to the card title so we hit that overall width now if we check out the calculated width of our card header it matches that of the body looking good let's now focus on the way-out between this header as well as the body copy so I'm going to rename this to be the card description our layers so we can select both of these hitting shiftin a we're gonna add another auto layout and we can rename this layer to be card text now automatically there is zero padding for both horizontal and vertical directions and want the spacing between items to be 16 pixels that check on that this stage is what happens if we disable this icon because we have a lot of variations where the icon isn't shown and right now you can see that this card header is centering within the card text Auto layout so to fix this we want to make sure this is set to left alignment and that way as we enable or disable this icon the layout doesn't shift unexpectedly with that in place we can keep adding elements to this card so let's address our image that we'll have here and you can see that it has a background that we'll need to create in order to achieve that background let's add a frame around the Slayer so I'm going to hit ctrl or command + alt or option + G to create a frame let's rename this frame card image and give it a background color so I'm going to turn on this fill layer and let's just sample this placeholder a gray for now the image to be 360 pixels to match the overall width of our card and the height is going to be 192 per our design reference here with those dimensions established we can use our alignment tools to horizontally and vertically Center the watermark as well as setting its constraints to center and center the next consideration is GRU texts with either a button or link so we can select all three of these layers and once again use shift a to add an auto layout let's call this frame card body at this level we want 32 pixels of left and right padding and we'll also want 32 pixels of vertical padding to achieve the spacing between the image and the card body as well as this padding on the bottom edge of our card and the spacing between elements we want to set that to 32 as well we don't want both a button and a link so as we turn either of them on or off the way out automatically adapts will leave this button turned on for now and that padding is looking good the last thing to do to finalize our card component at this stage is to use shift a once more for the final Auto layout layer we'll rename this to be card at this layer we can actually bring in our fill color so we have this lighter charcoal value this will have a border radius of 4 pixels and we'll also want to add a drop shadow effect or the dark theme so our card is turning out pretty good here we've basically styled this first variation which is kind of a maximum use case of all the different elements coming together and if we zoom out a bit we can see how this auto layout component can now achieve all these different variations without having to do a bunch of tedious work so for example this first use case is already covered the second use case we could definitely achieve with a separate button component this button is using auto layout as well so it's only going to be as wide as it needs to be and that actually reminds me we should update this text to be learn more just to match our reference here but if you wanted a full-width button you could definitely bring in another component for that for this next variation we simply turn off the card image and all of the text tucks into the top edge of the card and then we trade out our button or link and this we should also update with the text to match our design so we'll say learn more on this as well now this link is not using Auto layout so you can see that the text wants to rap to a new line since a component doesn't have enough space for it and this is basically just a frame with some layout constraints so to adjust this we want to use ctrl command + the right arrow gradually increase the width of the component until all of that text fits on the same line that's solved for we can easily trade out a button where text link is needed so this next variation is taken care of continuing down the line we have some variations that feature the card image more prominently so the first one would be card image description instead of a link we have a button looking good and then the last one takes advantage of that Chevron icon we added earlier so this one would have the icon no description and no button so you can see the power of auto layout in these more complex components and sometimes it's kind of hard to wrap around how many auto-layout layers are needed to achieve different spacing values between elements once you get it set up its super flexible and makes for a much more adaptable component so with all of those use cases verified let's go ahead and componentize this outermost card layer we can use ctrl or command + alt or option + K and we can get this componentized to restore it back to that kind of original or first use case just as a reference and drag out an instance of this card and we're gonna talk about redeeming it for a light theme so similar to all other figma components what's great about this is we get all that inheritance of the spacing and the functionality but it's easy to restyle it four different color themes that's needed and one thing I'm seeing here as a good illustration at that point is the card layout Auto generated some spacing between items of four pixels so in order to fix that we just have to go to the master instance select the card and change that spacing between items to zero you can see that both instances updated immediately so now everything is perfect selecting the second instance let's make sure it's spaced correctly in our design files we can now begin restyling all the colors of this for a light theme so the background of the card itself is going to be birch instead of elevation one for the dark theme we'll trade that out for light going further into our elements here we have this birch button we want to swap out this instance or a charcoal variation if we turn on our link for a moment we want this to also be charcoal so instead of default we want charcoal desktop default and then our card text the description this darkest charcoal color and in the header we want both the fill the icon as well as the text of the title to be that same dark gray so just double-checking the icon looks good you can see that we've received this final component or a light variation so we can reek opponents eyes this with ctrl or command + alt or option + K and we have to call this light so there's a separate variation there I'd probably want to rename this first instance to be dark that way we can quickly swap between instances so if we were to drag out a third card we have this instance panel we can just trade it out for dark as needed so with all that work complete we now have a really flexible and adaptable cart component that uses auto layout to its fullest potential we can swap out for different use cases as needed and we only have one parent component for each theme so we don't have to go through and create tons of variations that we all have to manually maintain so that does it for this out - there's gonna be many more how-to is coming out that focus on Auto layout and really explore all the possibilities that this feature unlocks so thank you so much for watching I'm sure to keep a lookout for the next build UX how-to [Music] [Music]

Channel: Build UX

Views: 25,448

Rating: 4.9749217 out of 5

Keywords: html, css, accessibility, ui, ux, user experience, ux design, ui design, frontend development, front-end development, ux development, figma, figma components, design system, web development, coding, tutorial, how to, code, vscode, tutorials, web design

Id: 2xkjnY1t0xQ

Length: 13min 13sec (793 seconds)

Published: Thu Dec 12 2019