Figma tutorial: Card component with auto layout — Transcript

Full transcript

1. 0:00In this video we'll teach you how to create dynamic auto layout cards with images, that
2. 0:04can fit descriptions of various lengths.
3. 0:07We'll use some skills shown in our earlier videos on Auto Layout, so be sure to watch
4. 0:11those first.
5. 0:13If you enjoy this tutorial series on Auto Layout, subscribe to our channel to be notified
6. 0:17of the next video in the series, and leave us a comment on what to cover next!
7. 0:27We'll start by creating two text layers.
8. 0:29One for the title that will be size 18 semibold, and another regular weight, with a font size
9. 0:35of 16 for the description.
10. 0:37Let's also change the fill colors of these text layers.
11. 0:41Select both layers and add Auto Layout.
12. 0:45Since we stacked our text layers vertically, the direction is already set to vertical.
13. 0:50Ensure the space between items property is 8.
14. 0:53And set the padding to 16 on the top and bottom, and 24, left and right.
15. 0:58Add a white fill, and rename this to card details.
16. 1:02This isn't looking much like a card yet, so let's set a fixed width, but this time, we'll
17. 1:07convert the Auto Layout frame to fixed width by dragging one edge to resize.
18. 1:13Doing this changes the horizontal resizing property to fixed, and enables the Width property,
19. 1:18which we want to be 400.
20. 1:21Now, let's add an image to our card.
21. 1:24Using the rectangle tool, create a rectangle that is 400 by 400.
22. 1:29Then use Shift + Command + K and select an image to replace the default grey fill with
23. 1:34an image.
24. 1:35The image should be placed above title and description in our card.
25. 1:39To add it, you might think we should just click and drag the image into the top of our
26. 1:43Auto Layout frame, so let's demonstrate why that won't give us the right result.
27. 1:48Because the image layer is wider than the auto layout frame's width, minus its padding,
28. 1:53Figma won't automatically nest it.
29. 1:56We can hold down Command to override this nesting behavior.
30. 2:00Because we added the image directly to the same Auto Layout frame, it uses the same padding
31. 2:04values.
32. 2:05And, because the image has fixed dimensions, it's overflowing the card.
33. 2:10To fix the overflow issue, we can change the resizing property of the image to Fill Container,
34. 2:16so it fill only the available space.
35. 2:19And we end up with a card that looks a bit like a polaroid or instax photo, with a border
36. 2:24around the edges of the image.
37. 2:27That's not what we're aiming for, so let's undo those steps.
38. 2:30Now, instead of adding the card to our existing Auto Layout Frame, let's select both objects
39. 2:36and add Auto Layout, and set space between items to zero.
40. 2:41This new outer Auto Layout frame has zero padding, so the card is borderless with the
41. 2:46image extending all the way to the edges.
42. 2:49We've got the foundation of our card looking great.
43. 2:51We just need to address a few functionality quirks.
44. 2:55If we were to enter a long description for this card, the text would continue to outside
45. 3:00the card's boundaries.
46. 3:02Because the card details frame is set to fixed width, it won't grow to accommodate the text.
47. 3:08And because the text is set to hug contents, it doesn't wrap to a new line.
48. 3:13We can select both text layers and change their horizontal resizing property to Fill
49. 3:17Container.
50. 3:19This will allow the text to grow until it reaches the maximum width allowed by its fixed
51. 3:23width parent, minus padding, and then wrap to a new line.
52. 3:28Next, we want our card to be easily resizable.
53. 3:32If we click and drag to resize the card, only the outer frame resizes, while the contents
54. 3:37remain fixed.
55. 3:40Select the card, and hit enter/return to select all child layers one level down, in this case,
56. 3:46the image and the details frame.
57. 3:48Just like we did with the text, we'll change the horizontal resizing property to fill container.
58. 3:53Now, when we resize the card to be wider, or narrower, everything stays together like
59. 3:59we want.
60. 4:00But, we still need to fix the vertical resizing, which still doesn't work.
61. 4:05If we select both layers and change the vertical resizing property to fill container to match
62. 4:10what we did for horizontal, we'll end up with a weird, but expected result!
63. 4:15With both objects set to fill container, they're competing with one another to fill the available
64. 4:20space of their parent container.
65. 4:22They compromise and split that space an even 50/50.
66. 4:26If there were three items, they'd each occupy one third of the available space, and so on.
67. 4:32But that's not what we want.
68. 4:34We only want the image to grow and shrink.
69. 4:37Let's change the card details auto layout frame back to hug contents.
70. 4:42And there we have it!
71. 4:43A flexible and dynamic card that responds as we resize it.
72. 4:47Let's rename this to card, round the corners of the frame by 8, and check the clip content
73. 4:52checkbox to see that rounding take effect.
74. 4:55Apply a drop shadow style to give it some elevation off of the page.
75. 5:00And finally turn it into a component.
76. 5:03This looks great, but a big part of design is exploration!
77. 5:06For example, we might want to explore a version of this card with a price associated with
78. 5:12the travel package, on the same line as the title, but right-aligned.
79. 5:17Until now, we've mostly built auto layout components from the ground up.
80. 5:21We haven't really changed their structure in any way.
81. 5:24So let's learn how!
82. 5:26Select the title text layer, and use command + D to duplicate it.
83. 5:31Since the auto layout frame has a vertical direction, it duplicates below it.
84. 5:36This text layer will show the price of the flight or hotel, so let's enter a placeholder
85. 5:41value.
86. 5:42These two layers are going to share the same horizontal space, so we no longer want them
87. 5:47to be the full width of the container.
88. 5:49Select both layers and change the horizontal resizing property to hug contents, add auto
89. 5:55layout, and change the direction to horizontal.
90. 5:59This new auto layout frame is set to hug contents, and we'll need to change it to fill container
91. 6:04to extend the full width of the card.
92. 6:07Both layers are aligned to the left, just like in our previous video where we made a
93. 6:10navigation menu.
94. 6:12In that example, we used space-between to push the two objects apart.
95. 6:17We can do that same thing here to get a similar result.
96. 6:20Open the alignment fly-out menu and change it from packed, to space between to push our
97. 6:25price to the right edge.
98. 6:27This looks like the result we want, but when we add real content into this card, like a
99. 6:31long title, or if we resize the card to be more narrow, the two text layers overlap.
100. 6:38In this case, a better solution would be to change the title text layer to fill container,
101. 6:43so the text will wrap instead of overlapping.
102. 6:46And there we have it!
103. 6:48Another option for our card to compare and test against the other.
104. 6:52Let's add some real data to this card to make it a bit more realistic.
105. 6:55And add our purple blue color style to emphasize the destination of this flight deal, and bring
106. 7:00some of the brand colors into the card.
107. 7:03In our final design, this card component is used in rows that contain at most three cards.
108. 7:09Duplicate our card component to create three instances in a row, add auto layout, and set
109. 7:14space between to 40, and rename it to card row.
110. 7:17We'll also override these to have different content.
111. 7:21Looking good.
112. 7:22But now that we've wrapped these cards in a new auto layout frame, we need to customize
113. 7:26it to behave how we'd like.
114. 7:28First, if we were to use this in a responsive website with variable width, we want the cards
115. 7:33to each fill container horizontally.
116. 7:37Select the card row frame and hit enter/return on your keyboard to select the cards.
117. 7:42Then change their horizontal resizing property to fill container.
118. 7:46Because we have three cards, each will take up 33% of the available space, while still
119. 7:51accounting for padding and space between.
120. 7:54If we duplicate a card to add four, they'd occupy 25% of the space, and so on.
121. 7:59If the cards resize to be too narrow, or if we add a longer description the cards, some
122. 8:04text will wrap to a new line.
123. 8:07Our card did reflow responsively but look at each of the siblings.
124. 8:10They each behave differently, since their content is different.
125. 8:15Because cards within it are fixed height, they won't grow to be taller.
126. 8:19This means the only space for the card details to grow, is upwards, into the image.
127. 8:24This causes the image to shrink, and for the card details to have variable heights.
128. 8:29We originally set the vertical resizing to fill container for the image of our card.
129. 8:34This made it responsive when we resized it manually.
130. 8:37This is great when using the cards on their own, but when we added them to this row of
131. 8:42cards, they function as one complete unit.
132. 8:44In order for all of the images to always remain the same height, irrespective of their contents,
133. 8:50we can change them to fixed height.
134. 8:52There are two ways to do this.
135. 8:54If you don't need to preserve the flexibility of the original main component, you can select
136. 8:58the image in the main component, and set it Fixed height, and all of the instances will
137. 9:03immediately update.
138. 9:05But if you want to have two different behaviors and keep the main card component fluid, we
139. 9:09can override the properties of each of the instances by selecting the image and changing
140. 9:14them to fixed height.
141. 9:16Now all of the images are always the same height!
142. 9:19Next, let's shift attention to the card details.
143. 9:22The text content is being clipped because the cards are still set to fixed height.
144. 9:26Let's change the vertical resizing to fill container instead.
145. 9:30Nice!
146. 9:31Now we can read all of the content.
147. 9:34We can certainly leave these as is, but let's talk about one more thing using this as an
148. 9:39example.
149. 9:40Remember earlier when we said the cards act as a unit?
150. 9:42When the cards have different heights, they feel less symmetrical.
151. 9:45How can we make it so that when one card grows or shrink, so do each of their siblings?
152. 9:51Right now, the cards are set to fill container, the images are set to fixed height, and the
153. 9:59details are set to hug contents.
154. 10:06Hug contents is the only resizing property that tries to shrink.
155. 10:10If we reverse this and tell it to also fill container, we should be good to go!
156. 10:16Select the card details frame in each of the cards that are too short, and override the
157. 10:20vertical resizing property to fill container.
158. 10:23It's important to keep the card that was the tallest set to hug contents.
159. 10:27This is the card that dictates the total height of the row, while the other siblings just
160. 10:32follow along.
161. 10:33If we were to also set the details of this card to fill container, Figma will display
162. 10:38a toast notification that the card row has been set to Fixed height.
163. 10:42This can be confusing, so let's talk through it.
164. 10:45Originally the card row was set to hug contents.
165. 10:48This means that it is adapting to the size of the child items within it.
166. 10:52When they grow, it grows.
167. 10:54When we change all of the cards to fill container, they're adapting to the size of the parent,
168. 10:59and trying to grow to fill it.
169. 11:01These two resizing properties are at odds with one another, and cause a conflict that
170. 11:05needs to be resolved.
171. 11:07Figma does this by changing the auto layout parent frame to a fixed height.
172. 11:12The opposite behavior is also true.
173. 11:14If we set the row back to hug contents, all three cards will be converted to Fixed height.
174. 11:20Depending on whether you have a child or parent auto layout frame selected, you'll have different
175. 11:25properties available to you.
176. 11:27If you ever get stuck determining which resizing property to use, stop and think about the
177. 11:31functionality of the component you're trying to make, and the context in which it will
178. 11:35be used.
179. 11:36If you enjoy this tutorial series on Auto Layout, be sure to subscribe to our channel
180. 11:41to be notified of the next video.
181. 11:42Thanks for watching!