Adobe XD 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.
Includes Downloadable Class Files (works on Mac & PC)
Setup & Introduction
Downloading the Class Files
Introduction
Retina Graphics: 1x versus 2x (Low-Res versus Hi-Res)
- 1x versus 2x (Retina graphics)
Before You Begin: Syncing Adobe Fonts
- Syncing Adobe Fonts used in this book
Keyboard Shortcuts Guide
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
Linked Components & Shared Libraries
- Linked Components
- Shared Libraries
Bonus Material
Adjusting the Layout for Tablets & Mobile Phones
- Designing with Bootstrap’s grid
- Adapting the design for tablets
- Adapting the design for mobile phones
Exporting Assets for iOS & Android Apps
- Exporting for iOS apps
- Exporting for Android apps
Reference Material
Adobe XD Mobile App: Viewing Work on iOS & Android Devices
- Using the Adobe XD mobile app to view your design on a phone or tablet while you work
Additional Image Optimization Tools
- Further reducing the file size of PNG & JPEGs
- Turning transparent PNG-24 files into PNG-8 with ImageAlpha
Web File Formats Quick Reference
- Comparison of JPEG, PNG, GIF, SVG, & PDF
Common Device Sizes
- 1x, 2x, & Bootstrap container sizes for iPhone, iPad, & desktop
Examples of What You Learn
Why Our Books Are Unique
Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.
