Adobe XD Essential Training: Design

Adobe XD Essential Training: Design

3h 13mBeginner2022-10-05

Authors

Dani Beaumont

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

Introduction

  • Welcome to Adobe XD - Design

Exploring the User Interface

  • Creating a new document
  • Adding an artboard
  • Opening an existing document
  • Workspace layouts and panels
  • Navigating the design canvas
  • Working with the exercise files

Design Basics

  • Rectangle, ellipse, and polygon tools
  • Converting shapes to paths
  • Pen tool
  • Path vs. line and outline strokes
  • Borders, fills, and dashed lines and gradients
  • Paste attributes
  • Boolean operations
  • Color controls

Asset Types

  • Introduction
  • Open and roundtrip Illustrator content
  • Open and roundtrip Photoshop content
  • Placing and masking images
  • Applying blend modes
  • Working with Lottie animations
  • Working with videos
  • Audio file transitions (sneak peek)

Text Controls

  • Auto width, auto height, fixed height and width
  • Character style formatting
  • Saving and overriding character styles

Transform

  • Scale, rotate, flip, constrain dimensions
  • Scroll groups
  • 3D transforms

Layout Techniques

  • Guides
  • Grids
  • Aligning objects
  • Paste in place
  • Navigating the layers panel
  • Repeat grid

Content-Aware Layout

  • Padding
  • Stacks
  • Responsive resize

Appearance and Effects

  • Eyedropper
  • Opacity
  • Fill color and gradients
  • Inner and drop shadow
  • Background blur

Components and States

  • Introducing components
  • Defining a component
  • Creating component instances
  • Nesting and swapping components
  • Combining components with repeat grid
  • Defining component states

Organizing Assets

  • Understanding document asset views
  • Search and filter
  • Managing sub groups

Conclusion

  • Where to go to from here
80,000 Toman