How Pros Use Auto Layout to Fix Messy Files (Step-by-Step)

How to Fix Messy Figma Files Using Auto Layout & AI Naming (Real-Time Challenge)

🔁 This is part of a full Figma series. Watch next → https://www.youtube.com/watch?v=QDgSGU3KbqY&list=PLRIQq9JiGoACtqh_y2qdfZPhBB-lK6lmc

In this real time challenge, I take a messy Figma file and rebuild it from scratch using Auto Layout.
You’ll see exactly how to structure components, fix spacing, and use Figma AI for clean, developer friendly naming conventions.

Perfect if you want to learn how professional designers turn chaos into scalable systems.

What you will learn:
🟠 How to approach messy Figma files like a pro
🟠 Setting up clean Auto Layout structures from scratch
🟠 Building reusable components (buttons, navbars, banners, footers)
🟠 Using Figma AI to generate meaningful layer names
🟠 Organizing components by hierarchy: atoms, molecules, organisms
🟠 Building both desktop and mobile versions efficiently
🟠 Tips for spacing, alignment, and constraints for responsive designs

Time frames:
00:00 — Intro: Class project overview with students
01:33 — Setting up a clean structure with Auto Layout
02:04 — Why Auto Layout is essential for scaling designs
02:30 — Creating button components and naming conventions
03:05 — Building and organising reusable properties
03:37 — Constructing a navigation container
04:09 — Aligning and structuring the navigation bar
05:21 — Categorising components: atoms, molecules, organisms
05:55 — Finalising and styling the navigation bar
06:12 — Creating the navigation component and adding constraints
07:05 — Building the banner section with Auto Layout
08:04 — Creating a CTA button and setting variant properties
09:03 — Reusing and replacing button instances efficiently
09:46 — Structuring the info section with reusable components
10:21 — Building the gallery section with scrollable content
11:03 — Handling overflow and scroll behaviour in Figma
12:05 — Creating new info cards with consistent spacing
13:04 — Using Figma AI for naming conventions
13:22 — Assembling cards and aligning within column grids
14:08 — Replacing images quickly with keyboard shortcuts
15:01 — Creating and aligning feature sections
16:10 — Building the about section with inverted colours
17:15 — Adjusting accessibility with overlays and blend modes
18:42 — Image editing tips: exposure, saturation, and colour balance
19:02 — Wrapping up the info and banner sections
20:20 — Creating the footer section with Auto Layout
21:42 — Adding rounded corners and gradients to the footer
23:35 — Cleaning up layers and preparing the main structure
24:22 — Building the master frame: header, body, and footer
26:13 — Aligning and constraining the main layout
27:21 — Creating the mobile version of the design
28:03 — Adjusting visibility for mobile navigation (menu icon)
28:44 — Setting up mobile grid and column guides
29:05 — Aligning and testing responsive layout behaviour
30:06 — Fixing parent–child Auto Layout relationships
30:31 — Fine-tuning banner spacing and mobile padding
30:57 — Wrapping up the build

Watch next
How to Make Responsive Design in Figma with Variables
https://youtu.be/dY6lEGSGCt0?si=wOcNuTxBIpraCqX1

How to Save Time in Figma - My 9 Go-To Shortcuts
https://youtu.be/-zMcbvTGDF0?si=bSuKdnOyh2d7sbB_

Drag and Drop Animation in Figma in 2 Minutes (2025)
https://youtu.be/2JQFIuSOpN4?si=fEdnvBg3XWPk5yq-

Need UI Inspiration? Here Are My 5 Favourite Websites
https://youtu.be/nKj1AtEgtU4?si=k9GU-HPLyrqkOFqM
Download the playground file

Figma Community: figma.com/@zerotoui

UI blog
https://02ui.com

Follow for more UI lessons

YouTube: @zerotoui
Instagram: @zerotoui

Видео How Pros Use Auto Layout to Fix Messy Files (Step-by-Step) канала 02ui - Idea to Product