Figma Masterclass Course Online
An 18-hour bundle combining VDCI's introductory and advanced Figma courses into a single track covering layout design, interface prototyping, and finished work across desktop, tablet, and mobile. Coursework covers responsive design, animation, components,...
What's included
- Software access during the course
- 18 hours of project-based instruction
- 16 training videos
- Instructor support for questions during the course
- Class recordings for 30 days
- Verified digital certificate of completion
- Instruction at an ACCET-accredited school
Overview
An 18-hour bundle combining VDCI's introductory and advanced Figma courses into a single track covering layout design, interface prototyping, and finished work across desktop, tablet, and mobile.
Coursework covers responsive design, animation, components, styles, and variables, along with Figma's cloud collaboration features for working with other designers and developers.
Who this course is for
Web, UX, and app designers who want complete Figma coverage in one sitting, from the basics through component and variable systems.
Tuition & enrollment
Enroll with Virtual Design and Construction Institute, the course provider.
Loading enrollment options…
Prefer to enroll directly? Open the course website.
Preview the course
Watch free previews and explore the lessons included with enrollment at VDCI.
Figma Course Online
-
Overview & Setup
Lesson 1: Figma Fundamentals
1:10
Discover what this Figma design course covers and how to get the most out of the training videos and exercises.
This preview is temporarily unavailable. Please try again later.
-
Getting Started with Figma
Lesson 1: Figma Fundamentals
10:00
Learn how to create a Figma account and navigate the interface using either the browser or desktop app.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Designing on Grids & Layout Fundamentals
Lesson 1: Figma Fundamentals
29:43
Master grid-based design principles to keep content equally sized and consistently spaced across pages.
View enrollment options at VDCI -
Enrollment required
Working with Photos & Pixel Based Graphics
Lesson 1: Figma Fundamentals
27:16
Import photos and pixel-based images into your Figma designs using prepared layout files.
View enrollment options at VDCI -
Enrollment required
Vector Graphics, Colors & Effects
Lesson 1: Figma Fundamentals
30:11
Bring in vector graphics and apply colors, color styles, and effects like drop shadows to enhance your layouts.
View enrollment options at VDCI -
Introduction to Components & Auto Layout
Lesson 2: Components & Prototyping
10:00
Explore Figma's component system and get an introductory look at auto layout for reusable design elements.
This preview is temporarily unavailable. Please try again later.
-
Prototyping Interactive Designs
Lesson 2: Components & Prototyping
10:00
Turn static designs into clickable, interactive prototypes that simulate real user experiences.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Sharing, Exporting & Collaboration
Lesson 2: Components & Prototyping
29:42
Share finished designs with teammates, stakeholders, and developers using Figma's collaboration features.
View enrollment options at VDCI -
Understanding Auto Layout
Lesson 3: Deep Dives
10:00
Dive deeper into auto layout to understand how automatic sizing and spacing work in Figma.
This preview is temporarily unavailable. Please try again later.
-
Advanced Auto Layout Techniques
Lesson 3: Deep Dives
10:00
Master nested auto layout frames with different directions, padding, and spacing settings for complex layouts.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Prototype Scrolling & Hyperlinks
Lesson 3: Deep Dives
18:54
Configure vertical and horizontal scrolling within prototypes for long pages and scrollable sections.
View enrollment options at VDCI -
Enrollment required
Typography Styles & Sketch File Import
Lesson 3: Deep Dives
13:58
Create and manage reusable type styles to maintain consistent typography across your designs.
View enrollment options at VDCI -
Component Properties & Design Systems
Lesson 4: Advanced Features
10:00
Leverage component properties to build flexible, reusable elements that scale into a design system.
This preview is temporarily unavailable. Please try again later.
-
Hover States, Overlays & Smart Animate
Lesson 4: Advanced Features
10:00
Design hover effects and overlay interactions for desktop interfaces using Figma's prototyping tools.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Team Libraries & Shared Design Systems
Lesson 4: Advanced Features
20:23
Set up team libraries to share styles and components across multiple files and users in your organization.
View enrollment options at VDCI -
Enrollment required
Wrap Up & Next Steps
Lesson 4: Advanced Features
0:12
Review key takeaways from the Figma course and get encouragement to continue practicing.
View enrollment options at VDCI
Curriculum
What you'll learn
- Design user interfaces for websites, apps, and other digital products with UX principles in mind
- Create polished, responsive layouts for mobile, tablet, and desktop screens
- Work with grids, export assets, and hand off designs to clients and developers
- Build interactive prototypes and add motion using Smart Animate
- Use components, variants, team libraries, and variables to streamline design systems and workflows
- Create advanced prototypes with conditionals, dark and light modes, and scalable design systems
Course outline
-
Figma Course Online 12 hours
Start learning Figma for UI and UX design by building a strong understanding of what the tool can do. Learn how to create and manage files, design using grids, work with text, images, and color systems, build reusable components, create interactive prototypes, export assets, share designs, create simple animations, and more.
- Create UI and UX designs for websites, apps, and digital products
- Design complete layouts optimized for mobile, tablet, and desktop screens
- Work with grid-based layouts, extract image assets, and share designs with clients and developers
- Build interactive prototypes to demonstrate user flows and interactions
- Create animations using Smart Animate
- Use components and variants to streamline updates and maintain consistency
- Collaborate with Team libraries to share styles and reusable design elements
-
Figma Advanced Course Online 6 hours
Push your Figma skills further with this advanced prototyping course. You'll learn to work with variables, modes, and conditionals to bring more realistic interactivity to your prototypes.
- Explore Figma's advanced prototyping features
- Learn how to work with variables and variable modes
- Use conditionals to add advanced interactivity to your prototypes
- Create light and dark modes using variable collections
- Apply primitive and semantic layers when building a design system