Member-only story

Design Flexible Cards with Figma

Em Design
8 min readMar 23, 2020

--

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

--

--

Em Design
Em Design

Written by Em Design

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — www.wearemoonlight.com

No responses yet