Figma tutorial: Auto layout review card iterations

in previous auto layout videos we showed how to create an auto layout component from scratch with the end product already in mind but what if you're still ideating and don't know what the finished product will look like yet designing can be messy and unpredictable but you can easily add auto layout at any point of this process let's use a simple example to show how this process could look we want to add cards for customer reviews to the home page of our website these review cards will have three text layers the first for the name of the user submitting the review the second for additional metadata like the date of the review and the third for the contents of the review let's fill the review contents with placeholder text to give it a more realistic length include a link to read full review change the width to 350 points and set to auto height we'll also add an ellipse for the reviewer's avatar this size seems about right that's all the pieces we'll need for now so let's explore some layout options we could create an option where we left align all objects starting with the avatar or we could create an iteration where we shift the avatar to the left of the text objects or maybe a third option where we put the user's details toward the top and the review contents toward the bottom left aligned with the avatar these explorations were quickly done without using groups frames or auto layout from here we can decide which card version to use then add auto layout and the appropriate resizing properties let's see what that would look like for each version for the first option all layers are vertically stacked and left aligned this option only needs one auto layout frame let's select all the layers and add an auto layout frame by using shift a now let's fine tune a few details so we can better visualize how the card structure might look remember we're still in an iterative phase so we don't need to worry about the exact numbers we can always change these later on the card's child objects need a bit of breathing room so let's adjust the spacing and padding next let's make sure they'll resize the way we want set the card horizontal resizing to fixed width we don't want the avatar to resize so we'll set it to fixed width and fixed height we want the text layers to change with the width of the card so let's adjust their horizontal resize to fill container we'll leave vertical resizing to hug contents for more information on resizing properties check out the third video in this auto layout series linked in the description below looking great so far but i'm curious about option 2. the text layers are left aligned and placed one after another while the avatar is outside the text layers we'll need to add two dimensions of auto layout here first let's select the text layers and add an auto layout frame then we'll combine this new frame with the avatar in another auto layout frame onto the details let's adjust the spacing and padding next let's take a look at its two child objects the avatar and the text auto layout frame we'll keep the avatar at fixed width and fixed height let's adjust the spacing and cushion from the avatar we'll set horizontal resizing to fill container and leave vertical resizing to hug contents next let's hit enter to select all its child elements and apply the same resizing as its parent now what about the third option we arrange the contents related to the user at the top while separating the review content on the bottom but the top section has two dimensions so let's first select the name and the metadata layers and add an auto layout frame then we'll select that new frame and the avatar and add a second auto layout frame finally let's combine that new frame with the review content into a third auto layout frame this card now has three dimensions of auto layout creating and nesting multiple auto layout frames allows us to define how different elements will respond to resizing and repositioning of other objects on the card auto layout frame let's adjust the spacing and padding next are its two child elements user information and review contents for both of these objects we want horizontal resizing set to fill container and vertical to hug contents on the user information we'll change the spacing we'll also change the alignment to left and vertical center to center it with the avatar next let's look at these two children of the user information object we'll keep the avatar's resizing to fixed width and fixed height for the other object let's adjust the spacing then we'll make horizontal resizing fill container and vertical hug contents lastly let's hit enter to select the nested text layers and apply the same resizing settings great between the three options i'm pretty happy with option number two so let's add some finishing touches we'll apply color and textiles to the name date and review content then apply a brighter color to read full review to indicate a clickable link we'll also increase the avatar size to 64x64 points add a placeholder avatar image rename all the layers and make it into a component to use in our designs but wait the name and date look a bit too far apart let's bring them closer together by adding an auto layout frame to them and changing their spacing ah that's better i also want to include a star rating to the review cards let's grab the star rating component and drop it between the user data and review contents looking great this component is available in the file linked in the description auto layout isn't just for when you have the finished product in mind you can use it at any time of your process between early explorations and when the final product decisions have been made no matter the fidelity of your designs auto layout can save you time or make it easy to jump from low to high fidelity when you're ready be sure to like and subscribe to keep up to date on the latest product and community news thanks for watching

Channel: Figma

Views: 20,160

Keywords: figma, design, layout, product design, auto layout, tips, tricks, UI design, ux design, Auto, auto layout Figma, Figma Autolayout, Figma tutorial, tutorial figma, how to use auto layout, how to use autolayout figma, figma autolayout tutorial, tutorial autolayout, autolayout tutorial, app design

Id: q2h72oKSjcA

Length: 6min 42sec (402 seconds)

Published: Fri Jun 11 2021