Back to UI/UX Design

Module 2: Figma Mastery

Master Figma, the industry-standard design tool used by top companies worldwide.

What is Figma?

Figma is a cloud-based design tool that lets you create interfaces, prototypes, and design systems. Think of it as Photoshop meets Google Docs - powerful design capabilities with real-time collaboration. It runs in your browser, so no installation needed!

🎨 Why Figma?

  • Free to start: Generous free tier for individuals
  • Browser-based: Works on Mac, Windows, Linux
  • Real-time collaboration: Multiple designers work together like Google Docs
  • Industry standard: Used by Google, Microsoft, Airbnb, Uber
  • All-in-one: Design, prototype, handoff in one tool

Figma Interface & Tools

Essential Tools

Frame Tool (F)

Creates containers for your designs. Like artboards in other tools. Use for screens, components.

Rectangle (R)

Draw rectangles and squares. Foundation for buttons, cards, containers.

Text (T)

Add text layers. Click to add, drag to create text box with fixed width.

Pen Tool (P)

Create custom shapes and icons. Click for straight lines, drag for curves.

⌨️ Essential Keyboard Shortcuts:

V - Move tool
F - Frame tool
R - Rectangle
T - Text
Cmd/Ctrl + D - Duplicate
Cmd/Ctrl + G - Group
Cmd/Ctrl + / - Search
Space + Drag - Pan canvas

Components & Variants

Components are reusable design elements - like LEGO blocks. Create once, use everywhere. When you update the main component, all instances update automatically. This is the secret to efficient design!

Creating Components

Step 1: Design Your Element

Create a button, card, or any UI element you'll reuse.

Step 2: Create Component

Select element, press Cmd/Ctrl + Alt + K or click Create Component.

Step 3: Use Instances

Drag from Assets panel or copy-paste. Each copy is an "instance" linked to the main component.

Component Variants

Variants let you create different states of the same component (like button states: default, hover, disabled).

Example: Button Component with Variants

Default
Hover
Disabled

One component, three variants. Switch between them in the properties panel.

Auto Layout & Constraints

Auto Layout makes your designs responsive and flexible - like CSS Flexbox. Elements automatically adjust when content changes. This is crucial for real-world designs that need to adapt.

What is Auto Layout?

Imagine a button that automatically grows when text gets longer, or a list that adds spacing between items automatically. That's Auto Layout!

❌ Without Auto Layout

Add new item? Manually adjust spacing. Change text? Manually resize button.

Item 1
Item 2

✅ With Auto Layout

Add item? Spacing automatic. Change text? Button resizes automatically.

Item 1
Item 2
Item 3

💡 Auto Layout Pro Tips:

  • • Use for buttons, cards, lists, navigation bars
  • • Set padding (space inside) and gap (space between items)
  • • Choose direction: horizontal or vertical
  • • Set "Hug contents" to fit content, "Fill container" to stretch

Prototyping & Interactions

Prototypes bring your designs to life. Add clickable interactions to show how your app flows from screen to screen - perfect for user testing and stakeholder presentations.

Creating Interactions

1. Switch to Prototype Tab

Click "Prototype" in the right sidebar (next to Design tab).

2. Create Connection

Click element (like a button), drag the blue circle to destination screen.

3. Choose Interaction

Select trigger (On Click, On Hover) and animation (Instant, Dissolve, Slide).

4. Preview

Click play button (top right) to test your prototype.

🎬 Common Animations:

  • • Instant: No animation, immediate change
  • • Dissolve: Fade in/out (good for modals)
  • • Smart Animate: Smooth transitions between similar elements
  • • Move In/Out: Slide from direction (good for mobile screens)

Design Systems in Figma

Design systems are collections of reusable components, styles, and guidelines. They ensure consistency across your product and speed up design work dramatically.

Building Blocks

Color Styles

Save brand colors as styles. Update once, changes everywhere.

Text Styles

Save typography settings (font, size, weight, line height).

Heading 1

Body Text

Caption

Collaboration & Handoff

Figma's superpower is real-time collaboration. Multiple designers can work simultaneously, and developers can inspect designs for implementation.

👥 Multiplayer Editing

See teammates' cursors in real-time. Leave comments by pressing C. Tag people with @mentions.

💬 Comments & Feedback

Stakeholders can leave feedback directly on designs. Resolve comments when addressed.

👨‍💻 Developer Handoff

Developers can inspect designs, copy CSS, download assets. Click "Inspect" tab to see code.

🎨 Hands-On Project: Mobile App Design

Design a 3-screen mobile app flow with components and prototyping.

Project: Todo App

Create these screens:

  • ✓ Screen 1: Task list with header and add button
  • ✓ Screen 2: Add new task form
  • ✓ Screen 3: Task detail view

Requirements:

  • • Use iPhone frame (375x812)
  • • Create button component with variants
  • • Apply Auto Layout to lists
  • • Add prototype interactions between screens
  • • Use consistent colors and typography

📚 Module Summary

You've mastered Figma fundamentals:

  • ✓ Figma interface and essential tools
  • ✓ Components and variants for reusable design
  • ✓ Auto Layout for responsive designs
  • ✓ Prototyping and interactions
  • ✓ Design systems and style management
  • ✓ Collaboration and developer handoff

Next: Learn user research to understand who you're designing for!