Part 2: The Designer's Touch - Refining Auto Layout and Responsiveness (No-Code Guide)

Part 2: The Designer's Touch - Refining Auto Layout and Responsiveness

In Part 1, we used Figma AI to generate a professional layout from a text prompt. While the AI is great at creating a "first draft," it often misses the nuances of a truly premium website.

To take your site from "good" to "extraordinary" without spending a cent, you need to master Auto Layout. This is the secret sauce that makes your website responsive—meaning it looks perfect on a desktop, a tablet, and a mobile phone.

Step 1: Cleaning Up the AI's Layers

AI-generated designs can sometimes have messy layer naming or hidden elements.

Select your main frame.
Press Ctrl + R (Windows) or Cmd + R (Mac) to use the Rename Layers tool. Give everything logical names like "Section_Hero," "Button_Primary," etc.
Delete any overlapping layers that don't serve a purpose.

Step 2: Mastering Auto Layout (Shift + A)

Auto Layout is what tells Figma how elements should behave when the screen size changes.

Select a group of elements (e.g., your Navigation links).
Press Shift + A. You’ll see a new "Auto Layout" panel on the right.
Set Spacing: Adjust the gap between your links (e.g., 24px).
Alignment: Set them to "Center" or "Space Between."

Step 3: Making it Responsive (Constraints)

For your website to be "Professional," it must scale.

Select a section (like the Hero section).
In the Auto Layout panel, change the Horizontal Resizing from "Fixed" to "Fill Container."
Now, when you drag the edges of your main website frame, the elements inside will automatically stretch or shrink to fit.

Step 4: Adding "Human" Aesthetics

AI often chooses colors or fonts that are a bit too safe.

Typography: Change your headings to a bold sans-serif like Outfit or Plus Jakarta Sans for a more premium look.
Color Palette: Use a tool like Coolors.co to find a warm, modern palette. Apply a subtle gradient to your Hero background or Call-to-Action buttons.
Micro-animations: Use Figma's "Prototype" tab to add simple hover effects. Select a button, create a "While Hovering" interaction, and set it to change color slightly.

Step 5: The Mobile Check

Duplicate your Desktop frame.
Rename it to "Mobile."
Reduce its width to 390px.
Switch your Auto Layout direction from Horizontal (Side-by-side) to Vertical (Stacked).
Voila! Your services section is now a mobile-friendly list instead of a wide grid.

What’s Next?

Your website is now beautiful, organized, and responsive. In Part 3, we will tackle the final challenge: How to push this design to a live URL for free. We will explore "Figma Sites" and external no-code deployment tools that require zero coding knowledge.

Part 2: The Designer's Touch - Refining Auto Layout and Responsiveness (No-Code Guide)