# Adobe XD Bootcamp

Canonical URL: <https://www.careercenters.com/courses/adobe-xd-bootcamp>

## Overview

Note: We no longer teach Adobe XD. We recommend the [Figma Bootcamp](/courses/figma-bootcamp) for anyone looking to learn the industry-standard tool for user experience (UX) and user interface (UI) design.

#### Learn Adobe XD for UX & UI Design

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

Adobe XD 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 Adobe XD is on designing user interfaces and user experiences. You can craft the visuals and turn them into working prototypes all in a single app!

XD uses artboards, so you can 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 symbols, repeat grids, built-in protyping tools, and much more.

Learn to design complex and realistic prototypes with advanced functionality. You’ll use component states to create hovers, add animations to your designs using auto-animate,  make specific areas of content scrollable using scroll groups, and much more.

Make your graphics stand out with 3D transforms,  create anchor links that let users scroll up or down within a page, add audio sound effects to your user interfaces,  and more!

## What you'll learn

- Create UI (user interface) and UX (user experience) designs for websites and apps
- Build layouts using text, images, layout grids, artboards, pages, and more.
- Make responsive web designs that are optimized for mobile, tablet, and desktop screens.
- Harness the power of symbols to create reuseable design elements.
- Optimize graphics for web and app design (create hi‑res 2x graphics, SVG, JPEG, and PNG).
- Turn your designs into clickable prototypes that can be shared with others (using Sketch’s built in features, as well as InVision)
- Master Sketch’s symbols by learning how to override their content and styling to create powerful design systems.
- Update symbols and styles across multiple Sketch files (or computers) using shared Libraries.
- Use Sketch’s vector drawing tools to create icons & more.
- Learn useful plugins that can add amazing new features to Sketch.

## Curriculum

### Section 1

#### Creating New Files & Designing on a Grid

- Creating a new file
- Setting up artboards
- Importing text
- Creating colored backgrounds for text

#### Importing & Cropping Photos

- Importing a photo as an image fill (crop a photo)
- Rounding corners

#### Vector Graphics, Colors, Shadows, & More

- Importing & modifying vector graphics
- Aligning & distributing layers
- Layer opacity vs. fill opacity
- Reusing colors (color swatches)
- Adding a drop shadow

#### Character Styles

- Creating & Editing Character Styles

### Section 2

#### Repeat Grids

- Creating a Repeat Grid
- Customizing the content
- Adjusting the design

#### Components (Reusable Elements)

- Creating & editing components
- Overriding content in one instance vs. globally updating all components
- Detaching from a component
- Components versus Repeat Grids

#### Turning a Design into a Clickable Prototype

- Linking between artboards
- Previewing the prototype
- Creating an overlay
- Background blur
- Fixing the position of elements so they don’t scroll
- Making a recording of a prototype

#### Exporting Assets for Web: SVG, JPEG, & PNG

- Exporting individual assets
- Exporting artboards

#### Sharing XD Files (For Review, Developers, etc.)

- Sharing an XD file
- Commenting on shared files
- Pinning a comment
- Updating an existing shared file
- Sharing for Development

### Section 3

#### Stacks, Padding, & Responsive Resize

- Creating a Stack & Adjusting the Spacing
- Rearranging & Adding Items to a Stack
- Responsive Resize, Stacks, & Padding
- Keystrokes for Working with Stacks & Padding
- Nesting Stacks (Stacks Within Stacks)

#### Linking Up/Down a Page & Scrollable Areas

- 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

#### Intro to Auto-Animate

- The Basics of Auto-Animate
- Different Kinds of Easing
- Adding a Timed Animation

#### Parallax Animation

- Setting Up the Parallax Assets
- Building the Parallax Animation

#### Component States (Hover & Toggle)

- Adding a Hover State to a Button
- Creating a Toggle State

### Section 4

#### Creating 3D Transforms

- Adding 3D Transforms
- Front to Back versus Z Position

#### Adding Interactions to a Slideshow: Tap, Drag, & Keys

- Creating a Working Slideshow Prototype
- Adding Tap Interactions
- Adding the Ability to Drag
- Adding Keystrokes

#### Time Interactions & Adding Audio (Sound Effects)

- Adding a Drag Interaction
- Adding a Time Interaction
- Adding a Sound Effect
- Adding a Keystroke

#### Shared XD Libraries

- Publishing a Library
- Using an XD Library

## Pricing

**Tuition:** $650