Figma Practice Project: Apply Shapes, Color, Typography & Grids

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

1. Press F to create a frame (desktop or mobile size).
2. Add a Layout Grid (12-column for desktop, 4–6 columns for mobile).
3. 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

1. Add rectangles cards section.
2. Use circles or ellipses for icons or profile avatars.
3. Rename layers logically (e.g., Card_BG, CTA_Button, Card_1).
4. 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

1. Assign Color Styles to backgrounds, buttons, and text.
2. Use brand colors for primary elements and neutral tones for secondary/background elements.
3. Ensure consistent contrast for readability.

Tip: Update one color style and watch all related layers change fast consistency.

Step 4: Add Typography

1. Use Text Tool (T) for headings, subheadings, body text, and buttons.
2. Apply Text Styles you’ve previously created (H1, H2, Body, Caption).
3. Maintain hierarchy: Heading > Subheading > Body > Caption.

Typography + color = readable, visually appealing content.

Step 5: Fine-Tune Spacing & Alignment

1. Use Auto Layout for buttons, cards, or menus.
2. Snap elements to your layout grid to maintain balance.
3. 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.