Here’s a comprehensive Figma course using free, high-quality YouTube tutorials, structured for beginners to advanced designers. Each section includes video links, key topics, and instructor credits .
1. Introduction to Figma
Video Tutorial: Figma Tutorial for Beginners by Flux Academy (45 mins)
Topics:
- What is Figma? Overview of the interface (frames, layers, tools).
- Differences between UI, UX, and prototyping.
- Setting up your first project.
Why This Video: Flux Academy breaks down Figma’s core features with clean visuals and practical examples.
2. Mastering the Basics
Video Tutorial: Figma Basics in 15 Minutes by Mizko (15 mins)
Topics:
- Shapes, text, and color tools.
- Using grids and constraints for responsive design.
- Keyboard shortcuts for efficiency.
Why This Video: Mizko’s fast-paced guide is perfect for quick learners.
3. Components & Design Systems
Video Tutorial: Figma Components Tutorial by Jesse Showalter (25 mins)
Topics:
- Creating reusable components (buttons, icons).
- Building a design system with variants.
- Auto-layout for dynamic elements.
Why This Video: Jesse’s focus on scalability helps designers work like pros.
4. Prototyping & Interactions
Video Tutorial: Figma Prototyping Masterclass by Maddy Beard (30 mins)
Topics:
- Linking frames with smart transitions.
- Micro-interactions (hover, click, scroll).
- Previewing and sharing prototypes.
Why This Video: Maddy simplifies complex interactions for real-world apps.
5. UI/UX Design Fundamentals
Video Tutorial: UI Design Tutorial by AJ&Smart (1 hour)
Topics:
- Designing user flows and wireframes.
- Best practices for typography and spacing.
- Accessibility tips (color contrast, alt text).
Why This Video: AJ&Smart’s workshop-style tutorial emphasizes user-centric design.
6. Advanced Figma: Auto-Layout & Plugins
Video Tutorial: Figma Auto-Layout Deep Dive by Figma (Official Channel) (20 mins)
Topics:
- Nesting auto-layouts for complex designs.
- Using plugins like Content Reel and Iconify.
Why This Video: Straight from Figma’s team, this tutorial is authoritative and concise.
7. Collaboration & Developer Handoff
Video Tutorial: Figma for Teams by Bring Your Own Laptop (30 mins)
Topics:
- Real-time collaboration with comments.
- Exporting assets (SVG, PNG, CSS snippets).
- Using Figma Dev Mode for smoother handoffs.
Why This Video: Perfect for designers working with developers.
8. Designing for Mobile Apps
Video Tutorial: Mobile App Design in Figma by DesignCourse (1 hour)
Topics:
- iOS/Android design guidelines.
- Creating screens for onboarding, menus, and dashboards.
- Testing prototypes on mobile devices.
Why This Video: DesignCourse’s project-based approach is ideal for portfolio building.
9. Animation with Figma
Video Tutorial: Figma Smart Animate Tutorial by Figma (Official Channel) (10 mins)
Topics:
- Creating smooth animations (page transitions, loading spinners).
- Using Smart Animate and easing curves.
Why This Video: Short, official, and packed with pro tips.
10. Building a Portfolio-Worthy Project
Video Tutorial: Figma Dashboard Design by Chunbuns (45 mins)
Topics:
- Designing a SaaS dashboard with charts and tables.
- Using gradients and shadows for depth.
- Exporting for presentations.
Why This Video: Chunbuns’ sleek design style elevates your portfolio.
Projects to Practice
- E-Commerce App: Design a product page with prototypes.
- Landing Page: Create a responsive website layout.
- Mobile App Flow: Build a food delivery app’s user journey.
Bonus: Freelancing with Figma
Video Tutorial: Make Money as a UI Designer by Roberto Blake (20 mins)
Topics:
- Finding clients on Dribbble/Upwork.
- Pricing strategies and contracts.
