This story will cover how you can use Figma to design “resizable cards” by using the “Auto-Layout” feature.
Before I start, I must say this article would be useful for designers who read my previous articles or it can be a challenge for designers who think they know too much about Figma!
Since I prefer to re-create the components that we see them every day, I will use “Samsung One” user interface as a reference and recreate 3 cards of Bixby Home. If you work for Samsung or you work on Samsung products and read my article, please give me a free Galaxy S20 Ultra 😂😂😂
In this article, we will review how to use the “Constraints” panel and also the “Auto-Layout” feature. You can download the file!
1- Easy One: Events Card
Since I don’t want to make you disappointed, let’s analyze the event Card:
It has two different sections: the Left side (which reminds the time: 20 mins) and the right side (Which gives you information about the task: Upcoming event, the event name and its location).
- For the left group, the space from the left side of the card is always fixed. Also, this group is in the middle of the card.
- For the Right group, the space from the left side of the card is always fixed. Also, this group is in the middle of the card.
So to make it resizable, we must select the right options from the “Constraints” menu for each group:
So, when we resize them, you will see their behaviour:
Now, let’s use the “Auto-layout” feature to make the card grow when you change the texts.
1- We need to convert each group into an “Auto layout” enabled component (Just right-click on the element and choose “add auto layout”).
2- For the left group, use these properties when you enable the “Auto-layout” feature:
3- For the right group, use these properties when you enable the “Auto-layout” feature:
4- Since we expect Figma changes the height of this card automatically when we use a longer text, we need to select these groups and enable the “Auto layout” feature for it (You will see that Figma creates a group and put these groups into that, we called it “Child”).
5- Finally, we must convert this card into an “Auto-layout” enabled component. So, I select the parent frame (We call it “Parent”) which contains the “Child” group and enable the “Auto layout” feature for it.
In summary, we did these:
1- Create a group for the right elements / Create a group for the left elements → Convert them into “Auto-layout” enabled groups
2- Create a group for both cards and put these groups into that (We called it “Child”) → Enable “Auto-layout” feature for it
3- Merge the shape and “Child” group by selecting them together and enable the “Auto-layout” feature for them → You will see Figma will remove the “Blue” shape and create a new frame which we call it “Parent”.
So, let’s try if it works or not:
2- Not difficult One: Samsung Health
This card is harder to re-create if I want to be honest with you because it contains more elements compared to the previous card.
If you read my previous article, you know about the hidden rows that I already explained about them. This card has 5 rows! Let’s count if you have any doubts:
To make the card resizable, you must set the right properties from the Constraints panel:
1- Top Bar (First group): It consists of three elements → Logo / Today’s Activity / Icon
Logo: → Horizontally: Left / Vertically: Top
Today’s Activity: → Horizontally: Left / Vertically: Top
Icon: Horizontally: Right / Vertically: Top
Also, the Topbar (first group): Horizontally: Mixed (Every element of this group has its own unique position) / Vertically: Top
2- Tab Bar (Second group): It consists of two elements → Steps / Exercise
Steps: → Horizontally: Left / Vertically: Top
Exercise: → Horizontally: Left / Vertically: Top
Also, the Tab bar (Second group): Horizontally: Left / Vertically: Top
3- Steps Counter (Third group): It consists of two elements → 6000 / 10000
6000: → Horizontally: Left / Vertically: Top
10,000: → Horizontally: Left / Vertically: Top
Also, the Steps Counter (Third group): Horizontally: Left / Vertically: Top
4- Fourth group: It consists of two elements → Distance / Calorie
Distance: → Horizontally: Left / Vertically: Top
Calorie: → Horizontally: Left / Vertically: Top
Also, the Fourth group: Horizontally: Left / Vertically: Top
5- Fifth group: It consists of one element
Horizontally: Right / Vertically: Bottom
Now, let’s see how it looks when we resize it:
- If you want to make the second, third and fourth groups centre aligned and keep their position fixed when you resize the card vertically, you must put these groups into a group (Create a group!) and use these properties for it:
Horizontally: Left / Vertically: Centre
If you want to make the card flexible, follow these steps:
1- Make the parent group auto-enabled based on your “Grid-system” or use these properties:
2- The fourth group is the only group you can change the information. For example, add another line below this information: 57.4 KM, 648 Kcal. Let’s add another line below this line: Unavailable, Unavailable.
Before that, we must convert this group into an “Auto-enabled” frame:
Now, check this “.gif”:
3- Also, enable the “Auto-layout” feature for the button:
Now, let’s check it again:
3- Hard One: Foursquare
This one looks harder than the previous ones, but actually it’s easier than the previous ones! Wow! What a paradox!
This card consists of two cards (The top one which consists of an image, the top bar and the information and the bottom one which shows two restaurants and a button!). For this one, I will ignore the Constraints panel and I just focus on the “Auto-layout” feature.
So, we will create each card separately and then put them together (The space between them must be 0).
For the First Card:
1- We have two rows: The title bar and the information → The information consists of three groups (The name of the restaurant which can be a simple layer, The type of the restaurant and its rating which must be an “Auto-layout” enabled frame and finally we have the address line which can be a simple layer).
For the second card:
1- We have three rows: Two rows for restaurants and their information and the third row would be allocated to the button.
For the restaurant's name row, I will explain how you can create them using the “Auto-layout” feature but for the button, we will use what we created before for the second card (Samsung Health).
Restaurant row (The first and second rows!) structure:
1- It consists of two rows (Image / Info + Separator Line). The first row consists of two rows: Image and Info. According to what I said now, I think re-creating this group would be easy:
Now, select the top section and bottom section of the Foursquare card and create a new “Auto-layout” frame based on them. The Space between these two sections must be 0!
Let’s put these cards (The easiest one — Not easy one and the hardest one) together and see how they look:
Next week, when I publish my new article, we will learn how we can use Figma to re-create new micro-interactions using Figma and Principle! Don’t miss that article!
Now, you’re here, please read my previous articles: