Vigyata.AI
Is this your channel?

Figma Tutorial for Beginners - Complete Course 2025

238.8K views· 6,316 likes· 114:38· Feb 22, 2025

🛍️ Products Mentioned (3)

This is the only video you will ever need to learn Figma completely. This is a comprehensive Figma tutorial that covers every topic from basics to advanced features. In this Figma course, we will learn every feature from scratch. This tutorial is perfect for beginners who want to learn Figma and become professional UI designers. We will cover all features of Figma, including Auto-layout, Components, Component Properties like Instance swap, Prototyping, Boolean operations, Figma animations, and more. --------- Link to Assets ------------ https://drive.google.com/file/d/1YLudFiwvjgrQ42ViNom9yTcEkh_Wuicx/view?usp=sharing --------- Link to Keyboard Shortcuts Cheatsheet ------------ For Mac: https://drive.google.com/drive/folders/1944enW2U9ulVtdSQfz1mKN7yGyGC4pNJ?usp=sharing For Windows: https://drive.google.com/drive/folders/1nhlgRLQdsFNn8E-3fNxBLDbs9MA2EYea?usp=sharing 🎓 Topics we cover in this Course: Intro: 00:00:00 Download or Access Figma: 00:00:39 Figma Dashboard: 00:02:40 Create new Figma project: 00:04:31 Get Figma Keyboard Shortcut CheatSheet: 00:05:16 Basics of Figma: 00:05:36 Frame tool: 00:07:39 Zoom in and Zoom out: 00:09:10 Frame properties: 00:10:42 Download Supporting Files and Importing Figma File: 00:11:14 Importing Image: 00:12:42 Alignment options: 00:13:14 Add Text and Change Color and size: 00:13:31 Creating Local Styles: 00:14:27 Designing a basic button: 19:33 Layout Grids: 00:21:26 Hide Show Layout Grid Shortcut: 00:22:42 Duplicating a Frame: 00:23:12 Tip to Directly Select Item inside a Frame or AutoLayout: 00:23:32 Group and Frame Selection: 00:12:42 Tip to duplicate the main Frame quickly: 25:44 Intro to Shapes and Pen tool to create shapes: 00:29:32 Intro to Plugins and Designing Icons from Plugins: 00:31:05 Remix Icon Plugin: 00:31:38 Replace Frame Shortcut: 00:32:45 Designing continued: 00:33:09 Intro to Auto-layouts: 00:37:44 How to use Auto-layouts: 00:40:14 Suggest Auto-layout: 00:51:17 Ignore Auto-Layout and Absolute Position: 00:52:15 Constraints: 00:53:39 Thank you: 00:55:24 Components: 00:55:51 How to use Components: 00:58:23 Intro to variants: 01:00:37 How to make variants: 01:01:05 Variant Properties: 01:03:15 Text Variant Property: 01:06:23 Instance Swap Variant Property: 01:07:34 Bolean Variant Property: 01:10:53 Designing Continued: 01:13:35 Creating Icon Library for Icon Instance Swapping: 01:14:15 Designing Continued: 01:16:43 Masking or Use as mask: 01:24:36 Designing Continued: 01:25:33 Effects ft. Drop shadow: 01:26:07 Wrap Auto-Layout: 01:27:08 Designing Continued: 01:28:28 Designing Navigation: 01:28:50 Vertical and Horizontal Scrolling: 01:32:47 Designing Category Page: 01:33:52 Variables coming soon: 01:39:39 Boolean operations: 01:39:55 Using Items from Figma Community: 01:42:39 How to change Prototype Device Frame: 01:43:25 Prototyping and Figma Animations: 01:43:56 Share Prototype options: 01:50:38 Prototype Size options: 01:50:55 Prototype Flows: 01:51:06 Adding Comments to Figma File and Prototype: 01:51:18 Exporting Frames and Images: 01:52:07 Share Figma File: 01:51:44 Saving Figma File Locally to Computer: 01:53:33 Outro: 01:53:51 ----------------------------------- 🎯 Want to learn more about Figma? Subscribe to my channel. https://youtube.com/@AverageDesignDude 🚨 Learn more tips and tricks on Figma on my Instagram channel below https://www.instagram.com/averagedesigndude/

About This Video

If you clicked this, you’re either trying to get into UI/UX or you just want to learn Figma as a tool. Either way, my advice is simple: stop overthinking and start right now—because Figma is the industry standard. In this complete beginner-to-advanced course, I walk you through Figma from the dashboard and file setup all the way into real UI design work. We’ll create a mobile app (Burger Licious) and I’ll show you the actual workflow I use, not just random button-clicking. I cover the core foundations: frames (and why they’re containers, not rectangles), canvas navigation (zoom, pan, shortcuts like Shift+1), importing assets (Command/Control+Shift+K), alignment, text styling, and the big one—local styles. I show you exactly why styles matter: if you design like a pro, you don’t manually change colors on 100 screens; you change a style once and everything updates. Then we build real UI pieces like buttons and input fields, use layout grids for consistent spacing (margins/gutters), and I share small speed tricks like duplicating frames quickly and directly selecting items inside frames with Command/Control. The goal is simple: you finish this knowing how to work in Figma like you’d need to on a real UI job.

Frequently Asked Questions

🎬 More from Average Design Dude