Figma

Module 1: Introduction to Figma

Getting Started

• What is Figma? (Cloud-based UI/UX design tool)

• Figma vs Sketch vs Adobe XD

• Creating a Figma account (Free vs Professional plans)

• Figma interface overview (Toolbar, Layers, Properties)

• Setting up your first project

Core Concepts

• Frames vs Groups

• Vector networks (Pen tool basics)

• Understanding constraints and auto-layout

• Introduction to components and styles

Module 2: Design Fundamentals

Working with Shapes

• Rectangle, ellipse, line, polygon tools

• Boolean operations (Union, subtract, intersect)

• Corner radius customization

• Advanced vector editing

Typography & Text

• Text tool fundamentals

• Font pairing strategies

• Text properties (Line height, letter spacing)

• Text styles creation and management

Module 3: Color & Effects

Color Systems

• Color models (RGB, HEX, HSL)

• Creating and managing color styles

• Gradient creation and editing

• Image fills and blending modes

Visual Effects

• Drop shadows and inner shadows

• Layer blurs and background blurs

• Advanced blending modes

• Creating depth with effects

Module 4: Components & Design Systems

Components Basics

• Creating master components

• Component instances and overrides

• Nested components

• Component properties (2022 update)

Advanced Design Systems

• Building a scalable design system

• Variants and interactive components

• Auto-layout for responsive components

• Documentation within Figma

Module 5: Prototyping & Interactions

Basic Prototyping

• Creating connections between frames

• Transition types and animations

• Smart animate principles

• Scroll-based interactions

Advanced Interactions

• Micro-interactions

• Conditional logic prototyping

• Drag interactions

• Voice and keyboard triggers

Module 6: Collaboration Features

Team Workflows

• Real-time collaboration

• Comments and feedback

• Version history and restoration

• Branching and merging (Organization plan)

Handoff to Development

• Inspect panel usage

• Export assets and specifications

• CSS, iOS, Android code generation

• Using Figma for developer handoff

Module 7: Plugins & Automation

Essential Plugins

• Content reel for dummy data

• Icon and illustration plugins

• Color accessibility checkers

• Auto-layout helpers

Automation

• Creating design tokens

• Batch processing with plugins

• Connecting to other tools (Zeroheight, Storybook)

• Custom plugin development basics

Module 8: Advanced Techniques

Responsive Design

• Constraints and auto-layout

• Adaptive components

• Breakpoint systems

• Mobile-first vs desktop-first approaches

Design Ops

• File organization strategies

• Team library management

• Design process documentation

• Design system governance

Module 9: Real-World Projects

Practical Exercises

1. Mobile App Design (Complete flow)

2. Website Redesign (Desktop and mobile)

3. Design System Creation (From scratch)

4. Interactive Prototype (With complex animations)

Final Project

• Portfolio Case Study (End-to-end design process)

• Includes research, wireframes, high-fidelity design, and prototype