Figma Bootcamp
- Format
- Live or Self-paced
Choose how you learn
Compare formats, then explore the details for your choice.
Book directly on nobledesktop.com. Opens in a new tab.
Book live on Noble DesktopSummary
Learn to design responsive layouts for mobile, tablet, and desktop using frames, vector-based tools, and built-in components for UI and UX design. You'll export hi-res graphics for websites and apps, and work with features like components and prototyping tools tailored specifically to interface design.
From there, you'll turn your designs into interactive prototypes that move from screen to screen, open navigation overlays, enable scrollable areas, and incorporate smart animations. Since Figma is 100% cloud-based, collaboration and file sharing are built right in with no installation required.
Curriculum
What you'll learn
- 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
Course syllabus
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
What's included
- Free course retake within one year to refresh the material and gain practice.
- Course workbook
- Class recordings
Stated by the provider. Confirm what your tuition covers before enrolling.
Live classes
Choose dates and book your instructor-led class on nobledesktop.com.
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EST); final session ends at 17:00 EST
-
–
In-person or live online
Starts at 18:00 · America/New_York (EST); final session ends at 21:00 EST
-
–
In-person or live online
Starts at 18:00 · America/New_York (EST); final session ends at 21:00 EST
-
–
In-person or live online
Starts at 10:00 · America/New_York (EST); final session ends at 17:00 EST
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 18:00 · America/New_York (EDT); final session ends at 21:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 18:00 · America/New_York (EDT); final session ends at 21:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EST); final session ends at 17:00 EST
Confirm current dates and availability on Noble Desktop before booking.
Self-paced course
Learn through recorded lessons on your own schedule.
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.
- Tuition
- $695
- Course length
- 12 hours
- Schedule
- On your schedule
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 self-guided lessons and practical projects, you’ll explore Figma’s tools for designing responsive layouts using frames, managing typography, color, and imagery, as well as 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.
Self-paced curriculum
What you'll learn self-paced
- 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
Self-paced syllabus
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
What's included with self-paced
- Course workbook
- Self-paced video lessons
Self-paced lessons
Watch free previews and explore the lessons included with enrollment at Noble Desktop.
Figma Bootcamp (Self-Paced)
-
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 Noble Desktop -
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 Noble Desktop -
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 Noble Desktop -
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 Noble Desktop -
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 Noble Desktop -
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 Noble Desktop -
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 Noble Desktop -
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 Noble Desktop