Design Flexible Cards with Figma

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!

Everything about resizable components

Figma: Learn Auto-Layout

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 😂😂😂

I will create the Samsung Health, Foursquare and Event cards from this image.

In this article, we will review how to use the “Constraints” panel and also the “Auto-Layout” feature. You can download the file!

Download the Figma 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:

Left and Right Groups

So, when we resize them, you will see their behaviour:

Remember: Each group contains two or three different elements and you must consider their position too. Left Group: Elements are centre aligned (Vertically and Horizontally) and Right group: Elements are left-aligned (Horizontally) and top/bottom-aligned (Vertically).

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:

The space between the time and “minutes” text box is 0 px.

3- For the right group, use these properties when you enable the “Auto-layout” feature:

The space between each textbox is 8 px.

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”).

The space between the left and right groups is 48 px.

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.

Finally, we made 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:

As you see, it can resize itself :)

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:

There are 5 rows: 1-Top 2-Tabs 3-Step counter 4-Distance (Calorie) 5- Button

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

First group

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

Second group

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

Third group

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

Fourth group

5- Fifth group: It consists of one element
Horizontally: Right / Vertically: Bottom

Fifth Group

Now, let’s see how it looks when we resize it:

When you resize the card, the space between the second to fourth groups to the top side of this card won’t be changed. However, the space between these groups to the bottom side of this card will be changed.
  • 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:

We enabled the “Auto-layout” feature for the fourth group.

Now, check this “.gif”:

3- Also, enable the “Auto-layout” feature for the button:

Use these properties: It must be right-aligned. So, when you change the text, it won’t ignore the space between this button to the right side of this card.

Now, let’s check it again:

It works :)

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

The structure of the top section

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:

Do you see? It’s super 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!

Nice job!

Let’s put these cards (The easiest one — Not easy one and the hardest one) together and see how they look:

Do you see? You did a great job! Well done :)

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:

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — — PORTFOLIO: emportfolio.webflow.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store