Figma UI/UX Design Masterclass: From Beginner to Pro Portfolio
Master Figma from the ground up. Learn essential UI/UX design tools, style guides, auto layout, and responsive constraints. Build real-world projects including travel sites, food delivery apps, and 3D web elements to launch your professional design portfolio.
Course Overview
Welcome to the ultimate guide to mastering Figma for UI/UX design. This comprehensive course takes you from an absolute beginner to a confident designer capable of building production-ready user interfaces, design systems, and interactive prototypes.
What You'll Learn
- Figma Fundamentals: Navigate the editor, master shortcuts, and use vector tools.
- Design Systems: Build robust style guides, color palettes, and reusable components.
- Auto Layout & Constraints: Create responsive designs that adapt to any screen size.
- Interactive Prototyping: Bring designs to life with micro-interactions, animations, and transitions.
- Real-World Portfolios: Design websites, mobile apps, and 3D web elements.
Prerequisites
- No prior design experience required.
- A free Figma account.
- A desire to learn and build real-world projects.
Tools & Technologies
- Figma (Desktop or Browser version)
- Basic understanding of UI/UX design principles.
Course Content
Figma Interface and Essential Tools
Introduction to UI/UX and Figma Setup
Navigating the Figma Editor, Frames, and Move Tools
Core Design Tools: Shapes, Vector Paths, and Typography
Design Systems, Components, and Constraints
Introduction to Style Guides and Color Palettes
Low-Fidelity Wireframing and Style Guide Setup
Creating and Managing Components
Mastering Boolean Operations
Setting Constraints and Managing Layers
Creating Responsive Layout Grids
Responsive Grids and Web Design Projects
Creating and Configuring Layout Grids in Figma
Designing a Responsive Travel Website Header & Hero
Designing a Car Dealership Website with Grids
Mastering Creative Gradients for Web UI
Building a Quick 3D Web Element Landing Page
Mobile App UI/UX Design Projects
Designing the Tomato Food Delivery App
Designing a Vibrant Donut Delivery App
Nike-Inspired E-Commerce App Design
Advanced Interactions and Multi-Dimensional Components
Building an Interactive Image Slider
Mastering Multi-Dimensional Components and Variants
Designing a Dynamic Rotating Can Website
This course includes
- 6h 22m on-demand video
- 20 lessons across 5 chapters
- 5 interactive quizzes
- Access on mobile and desktop
- Source playlist on YouTube
About the Channel
Learn math, programming, and computer science for free. A 501(c)(3) tax-exempt charity. We also run a free learning interactive platform at freecodecamp.org
Share
Related Courses
Mastering AI-Driven Development with OpenAI Codex: From Setup to Autonomous Agents
Master OpenAI Codex to build, manage, and deploy applications using autonomous AI agents. Learn to set up workspaces, leverage git worktrees, configure Agents.md, and build three complete applications step-by-step from scratch.
Data Analysis and Visualization Fundamentals with Python, Pandas, and Matplotlib
Master the basics of data science by learning how to analyze and visualize real-world datasets. Using Python, Pandas, and Matplotlib within Jupyter Notebooks, you will plot population growth trends and compare relative data.
OpenCode Mastery: Building Provider-Agnostic AI Coding Workflows
Master OpenCode, the open-source AI coding agent. Learn to run local models with Ollama, connect cloud models via OpenRouter, use Plan and Build modes, and integrate MCP servers to build powerful applications without vendor lock-in.