Bring together Shapes, Layers, Colors, Typography, and Grids in one hands-on Figma project.
Project Goal
Create a simple UI page (e.g., a landing page or card layout) that demonstrates:
- Organized Shapes & Layers
- Consistent Color & Styles
- Clear Typography hierarchy
- Balanced Layout Grids & Spacing
This exercise reinforces everything you’ve learned and prepares you for real-world Figma projects.
Step 1: Set Up the Frame & Layout Grid
- Press F to create a frame (desktop or mobile size).
- Add a Layout Grid (12-column for desktop, 4–6 columns for mobile).
- Adjust Gutters and Margins for spacing and alignment.
Tip: Keep grids visible while designing to snap elements precisely.
Step 2: Build the Base with Shapes & Layers
- Add rectangles cards section.
- Use circles or ellipses for icons or profile avatars.
- Rename layers logically (e.g.,
Card_BG, CTA_Button, Card_1).
- Group related layers (
Ctrl/Cmd + G) to maintain a clean layer hierarchy.
Proper layer organization now will save tons of time later.
Step 3: Apply Color & Styles
- Assign Color Styles to backgrounds, buttons, and text.
- Use brand colors for primary elements and neutral tones for secondary/background elements.
- Ensure consistent contrast for readability.
Tip: Update one color style and watch all related layers change fast consistency.
Step 4: Add Typography
- Use Text Tool (T) for headings, subheadings, body text, and buttons.
- Apply Text Styles you’ve previously created (H1, H2, Body, Caption).
- Maintain hierarchy: Heading > Subheading > Body > Caption.
Typography + color = readable, visually appealing content.
Step 5: Fine-Tune Spacing & Alignment
- Use Auto Layout for buttons, cards, or menus.
- Snap elements to your layout grid to maintain balance.
- Check padding, spacing between cards, and alignment for a polished design.
Tip: Small spacing inconsistencies break visual harmony grids + Auto Layout solve this.
Step 6: Review & Iterate
- Check layer names for clarity.
- Make sure Text Styles and Color Styles are applied consistently.
- Preview the design in Prototype mode to test flow.
- Adjust based on visual balance and hierarchy.