Figma Bootcamp Course Online With Live Support

This course includes

12 hours of project-based training from experts
Answers from real instructors
Proprietary workbook included
Retake for free within 1 year
Access to class recordings (30 days)
Verified digital certificate of completion

This course is self-paced. For live online or in-person instruction, take the Figma Bootcamp.

Figma is a modern design application created specifically for Web, UX, and App Designers. Unlike traditional image editors like Photoshop, which was originally made for print or photo retouching, Figma is purpose-built for designing user interfaces and user experiences. Through guided lessons and practical projects, you’ll explore Figma’s tools for designing responsive layouts using frames, managing typography, color, and imagery, and building reusable components. You’ll also create interactive prototypes featuring scrollable areas, navigation overlays, and smart animations.Because Figma is cloud-based, collaboration and file sharing are seamless whether you use the desktop app or log in directly through your browser.

Course Reviews

From our hands-on training style to world-class instructors and custom-crafted curriculum, we deliver results our alumni are proud of.

Tuition

Full Tuition

$695
Due before the class starts

This course includes

12 hours of project-based training from experts
Answers from real instructors
Proprietary workbook included
Retake for free within 1 year
Access to class recordings (30 days)
Verified digital certificate of completion

Learn the Skills Guarantee™

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

Hands-on training

Work on projects proven to boost retention

Several students, sitting at computers, looking at the front of the classroom

Time-tested curriculum

Refined over many cohorts for an optimal learning experience

The teaching method at Noble Desktop is perfect and the classes provide you with infinite knowledge that makes you eager to take everything they offer. I love Noble!
—Ivonne Ackerman

Learn from experts

Experienced educators who are driven to help you succeed

Retake for free

Refresh the materials for free within one year

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 Noble online discussion forums — share ideas and receive additional support.
Hands-on quizzes and mini projects to test and reinforce concepts.

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 Bootcamp (Self-Paced)

Figma Bootcamp (Self-Paced) Curriculum

What You'll Learn at a Glance

Create UI (user interface) and UX (user experience) designs for websites, apps, and more
Design finished layouts that are optimized for mobile, tablet, and desktop screens
Design on grids, extract image assets, share designs with clients/developers, and more
Build interactive prototypes
Make animations using smart animate
Use components (including variants) to make updating your designs easier
Work with Team libraries to share style and design components

Project Examples

Learn practical skills by working on real projects with instructor guidance and lectures to strengthen and improve your skill.

Make Working Prototypes

Create designs and working prototypes to show clients and developers

Designing on a Layout Grid

Learn to use grid systems (such as Bootstrap) when designing responsive layouts that look good across multiple device sizes (phone, tablet, and desktop)

Component Variants

Learn how to build components (and their variants) to make creating and updating designs easier

Hovers & Overlays

Prototype working hovers and overlays

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)

Designing 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 Plan FAQ to find related programs that qualify.

How long do I have access to the course materials?

This course is available for 30 days.
You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.

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

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.

However, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.

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:

UI Design Certificate (Self-Paced)

Price: $3,995 | Hours: 120 Hours
Digital Design Certificate (Self-Paced)

Price: $4,495 | Hours: 138 Hours

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

This course includes

Take this course as part of a package and save:

Course Reviews

Tuition

Full Tuition

This course includes

Learn the Skills Guarantee™

Hands-on training

Time-tested curriculum

Learn from experts

Retake for free

100% Online. Start Anytime

Earn a Certificate of Completion

Figma Bootcamp (Self-Paced) Curriculum

What You'll Learn at a Glance

Project Examples

Make Working Prototypes

Designing on a Layout Grid

Component Variants

Hovers & Overlays

Course Syllabus

Section 1

Creating a New Figma File

Designing on a Layout Guide (like the Bootstrap Grid)

Importing & Cropping Photos

Vector Graphics, Colors, Shadows, & More

Section 2

Components (Reusable Elements)

Turning a Design into a Clickable Prototype

Exporting Assets for Web: SVG, JPEG, & PNG

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

Section 3

Auto Layout: Introduction

Auto Layout: Deeper Dive

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

Text Styles

Section 4

Component Properties & Variants

Hovers, Overlays, & Smart Animate

Team Libraries (Shared Libraries)

Frequently Asked Questions

Is this course open to beginners?

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

How long do I have access to the course materials?

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

What’s included with my tuition?

Are there any additional fees or expenses?

Do you offer any discounts for this course?

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

Related Courses: Compare to Figma Bootcamp (Self-Paced)

UX & UI Design Certificate

UI Design Certificate

Figma Advanced

Figma Masterclass