Figma for Beginners: Complete Free Guide

Figma is the industry standard for UI/UX design. And it's free to learn! Here's your complete guide.

Why Figma?

• Free: Personal use is completely free
• Browser-based: No downloads needed
• Collaborative: Multiple people can work together
• Industry standard: Used by Google, Microsoft, etc.

Getting Started

Create Account

1. Go to figma.com
2. Sign up with email
3. Verify email
4. Start designing!

Interface Overview

• Left panel: Layers and assets
• Center: Canvas
• Right panel: Properties
• Top: Tools

Essential Tools

Selection Tools

• Move (V): Select and move objects
• Scale (K): Resize proportionally

Shape Tools

• Rectangle (R)
• Ellipse (O)
• Line (L)
• Polygon

Drawing Tools

• Pen (P): Custom shapes
• Pencil: Freehand

Text Tool (T)

• Click to add text
• Drag for text area

Frame Tool (F)

• Create containers
• Design for different screens

Week 1: Basics

Day 1-2: Interface

• Navigate canvas (scroll, zoom)
• Create shapes
• Move and resize
• Use layers panel

Day 3-4: Colors and Styles

• Fill and stroke
• Gradients
• Color picker
• Saved styles

Day 5-7: Text and Layers

• Typography basics
• Text properties
• Layer hierarchy
• Grouping

Week 2: Intermediate

Components

• Create reusable elements
• Variants for states
• Component properties
• Nested components

Auto Layout

• Dynamic layouts
• Padding and spacing
• Resizable components
• Forms and buttons

Constraints

• Responsive design
• Fixed vs. scaling
• Center constraints

Week 3: UI Design

Design Systems

• Color tokens
• Typography scale
• Spacing system
• Icon library

Common UI Elements

• Buttons
• Input fields
• Cards
• Navigation bars

Mobile Design

• iOS guidelines
• Android guidelines
• Touch targets
• Safe areas

Week 4: Prototyping

Connections

• Link frames
• Add interactions
• Click triggers
• Hover states

Transitions

• Dissolve
• Slide
• Smart animate
• Custom easing

Testing

• Share prototypes
• Gather feedback
• Iterate

Practice Projects

Project 1: App Onboarding

Design 3 onboarding screens for a fictional app.

Project 2: Dashboard

Create a simple analytics dashboard.

Project 3: E-commerce Product Page

Design a product detail page.

Project 4: Social Media App

Design 5 screens of a social app.

Free Resources

Templates

• Figma Community templates
• UI kits
• Design systems

Learning

• Figma YouTube channel
• Figma Crash Course (free)
• Design systems documentation

Plugins

• Unsplash (free images)
• Iconify (icons)
• Content Reel (dummy data)

Portfolio Projects

Build these for your portfolio:

1. Complete mobile app (8-10 screens)
2. Website landing page
3. Design system
4. Interactive prototype

From Learning to Earning

1. Complete practice projects
2. Build portfolio on Behance
3. Join design communities
4. Start with small projects
5. Increase complexity and rates

Get UI/UX Projects

Join OnlineSideHustle.in for design opportunities!