Adobe XD Essential Training: Design
3h 15mBeginner2022-10-05
Authors

Dani Beaumont
Managing innovative apps in the web and design space for 25+ years
Course details
Adobe XD—a UX design platform for creating experiences using an iterative design process—was designed to help make it easier to collaborate on and share your ideas. In this course, part one in the three part series, you’ll learn how to create a variety of screen layouts using native tools within the application, or by importing content from other applications like Photoshop and Adobe Illustrator. Instructor Dani Beaumont, a principal product manager on the Adobe XD team, shows you how to set up a design project and use the workspace layouts and tools. Dani walks you through all the basics of designing with Adobe XD, then highlights the asset types and text controls that you will need to use. She goes over transformations, techniques you can use for a great layout, and content-aware tools like padding, stacks, and the responsive resize. Dani covers ways to add effects and introduces components and states. Plus, she presents useful advice on organizing your assets.
Skills covered
WireframingAdobe XDUX DesignUser ExperienceAdobeEssential TrainingWeb Development
Concepts
0. Introduction
- 01 - Welcome to Adobe XD - Design
1. Exploring the User Interface
- 02 - Creating a new document
- 03 - Adding an artboard
- 04 - Opening an existing document
- 05 - Workspace layouts and panels
- 06 - Navigating the design canvas
- 07 - Working with the exercise files
2. Design Basics
- 08 - Rectangle, ellipse, and polygon tools
- 09 - Converting shapes to paths
- 10 - Pen tool
- 11 - Path vs. line and outline strokes
- 12 - Borders, fills, and dashed lines and gradients
- 13 - Paste attributes
- 14 - Boolean operations
- 15 - Color controls
3. Asset Types
- 16 - Introduction
- 17 - Open and roundtrip Illustrator content
- 18 - Open and roundtrip Photoshop content
- 19 - Placing and masking images
- 20 - Applying blend modes
- 21 - Working with Lottie animations
- 22 - Working with videos
- 23 - Audio file transitions (sneak peek)
4. Text Controls
- 24 - Auto width, auto height, fixed height and width
- 25 - Character style formatting
- 26 - Saving and overriding character styles
5. Transform
- 27 - Scale, rotate, flip, constrain dimensions
- 28 - Scroll groups
- 29 - 3D transforms
6. Layout Techniques
- 30 - Guides
- 31 - Grids
- 32 - Aligning objects
- 33 - Paste in place
- 34 - Navigating the layers panel
- 35 - Repeat grid
7. Content-Aware Layout
- 36 - Padding
- 37 - Stacks
- 38 - Responsive resize
8. Appearance and Effects
- 39 - Eyedropper
- 40 - Opacity
- 41 - Fill color and gradients
- 42 - Inner and drop shadow
- 43 - Background blur
9. Components and States
- 44 - Introducing components
- 45 - Defining a component
- 46 - Creating component instances
- 47 - Nesting and swapping components
- 48 - Combining components with repeat grid
- 49 - Defining component states
10. Organizing Assets
- 50 - Understanding document asset views
- 51 - Search and filter
- 52 - Managing sub groups
Conclusion
- 53 - Where to go to from here