Auto Layout in Figma is a powerful feature that enables designers to create flexible and scalable components by automatically adjusting the size and position of elements within a frame, ensuring consistency and responsiveness across different screen sizes. In this post, you will learn how to create a responsive auto-layout web card in Figma, using practical examples that take full advantage of min and max-width settings. Mastering these techniques will help you design cards that effortlessly adapt to different screen sizes, ensuring a seamless user experience across all devices. All of these principles can be replicated for other design components, too.

1. Design content for the card

Start by creating two mainframes that contain all the essential content, including an image and accompanying text, as well as action buttons for user interaction. To help you get started, you can follow this structure: one frame dedicated to showcasing the image and another frame focused on displaying the text elements, such as the title, description, and call-to-action buttons. This balanced layout will ensure that the web card is visually appealing and functional, with a clear hierarchy guiding the user's attention.

2. Marge Content

Select both frames you’ve just created, including the one with the image and the one with the text and buttons, then press “Shift + A” to add them to a new Auto Layout frame. This step is crucial for making your design responsive and adaptable to different screen sizes. When adjusting the padding, spacing, and other layout properties, be sure to stick to values that are multiples of 8 or 4. This approach will maintain a consistent and clean grid system, ensuring that the design elements are evenly spaced and aligned, contributing to a polished, professional look.

3. Wrap Features

A key step in making your web card fully responsive is utilizing the Wrap feature for the inner content. To do this, select the main card frame that contains both your image and text elements, then switch the layout settings to "Wrap." This feature allows the content to automatically flow into a new line when it reaches the frame’s width limits, ensuring that your design adapts smoothly as screen sizes change. By enabling Wrap, you ensure that no content overflows or gets cut off, resulting in a cleaner, more flexible design.

4. Min Value for Content

Next, select the two inner content frames—one containing the image and the other containing the text and buttons—and set a minimum width value for them. For this example, you can set the minimum width to 224 pixels. This ensures that even when the screen size shrinks, the content will never collapse below this width, maintaining the structure and readability of your web card. By defining a minimum value, you guarantee that your design remains functional and aesthetically pleasing, even on smaller devices.

5. Min/Max Card

For the final step, set maximum and minimum widths for the main card frame to ensure the layout stays clear and consistent. This helps control how the card adapts to various screen sizes, preventing it from becoming too wide or too narrow. Defining these constraints ensures your design remains stable and easy for developers to implement responsively.

Here are the final results! With these settings, you can achieve proper handoff and effectiveness in prototyping in Figma!

Spacing Measures

In the following images, you'll find a detailed explanation of the spacing and font styles used in this layout. These specifications ensure that every element aligns perfectly within the design grid, contributing to a balanced and professional look. Understanding how to use spacing effectively, such as maintaining a consistent 8pt or 4pt grid, is crucial for achieving a clean, structured design. Additionally, font styles—such as weight, size, and spacing—help establish a clear hierarchy, guiding the user’s focus through the card and improving readability. These principles will ensure your web card adapts smoothly to various screen sizes while maintaining a cohesive and polished aesthetic.

You can achieve these measures by using Figma plugins like Redlines or Measure with additional manual edits!

Get the Figma file of the final card here! 💜

Summary

In summary, mastering Auto Layout in Figma is essential for creating responsive components that adapt seamlessly to different screen sizes and layouts. By leveraging features like wrapping content, setting minimum and maximum widths, and maintaining consistent spacing, you can ensure that your designs are visually appealing and highly functional. Creating flexible and responsive components enhances usability and provides developers with clear, well-structured assets for smooth implementation, making the entire design-to-development process more efficient and scalable.