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
Topics Covered
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
Foundations of Web Development: Practical HTML for Beginners
Master the essentials of modern web development by learning HTML from scratch. In this practical guide, you will build structured, semantic web pages using headers, lists, links, images, tables, and forms, establishing a rock-solid foundation for your software development journey.
Java Programming Foundations: Master the Fundamentals of Software Development
Master Java programming fundamentals from scratch. Learn core concepts like variables, reference types, and control flow structures, then apply your skills by building a real-world Mortgage Calculator. This course establishes a solid foundation in software development and clean coding principles.
LLM App Development: Building Powered Applications with LangChain
Master the fundamentals of LangChain to build LLM-powered applications. This beginner-friendly course guides you through prompt templates, chains, agents, conversational memory, and document loaders using Python and OpenAI.