Hello! Welcome to your next lesson in graphic design.
In our last session, we focused on using whitespace to create clean, readable, and well-structured layouts. You learned that the space around elements is just as important as the elements themselves. Today, we'll build directly on that by learning how to make our layouts flexible and adaptable.
This lesson addresses a fundamental skill for any working graphic designer: adapting a single design concept to different aspect ratios. You'll often create a design for one format, like a website banner, and then be asked to re-create it for an Instagram post (square) and an Instagram Story (portrait). Doing this manually is slow and inefficient. By the end of this lesson, you will know how to use Figma's powerful responsive tools to adapt your designs quickly and professionally.
1. From Fixed to Flexible: The Core Challenge
By default, when you create a design in Figma, it's static. If you create a design in a desktop-sized frame and then resize that frame to a mobile dimension, the content inside doesn't automatically adjust. It either gets cut off or looks awkward.
To solve this, Figma provides two essential tools that allow you to build intelligence into your designs:
- Constraints: Simple rules that define how an object should behave when its parent frame is resized.
- Auto Layout: A powerful system that lets you create frames that automatically grow, shrink, and reflow their content.
Let's explore each one.
2. Tool #1: Constraints
Think of constraints as simple tethers. You can "pin" an object to a specific side or corner of its parent frame. When the frame is resized, the object maintains its position relative to that pin.
The main options for constraints are:
- Horizontal: Left, Right, Center, Left & Right (Scale)
- Vertical: Top, Bottom, Center, Top & Bottom (Scale)
This is best understood with an example. Let's watch how a designer uses constraints to make a navigation bar responsive.
Make Your Web Design Responsive in 10 Minutes | Figma Tutorial
In this clip from the 'Make Your Web Design Responsive' tutorial by DesignWithArash, you'll see how to apply basic constraints to different elements in a header.
Watch from 00:38 to 01:57. Notice how: The logo is constrained to the Top and Left. The menu items are constrained to the Center and Top. The buttons are constrained to the Top and Right.
As you can see, constraints are perfect for simple relationships, like keeping a logo in the top-left corner or a button in the top-right.
3. Tool #2: Auto Layout & Resizing
While constraints are great for simple pinning, Auto Layout is what you'll use for more complex components like cards, lists, and entire page sections. Auto Layout builds upon the principles of spacing and proximity we covered in the last lesson, allowing you to create components that automatically adjust to their content.
The true power of Auto Layout for adapting designs comes from its resizing properties. These settings determine how an object behaves inside an Auto Layout frame. To understand this critical concept, let's turn to Figma's official guide.
This section from Figma's official 'Guide to auto layout' clearly explains the three most important resizing properties. Understanding these is the key to creating flexible designs.
Please read the section titled 'Resizing' which starts with 'One of the most powerful functions of auto layout...'. Focus on the table and the descriptions for 'Hug contents', 'Fill container', and 'Fixed width / height'.
To summarize the key ideas from that reading:
| Resizing Property | What It Does | Common Use Case |
|---|---|---|
| Fixed | The object's size remains constant, regardless of content or parent frame. | An icon or logo that should never change size. |
| Hug contents | The frame shrinks or grows to fit the content inside it. | A button that needs to get wider as you type more text. |
| Fill container | The object stretches to fill all available space within its parent Auto Layout frame. | A text block that should take up the full width of a card. |
To see these properties in action, let's watch a video explanation.
Figma Tutorial: Master Auto Layout in 30 Minutes | Auto Layout (+ Practice File)
This segment from 'Figma Tutorial: Master Auto Layout in 30 Minutes' demonstrates how 'Fixed', 'Hug', and 'Fill' work in practice. Seeing it visually will help solidify the concept.
Watch from 16:29 to 21:05. Pay close attention to the difference between a child element set to 'Fixed' versus one set to 'Fill container' when the parent frame is resized.
Test your understanding!
You have a card component with a title and a paragraph of text, both inside a vertical Auto Layout frame. You want the card to be responsive, so when you make the parent card frame wider, the text paragraph should also get wider to fill the new space.
Which resizing property should you apply to the paragraph text layer?
Show answer
You should set the paragraph's horizontal resizing property to "Fill container". This tells the paragraph to stretch and take up all the available horizontal space its parent (the card) provides.
4. Practical Application: Adapting a Web Design
Now let's put it all together. We will watch a complete workflow of a designer taking a static desktop design and making it fully responsive for tablet and mobile devices using a combination of Constraints and Auto Layout.
This is a very practical and common task for a graphic designer. Try to follow the designer's thought process. When do they use a simple constraint, and when do they opt for the more powerful Auto Layout?
Make Your Web Design Responsive in 10 Minutes | Figma Tutorial
We'll return to the 'Make Your Web Design Responsive' video. This time, we'll watch the full process of adapting a complex layout.
Watch from 01:57 to 11:05. This covers the entire adaptation process: Making the Hero Section Responsive (01:57 - 04:42): Notice the use of Auto Layout for the text and 'Fill Container' for the title. Adapting for Tablet (07:16 - 09:31): See how the designer duplicates the frame, changes its width, and then replaces navigation items with a hamburger menu. Adapting for Mobile (09:31 - 11:05): Observe the final adjustments for the smallest screen, like changing element positions and resizing text to fit the narrow layout.
This process of duplicating a frame, resizing it to the new aspect ratio, and then adjusting the content inside is the standard workflow you will use. The magic of Auto Layout and Constraints is that they do most of the heavy lifting for you, leaving you to make only minor adjustments.
Conclusion
Fantastic work today! You've learned one of the most valuable and time-saving skills in modern digital design. By mastering responsive techniques, you can ensure your work looks professional on any platform, which is exactly what clients and employers are looking for.
Here are your key takeaways:
- Adaptability is Key: Static designs are a thing of the past. Professional designers build flexible layouts that can be adapted to various aspect ratios.
- Use the Right Tool:
- Constraints are for simple pinning of elements to the sides or center of a frame.
- Auto Layout is for creating complex, content-aware components that reflow and resize intelligently.
- Master the Resizing Trio: The resizing properties—Fixed, Hug Contents, and Fill Container—are the heart of responsive design in Figma. Understanding when to use each is crucial.
- The Workflow: The process is typically to perfect a design in one size, then duplicate the frame, change its dimensions, and adjust the layout using your responsive settings.
In our next lesson, you'll get to apply everything you've learned. We will design a digital poster combining images and text in a cohesive layout. As you build it, you can already start thinking about how you would use Auto Layout and Constraints to make it adaptable for a social media post or a story. See you then