XD

Tutorial Hero Image

Adobe XD is a user experience design and prototyping tool for designing websites, apps, voice interfaces, games, and other types of digital experiences.

Browse Product Tutorials

Create Components with Hover States Create reusable, dynamically resizable, buttons for your interactive designs
Create and Populate a Repeat Grid Turn a single element into repeating grids with a simple click-and-drag
Work with Stacks Use the stack property to easily rearrange elements
Create a Prototype—Anchor Links and 
Scroll Groups Add navigation and scrolling to a prototype
Create a Prototype—Interactive Component States and Overlays Add interactivity and an overlay menu to a prototype
Email - Create and Populate a Repeat Grid Turn a single element into repeating grids with a simple click-and-drag
Email - Work with Stacks Use the stack property to easily rearrange elements
Spacer

Spacer

Create Components with Hover States (7:35)

Description
Create reusable, dynamically resizable, buttons for your interactive designs.

In this tutorial, you will learn how to:

  • Make changes to a source main component and those changes are pushed automatically to all instances of that component
  • Use components for consistency, time saving, fewer clicks

Presented by:
Michael Murphy, Senior Solution Consultant (Digital Media)

Create and Populate a Repeat Grid (2:57)

Description
Turn a single element into repeating grids with a simple click-and-drag.

In this tutorial, you will learn how to:

  • Boost your workflow and drag out any sized grid you need, instantly
  • Bring in real content and data and XD will magically place all images and text to your grid
  • Make changes once and apply it where you like, in any direction

Presented by:
Ashley Dvorin, Senior Solution Consultant (Digital Media)

Work with Stacks (5:33)

Description
Use the stack property to easily rearrange elements.

In this tutorial, you will learn how to:

  • Maintain alignment and spacing between objects on your canvas even as your design changes
  • Insert new objects or reorder objects in a stack and everything adjusts automatically

Presented by:
Michael Murphy, Senior Solution Consultant (Digital Media)

Create a Prototype—Anchor Links and Scroll Groups

Video Hero Placeholder Image

Description
Add navigation and scrolling to a prototype.

In this tutorial, you will learn how to:

  • Add links to your prototypes with an action that lets users jump to different points on the same artboard
  • Create activity feeds, image carousels, product listings, and more by defining areas that scroll independently from the rest of your designs
  • Create groups that scroll vertically, horizontally, or both

Presented by:
Michael Murphy, Senior Solution Consultant (Digital Media)

Create a Prototype—Interactive Component States and Overlays

Description
Add interactivity and an overlay menu to a prototype.

In this tutorial, you will learn how to:

  • Create a non-linear interactive and animated user experience without the need for additional artboards
  • Author multiple prototype or interaction flows in a single XD document and publish unique shareable links for each flow

Presented by:
Michael Murphy, Senior Solution Consultant (Digital Media)

Email - Create and Populate a Repeat Grid (4:45)

Description
Turn a single element into repeating grids with a simple click-and-drag.

In this tutorial, you will learn how to:

  • Boost your workflow and drag out any sized grid you need, instantly
  • Bring in real content and data and XD will magically place all images and text to your grid
  • Make changes once and apply it where you like, in any direction

Presented by:
Victoria Torres, Solution Consultant (Digital Media)

Email - Work with Stacks (3:38)

Description
Use the stack property to easily rearrange elements.

In this tutorial, you will learn how to:

  • Maintain alignment and spacing between objects on your canvas even as your design changes
  • Insert new objects or reorder objects in a stack and everything adjusts automatically

Presented by:
Victoria Torres, Solution Consultant (Digital Media)

On this page