XD Web page

Laptop screen with XD

XD is Adobe’s answer for web and app mockups. In this tutorial, we will get you started with the basics, then help you build up to creating components and different states. Finally, we will show you how to share your design.

Table of Contents:
00:28 – Web mockup example
00:53 – Starting a new document
01:09 – Saving Document
01:22 – Co-Edit
01:40 – Royalty free photos
01:51 – Plugins
02:15 – How to add plugins
02:24 – Name EVERYTHING
02:45 – Import images
03:13 – Using document assets
03:40 – Pull colors from image
04:35 – Setting character text styles
07:32 – Finding icons through plugins
09:49 – Using drawing tools
11:43 – Using alignment tools
11:55 – Layout grid
13:05 – Layers
13:19 – Background Blur
13:48 – Adding text
14:05 – Text box types
14:35 – Using lorem ipsum
15:26 – Smart guides
15:37 – Creting scrolling pages
16:17 – Adding additional screens
16:30 – Preparing for an auto animate
17:58 – Creating repeat grid
19:43 – Using artboard tool
21:04 – Creating stacks
22:23 – Hover states
22:47 – Make a component
24:15 – Creating a flyout
26:23 – Adding a new state
27:35 – Prototyping
29:20 – Using components to help prototyping
33:51 – Sharing your prototype