Figma Course Online with Software & Live Support

This course includes

12 hours of project-based training from experts
Software Access
Answers from real instructors
Proprietary workbook included
Access to class recordings (30 days)
Verified digital certificate of completion
Learn at an accredited institution

Figma is a contemporary design tool built specifically for web, UX, and app designers. Unlike traditional image editing software such as Photoshop, which was originally developed for print and photo retouching, Figma is designed from the ground up for creating user interfaces and user experiences. Through guided instruction and hands-on projects, you will explore tools for building responsive layouts with frames, managing typography, color, and imagery, and creating reusable components. You will also design interactive prototypes with scrolling areas, navigation overlays, and simple animations.

Because Figma is cloud-based, collaborating with others and sharing files is seamless whether you are using the desktop application or working directly in your web browser.

Full Tuition

$695
Due before the class starts

This course includes

12 hours of project-based training from experts
Software Access
Answers from real instructors
Proprietary workbook included
Access to class recordings (30 days)
Verified digital certificate of completion
Learn at an accredited institution

Why Learn at VDCI?

Hands-on training

Work on projects proven to boost retention

Time-tested curriculum

Refined over many years for an optimal learning experience

This training will definitely help my career. I was able to show my supervisor and co-workers what the software programs have to offer and what I'm capable of when the time comes for creating that construction design team in the future. I was able to provide documentation to my employer that the money spent was well worth it. The training I received at VDCI will become an asset moving forward.
—Donahue Chase

Learn from AEC industry experts

Experienced educators who are driven to help you succeed

Receive support from course instructors

Get help when you need it

100% Online. Start Anytime

24/7 access to our premium course videos and projects.
Industry experts are assigned as your course instructor. Message your instructor with any questions.
Participate in VDCI online discussion forums — share ideas and receive additional support.
Hands-on quizzes and mini projects to test and reinforce concepts.

Expert Instructors

Our instructors are industry experts and experienced educators, driven to help you succeed.

Dan Rodney

Instructor

Eugenio Solis de Ovando

Instructor

David Sellers

Instructor

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of Figma Course Online

male student at computer workstation taking revit course

Figma Course Online Curriculum

What You'll Learn at a Glance

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

Course Syllabus

Download Syllabus PDF

Section 1

Creating a New Figma File

Creating a new file
Setting up frames (other apps call these artboards)
Setting up a Layout Guide

Designing on a Layout Guide (like the Bootstrap Grid)

How to design on a Layout Guide
Adding text
Creating colored backgrounds for text columns

Importing & Cropping Photos

Importing & cropping photos
Rounding corners

Vector Graphics, Colors, Shadows, & More

Importing vector graphics
Aligning & distributing layers
Layer opacity vs. fill opacity
Reusing colors (color styles)
Adding a drop shadow

Section 2

Components (Reusable Elements)

Creating & editing components
Overriding content in one instance vs. globally updating all components
Setting Constraints
Detaching from a component

Turning a Design into a Clickable Prototype

Linking between frames (artboards)
Previewing the prototype
Creating an overlay
Fixing the position of elements so they don’t scroll

Exporting Assets for Web: SVG, JPEG, & PNG

Exporting individual assets
Exporting frames (artboards)

Sharing Figma Files: Commenting, Testing, Developers, etc.

Sharing a Figma file
Sharing a Prototype
Commenting on shared files
Viewing a prototype for user testing
Specs for developers

Section 3

Auto Layout: Introduction

Using Tidy Up for Even Spacing
Using Auto Layout
Alignment Constraints
Spacing, Rearranging, & Adding Items with Auto Layout

Auto Layout: Deeper Dive

Nesting Auto Layouts
Auto Layout Gap Spacing & Padding
Auto Layout Sizing & Constraints
Negative Spacing & Stacking Order
Ignoring Auto Layout

Linking Up/Down a Page, Scrollable Areas, & Hyperlinks

Making Links that Scroll Up/Down a Page
Making the Navbar Fixed to the Screen
Adjusting the Position & Speed of the Scroll
Creating a Scrollable Area Within a Page
Adding Hyperlinks

Text Styles

Opening Sketch files in Figma
Handling missing fonts
Creating, editing, & organizing text styles

Section 4

Component Properties & Variants

Component Properties (Text, Boolean, Instance Swap, & Variant)
Creating & Using Component Variants

Hovers, Overlays, & Smart Animate

Adding a Hover State to a Button (Using Variants)
Opening a Pop-Up (Using an Overlay)
Auto Animating the Hover with Smart Animate

Team Libraries (Shared Libraries)

Publishing a Team Library
Using Components in a Team Library
Using Styles in a Team Library
Swapping Team Libraries

Frequently Asked Questions

Is this course open to beginners?

Yes, this course is open to beginners. Students must be comfortable using a computer. No other prior knowledge is required.

Do you offer payment plans or student financing for this course?

This course does not qualify for payments plans or student financing. See our Payment Options FAQ to find related programs that qualify.

How long do I have access to the course materials?

What is the cancellation and refund policy for this single course?

For this course, you are entitled to a 90% refund (your payment less the nonrefundable 10% registration fee) within 30 days of purchase if you have not accessed the course materials.

What’s included with my tuition?

A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement
Expert instructors who are industry professionals and experienced educators that are driven to help you succeed
Access to industry-standard software during your training
Expert support with answers to your questions from real instructors throughout your learning journey
Comprehensive learning materials including proprietary workbook developed by industry experts
30-day access to class recordings to review material at your own pace
A certificate of completion to verify your accomplishment
The confidence of learning at an accredited institution

Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

Do you offer any discounts for this course?

We don’t currently offer discounts as we do our best to affordably prices our courses.

Take this course as part of a certificate program and save:

Digital Design Certificate Online

Price: $4,495 | Hours: 138 Hours

Installments
	10% non-refundable deposit
$695.00	Total You Pay