HowTo Video Tutorial Script (912 words)

Hello there! My name is Demian Borba and I work on the strategic development team for XD Adobe today I’ll show you how to use XD in under five minutes focused on Mac.

Right, so XD for the ones seeing it for the first time is a brand new tool from Adobe that allows you to create high fidelity designs low fidelity designs like wireframes, then very easily go to prototype mode to create our prototype, then share with any stakeholder to collect feedback and then iterate.

Once everything is validated, once everything is ready then you can hand it off to developers using design specs.

Right, so let’s see XD in action.

First of all you can see here that XD is super fast you can render thousands of our boards with no problems, you can pinch to zoom here on the trackpad and you can see things are very very fluid you can zoom in and out with no problems.

with XD you can open sketch files, you can also open Photoshop files and you will make all the conversion here for you to convert it to an XD document then you can start prototyping right away.

To create a new file you can go to file new and then here you can use some presets to create let’s say screen designs for your mobile app or for your website or any other screen design. You can use powerful tools like the repeat great tool that allows you to repeat elements very easily visually then you can drag images from Finder to your grid or text also from Finder to your grid and every change you make to the grid will be reflected throughout the whole grid.

You can create symbols as well like for example the status bar can be a symbol and I can share that across all the artboards and if I make a change to one instance all instances will update.

In symbols you can override text and you can also override images, you can replace symbols by just dragging them from the assets panel into the symbol on your canvas and replace all instances for you.

The assets panel is where your design systems will evolve will exist Here you can save character styles you can save colors you can save symbols and you can even name them so you can give names to organize your design system.

Then if you make a change to one element here let’s say I changed this color to another color you will update everywhere on your document so this is very easy for you to replace entire sets of fonts or colors within the same project.

If you have shapes in XD you can drag images from Finder from the browser into that shape and you’ll become the fill and then if you double click you’ll be able to edit move it around.

You can also play with strokes in XD for example have strokes and create this circular stroke that can represent a chart very cool.

When it’s time to prototype you can very easily go to prototype mode so you don’t have to export anything, you don’t have to create any hotspot it’s very easy just go up here and click on prototype mode and you can start creating wires, once you create a wire, you can click that on the play button to start previewing your work, you can also have fixed elements in our prototype so it doesn’t matter if they’re in a different Z order so we can have things that stay fixed but they’re behind you can be very creative even with background blur, so background blur is there for you even with fixed elements.

You can also use overlays for example here I have this keyboard and I can share that with multiple artboards whenever I type on a text field here I wanna to see that artboard showing up is an overlay and that will do the magic for me.

When it’s time to share your prototype you can go here on Share and then you can publish a prototype link to share with any stakeholder and here you can have a public link you can add a password to our link and you can even share privately with specific emails, then just click there and anyone with this link will be able to give you comments, not only comments but you can also add pins to very specific areas on your prototype.

Once your project is validated and you got all the feedback you made all the iterations that you had to do then you can share your work with developers via design specs so you go here again on share and you publish a design spec and then any developer that has access to this link will be able to see the colors measurements character styles and all the information they need to start developing the app or website.

And to end if you have a mobile device iOS or Android phone or tablet you can plug via USB and then all the changes you make here are reflected in real time as you see that on the phone.

So that’s it I hope you enjoyed this presentation. If you have any feedback please go to adobexd.uservoice.com or share your feedback on twitter using hashtag Adobe XD.

Thank you very much for watching and happy prototyping.