# Figma Bootcamp

Canonical URL: <https://training-nyc.com/courses/figma-bootcamp>

## Overview

In this class, you’ll thoroughly learn Figma from beginning to advanced features for UI (user interface) and UX (user experience) design.

Figma is a modern design app that was built with the specific needs of a modern web designer, UX designer, or app designer in mind. Unlike image editing programs such as Photoshop—which were originally created for print, photo retouching, or illustration—the entire focus of Figma is on designing user interfaces and user experiences. You can craft the visuals and turn them into working prototypes all in a single app!

Figma uses frames (which other apps call artboards), to efficiently design web layouts for mobile, tablet, and desktop (or screens for apps). It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-res (Retina) graphics for the web or apps. You’ll find tools and features specifically relevant to UI (User Interface) design and UX (User Experience) design, such as components, built-in prototyping tools, and much more.

Learn to design complex and realistic prototypes with advanced functionality. You’ll add interactions such as hovers, add animations to your designs using smart animate, make specific areas within a screen scrollable, and much more.

Figma is a web app and 100% cloud-based, so collaboration and easy file sharing is built-in. While you can install the Figma desktop app, you can also just log into Figma in any web browser and start designing without installing anything.

## What you'll learn

- Create UI (user interface) and UX (user experience) designs for websites and apps
- 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  
- Create more complex & realistic prototypes  
- Add interactions, such as hovers  
- Make animations using smart animate  
- Use components (including variants) to make updating your designs easier
- Work with Team libraries to share style & design components
- Define scrollable areas within a screen  
- Scroll up & down within a page

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

- 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

## Schedule
- Jun 15, 2026 – Jun 16, 2026 — NYC
- Jul 15, 2026 – Jul 27, 2026 — NYC
- Aug 3, 2026 – Aug 4, 2026 — NYC
- Oct 5, 2026 – Oct 6, 2026 — NYC
- Nov 2, 2026 – Nov 3, 2026 — NYC
- Dec 16, 2026 – Dec 28, 2026 — NYC

## Pricing

**Tuition:** $695