Before starting with this blog, check out UI Cards in Figma: Part 1 - Types and Component, where I discussed the different types of UI cards along with their components.

Making aesthetically pleasing and useful cards is an important task in the digital design field. Cards are essential for organizing and displaying content, whether you're working on a website, mobile app, or any other digital platform.

Auto Layout and Constraints are two popular ways of making cards in Figma. In this blog, we'll learn about Auto Layout cards in depth and make an Instagram look-alike card step-by-step.

Understanding Auto Layout

Figma's advanced Auto Layout feature allows you to build dynamic, adaptable designs that change according to the components they contain. This minimizes both energy and time by simplifying the process of updating items as content changes.

Let's begin by using Auto Layout to create a card. Figma's Auto Layout dynamic design function makes it easier to create flexible layouts. It allows designers to easily alter the size and organize items in response to content changes. You may design grids, lists, and cards that dynamically change in size and spacing in response to adding or removing information using Auto Layout.

Select the desired components, then click the Auto Layout option to activate it. Next, decide if the layout should be vertical or horizontal. You can adjust padding, alignment, and spacing for a professional style. These elements automatically adjust as you add or change information within them, maintaining the same spacing and alignment.

Auto Layout is extremely helpful for designing systems, components, and UI elements subject to numerous content modifications. Applying this method with manual modifications saves time and maintains a consistent appearance on all screen sizes. Designers may concentrate on creativity while generating designs that are not only aesthetically beautiful but also responsive and user-friendly by taking advantage of Figma's Auto Layout feature.

Making Cards using Auto Layout

Step 1: Setting the Stage

Launch Figma and start a brand-new project. Select a canvas size that meets the needs of your design, either for website view or mobile view. We'll use a movable canvas for this manual.

Step 2: Designing the Card

Start including important components to your card, including an image, title, description, and icons. The card will come to life, and the UI design will automatically look visually appealing because of these components.

Step 3: Harnessing the Power of Auto Layout

Choose every component you've added to your card. Find the Auto Layout button in the top toolbar, and click it. By this action, the selected pieces are contained within an Auto Layout frame, allowing for dynamic modifications. Elements like Avatar, Name, Description, Date, Image and Icons will be perfectly aligned, and we can choose the option to align vertically and horizontally.

Step 4: Adjusting Space and Style

You can change the distance between elements in the Auto Layout frame. To adjust spacing accurately, click and drag the handles between components. To get the right visual appeal, get creative with the element styling by changing the fonts and colours, adding padding and other visual elements.

Step 5: Grouping Elements and Auto Layout

Now, we group the elements to adjust the spacing so the other elements don’t mess up their spacing. If we adjust the spacing without grouping, the other elements will be affected, and the consistency of the UI design will be uneven. So when we apply grouping, the application thinks the two elements are one layer. After that, we add Auto Layout to adjust the layer horizontally.

Step 6: Fixing Alignments using Space Between

Within the Auto Layout frame, consider grouping certain elements together using the Hug and Fill container types.

  • The Hug container type ensures that the element occupies only the space required by its content, avoiding unnecessary gaps.
  • The Fill container type expands elements to fill available space, ensuring uniformity.

For more advanced control, utilize the Space Between alignment option. This option evenly distributes elements within the Auto Layout frame, ensuring a balanced and polished appearance.

Step 7: Adding the Image

Now, we'll be adding an image element within a card. It will be easily merged into the Auto Layout, maintaining the original structure of the layout. To view how the elements seamlessly incorporate the new addition, resize the Auto Layout frame or add a rectangle as a placeholder and replace it with an image later.

Step 8: Grouping Alignments for Spacing Adjustments

We can group elements and make them a single layer. We have created four groups and can adjust the spacing for the particular group.

To adjust their alignments collectively, you can group specific items within the Auto Layout frame. You may also change the space between grouped elements to preserve a unified design aesthetic.

Step 9: Displaying Advantages

After the card is completed using Auto Layout, the elements inside it are grouped together, maintaining their space, padding and alignments. So, if you add any other components to the card or remove anything inside, the card will maintain consistency. Adding text or attaching multiple images, every change will provide us with a visually appealing UI Design.

This is how we make a card by grouping elements, adding Auto Layout and maintaining their constraints from the Control Panel. Later in the next blog, we'll make a fully responsive card using the same elements.

Thanks for reading. Subscribe for more!