Responsive Design for Mobile-First Layouts

1. The Principles of a Responsive Structure

Before we start resizing frames, it's important to understand why some designs are easier to make responsive than others. A well-structured file is predictable and efficient to adapt. The work you've already done—organizing your page into logical sections and using Auto Layout—is the key.

Let's review the core principles that make a Figma design truly responsive, which will be invaluable when you hand off designs or import them into tools like Framer.

As the article highlights, a design with responsive "DNA" has huge benefits. Since you've already built your page using separate sections for the Hero, Features, and Social Proof, and you've used Auto Layout extensively, you're already on the right track. This systematic approach isn't just a preference; it's a professional best practice that directly translates to how websites are built with code (e.g., HTML sections and CSS Flexbox/Grid).

2. Adapting Your Design Across Breakpoints

Now for the practical part. We'll create two new versions of your landing page—one for tablet and one for mobile—by adjusting the layout at specific breakpoints. A breakpoint is simply a screen width at which the design's layout changes to better suit the available space.

Common breakpoints are:

• Desktop: 1200px or 1440px+
• Tablet: ~768px - 1199px
• Mobile: ~320px - 480px

We'll use a straightforward, hands-on method to adapt your design.

Activity: Adapt Your Landing Page (~30 minutes)

Open your Figma file containing the desktop landing page you completed in the last lesson. We'll apply the techniques from the video to your design.

Part A: The Tablet Layout (~768px)

1. Duplicate Your Frame: Select your 1440px desktop frame and duplicate it (Cmd/Ctrl + D). Rename the new frame to "Tablet".
2. Set the Breakpoint Width: Change the width of the "Tablet" frame to 768px.
3. Adjust the Navigation:
   • On your Tablet frame, hide the text-based navigation links.
   • Find a "hamburger" menu icon using a plugin like Iconify and place it on the right side of your header. Ensure it's vertically aligned with your logo.
   • Adjust the constraints on your logo to Left and Top and the hamburger icon to Right and Top.
4. Reflow Your Sections:
   • Go through your sections (Hero, Social Proof, Features) one by one. Because you used Auto Layout and Fill container properties, much of the content should have already adapted reasonably well.
   • If you have multi-column layouts (like a 3-card feature section), they will likely look cramped. Select the Auto Layout frame containing the columns and change its direction from Horizontal (→) to Vertical (↓). Adjust the spacing as needed. You may also want to center the items.
   • For elements arranged side-by-side, consider stacking them vertically to give them more room to breathe.

Part B: The Mobile Layout (~390px)

1. Duplicate Again: Now, duplicate your "Tablet" frame. Rename the new copy to "Mobile".
2. Set the Breakpoint Width: Change the width of the "Mobile" frame to 390px.
3. Optimize for a Small Screen:
   • The navigation should already have the hamburger icon, which works perfectly for mobile.
   • Reduce the horizontal padding/margins within your sections to maximize content space (e.g., from 80px on desktop to 24px or 16px on mobile).
   • Check your font sizes. While they might scale down, ensure your body text is still easily readable. You may need to slightly increase the size of headlines or body copy relative to the smaller screen.
   • Ensure your buttons are large enough to be easily tapped. A minimum height of around 44px is a good rule of thumb for touch targets.
   • For layouts with cards, they should now be stacked vertically. Ensure the images and text within them are set to Fill container so they use the full width of the card.

An Advanced Technique: Auto Layout Wrap

For future projects, you can make your card layouts even more dynamic using Auto Layout's Wrap property. Instead of manually changing the direction from horizontal to vertical, Wrap does it automatically when the container runs out of horizontal space. This is a very powerful, rule-based approach that you might find interesting.

3. Preparing for Framer

You've now created a design that is visually ready for any device. The final step in this lesson is to ensure your Figma file is technically ready for a smooth import into Framer. A well-organized file is the key to a fast-loading, performant website.

Take a moment to review your Figma file. Are your layers named logically? Is everything that should be a component (like buttons and cards) a component? Tidying this up now will make the next phase much more efficient.

Conclusion

Excellent work! You have successfully adapted your desktop design to create a fully responsive landing page that looks great on tablet and mobile screens. This is a crucial skill for any digital creator, ensuring your work is accessible and effective for the widest possible audience.

Key Takeaways:

• Responsive design is not an afterthought; it's a core requirement for modern websites.
• Breakpoints (e.g., 1440px, 768px, 390px) are the points at which a layout restructures to fit different screen sizes.
• The primary techniques for responsive adaptation in Figma are changing an Auto Layout's direction (horizontal to vertical), adjusting padding and margins, and ensuring child elements use Fill container.
• A clean, well-structured Figma file with logical layer names and components is essential for a smooth transition to development tools like Framer.

Preview of the Next Lesson:
Our design work in Figma is now complete. We have a beautiful, systematic, and responsive landing page ready to be brought to life. In the next lesson, we will begin Module 5: Launching Your Website with Framer. You will learn how to import your Figma design into Framer and map your design elements to Framer's page structure, taking the first step in turning your static design into a live, interactive website.