Understand the overall XD UI, which is 100% contextual, being able to locate the main areas of the Desktop app: Design mode, Prototype mode, and Share (to share prototype links with stakeholders and design specs with developers).
- [Narrator] Let's get started by taking a look at the UI in XD. Here on the left, you have your design tools. As I hover, I can see the shortcut in parenthesis the line tool, the pen tool the pen tool is really powerful you'll see that in the next video, the tax tool, the artboard tool to create new artboards and the zoom tool. One important piece here is that you can access your assets panel here on the bottom left or you can have multiple views in your layers panel here on the bottom left as well.
One thing to notice is that every time I select something in XD I can see the properties of my selection on the right here in the property inspector. So if I change my selection to something else, that changes, if I do tax, for example, I can see tax properties so that's the biggest difference when you look at Adobe tools XD is 100% contextual. So here you can see that I have my alignment tools I have repeat grid button tool I have some operations I have my measurements there then I have response service size features, tax because I have tax selected and under appearance you can see things like opacity, fill, order, shadow, background blur, all of that.
Here I am in design mode, if I jump into prototype mode I can then start prototyping things and we're gonna learn how to do that in the next course where we cover all the basics of prototyping and sharing in XD, then you have information about mobile devices connected you have your preview window here where you can play with your prototype then you have the share functionality here in XD where it can publish prototype links for stakeholders to review, it can also share design specs as a link for developers to consume.
Colors, character styles, all the assets and measurements with one link you can manage all the published links as a website so you can get links, you can revoke links, all within this process or you can record a video of your interaction right here from XD. Then you get a mp4 and you can share with stakeholders. You have the main menu here, on Windows this is available on the hamburger menu on the top left, you can access plugins you can see all the shortcuts here.
One interesting thing on the Mac, every time you need to find something you can go to Help and then let's say I'm looking for mask, how do I mask things in XD, I can start typing here and then I can see the menu item right there. Again, this is only available on the Mac. Nice, now let's get started with the artboard tool to create artboards in XD.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins