# Figma Bootcamp

Canonical URL: <https://www.nobledesktop.com/classes/figma-bootcamp>

## Overview

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.

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

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

## Instructors

### Michael Suen — Instructor

Michael is an independent designer and creative director. For over a decade, he has run the design studio Weirdo, helping early-stage startups and enterprise companies alike clarify their unique value proposition and meaningfully engage their customers.

Drawing on his experience as a certified Design Sprint facilitator and former startup co-founder, Michael has worked side-by-side with leaders at LinkedIn, Bose, KonMari, Lovevery, IntelyCare, Hazel Health, and more to launch new brands, products, and services. His projects have been featured in the likes of _TechCrunch_,  _The_ _Wall Street Journal_, and _NPR_, and won awards at South by Southwest and Games for Change.

Prior to his position at Noble Desktop, Michael served as an adjunct professor at the City University of New York, where he co-created the user experience curriculum for their workforce training program. He has also taught user experience design at General Assembly and lectured on playful design at MIT and Haverford College.

In his former lives, Michael covered arts and culture as a journalist, shipped award-winning educational games as a digital producer, and participated in two successful startup exits as a founding designer (SwitchUp acquired by Optimal in 2018, VocaliD acquired by Veritone in 2022). Raised in Hong Kong and educated in Vermont, he now lives in Queens, NY.

### Christophe Drayton — Instructor

Christophe is the instructor for the UX & UI Design Certificate, Figma Advanced, and Generative AI courses at Noble Desktop, and the founder and Chief Design Officer of Kaaiind, which specializes in Applied Artificial Intelligence in the Creative field.

With over 20 years in Branding, UX Design, and Accessibility across Europe and the US, Christophe has positively impacted the digital experience of a large spectrum of companies, ranging from big data to startups, government entities to nonprofits, both in the private and public sectors.

As an Educator, Christophe has led transformative and award-winning UX programs at Thinkful, the City University of New York (CUNY), and the Brooklyn Public Library, which have opened doors for underrepresented groups in tech who have secured roles at top companies like Google, Uber, Citi, and IBM. Most recently, he has developed innovative curricula about AI in the workplace for the University of Phoenix, LinkedIn Learning, and Coursera.

Today, he focuses on developing Allie, one of the first AI-powered, patent-pending color-blind safe and WCAG-compliant design system generator, while concluding his 5-year fundamental research on color vision deficiencies in digital environments.

Christophe believes in hands-on, practical application of human-centered strategy and ethical and inclusive design. He is passionate about sharing his knowledge to inspire and empower the next generation of designers, especially those entering the field through nontraditional paths.

## FAQ

### Do I need to bring anything to the class?

You will need your own [Figma account](https://www.figma.com/) (free or paid).

For in-person classes, we provide computers (Mac or PC). Choose your operating system at checkout.

## Pricing

**Tuition:** $695