# Adobe XD in a Day

Canonical URL: <https://training-nyc.com/courses/adobe-xd>

## Overview

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

Adobe XD is an 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!

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

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

- With artboards and layout guides, you can design on popular grid systems (like Bootstrap), making it easier to design responsive webpages.
- Turn your designs into clickable prototypes quickly and easily. You can create prototypes directly in XD and share them with users or developers.
- Export specs to give your web developer so they can inspect a layout for size, colors, fonts, spacing, copy CSS code, and more—all from a web browser without having to own XD.
- One of XD’s unique features is the repeat grid. This lets you quickly repeat a design component in columns and rows. You can then customize the content in each copy, while still being able to quickly update the design across all of them.

## What you'll learn

- Use Adobe XD to create and optimize graphics for web and user interface design
- Create wireframes and turn them into finished designs that are optimized for mobile, tablet, and desktop screens
- Design on grids, extract image assets, create hi‑res 2x graphics, and more

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

## Pricing

**Tuition:** $395