# Figma Course Online

100% online with software and live support

Canonical URL: <https://vdci.edu/courses/figma-course-online>

## Overview

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.

## What you'll learn

- 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

## Curriculum

### 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

## Instructors

### Dan Rodney — Instructor

Dan Rodney has been a designer and web developer for over 20 years, creating coursework and leading innovative training initiatives. Dan has been at the forefront of integrating AI into design and business workflows, spearheading AI courses. In addition to teaching and curriculum development, he writes custom scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more) and works with automation and AI-driven tools in his free time. You can find Dan on X (Twitter), LinkedIn, Facebook, and at danrodney.com.

### Eugenio Solis de Ovando — Instructor

Eugenio Solis de Ovando is a Senior Instructor specializing in graphic design, web design, and visual communication. With over 20 years of experience in the creative industry, Eugenio is passionate about helping students develop strong technical skills and a solid design foundation across print, digital, and web platforms.

Eugenio teaches a wide range of courses, including Photoshop, Illustrator, InDesign, Figma, WordPress, UI Design, and Artificial Intelligence for Graphic Design. His classes are known for their clear, hands-on approach, blending technical mastery with creative exploration to help students bring their ideas to life with confidence and precision.

He holds a Ph.D. in Artificial Intelligence with a specialization in Human Performance Technology, where his research focused on integrating emerging AI technologies into adult education and training. 

As an Adobe Certified Design Master and Licensed Private Career School Teacher in New York State, Eugenio is dedicated to delivering high-quality instruction and sharing best practices in digital design workflows. He brings real-world insights into the classroom, guiding students through professional techniques in layout design, typography, color theory, image editing, and responsive web design.

## FAQ

### 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 payment plans or student financing. See our Payment Options FAQ to find related programs that qualify.

### 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 Extensive video training resources to support your learning journey 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?

Take this course as part of a certificate program and save: Digital Design Certificate Online Price: $4,495 | Hours: 138 Hours Figma Masterclass Course Online Price: $995 | Hours: 18 Hours AI Design Certificate Program Online Price: $6,995 | Hours: 438 Hours AI UX & UI Design Bootcamp Online Price: $4,995 | Hours: 282 Hours AI Content Creation Bootcamp Online Price: $6,995 | Hours: 288 Hours AI Graphic Design Bootcamp Online Price: $4,995 | Hours: 330 Hours

## Pricing

**Tuition:** $695