As one of the first product managers for XD, Demian covers why Adobe is building XD, including its core principles: 1) lightweight and approachable, 2) remove friction everywhere, and 3) transparent and open, as well as quality over scope and excellence over shortcuts.
- [Instructor] Adobe XD is a brand new tool from Adobe that allows designers to design at the speed of thought. XD is the only end-to-end solution for designing, prototyping, and collaborating on user experiences. It runs on Windows 10 and Mac OS. It has companion apps for iOS and Android phones or tablets. And it has a web component where it can share links with stakeholders to get feedback as comments, as pins, then it can go back to your design, it can go back to your prototypes, make all the necessary changes, and once it's all validated, then you can hand it off to developers using design specs as a link.
A lot more than a tool, XD's a platform for designers to work with stakeholders to get feedback and iterate, and once it's all validated, you can hand it off to developers as a design spec so that they can build the app or website. XD has three main modes, design mode, prototype mode, and share. In design mode, you can do your low fidelity designs like wire frames. You can do your high fidelity designs for websites, mobile apps, even watch interfaces, or any screen design. Low fidelity or high fidelity.
Then with one click, you can go to prototype mode and start creating our interactions, connect the screens to create the flows, or even have reacher prototypes with fixed elements, overlays, and micro-interactions, animations that take place within the same art board. Then you can share that as a link for stakeholders to review. Go back to your designs, go back to your prototypes, and once it's all validated, you send it to developers as a design spec-link. XD has an API Layer, so you can install plug-ins to extend its functionality.
And this is all part of Creative Cloud. So if you need more complex factors, you go to Illustrator. If you need more complex bitmaps, you go to Photoshop. You can bring that back to XD via Creative Cloud Libraries, or you can open Photoshop files and Illustrator files in XD and start prototyping right away. XD was built on top of some core principles. I was one of the first product managers, and I remember how obsessed we were and still are, in terms of performance and quality. So let's take a look at the principles.
The first one is lightweight and approachable. Lightweight meaning it has to be fast. So we're doing everything we can to keep the performance and improve the performance at every release. Approachable means it has to be easy to learn, easy to use. Remove friction everywhere. As we look at the design challenge today, that process is full of frictions. So in order to get the job done, designers have to go from tool to tool, and this is very painful. So we're looking at the entire process, and we're trying to improve the pieces, and sometimes replace entire parts of the process.
Transparent and open. Transparent meaning that we have a public backlog out there, in UserVoice. If you go to AdobeXD.uservoice.com you can suggest a feature request, you can file a bug. And open means you can extend the functionality so it's an open platform. It can install plugins in XD and go from there. And three more things, first, excellence over shortcuts. So if there's a very hard path, but it means a better valid to the user, we're gonna take the hard route. Quality over scope.
So since the Beta days, every feature that was released had a very high quality bar, and we're not just adding features on top of features. We're really focused on quality first. Continuous improvement, every month there's a new update to XD. We ship updates every month, so every month there's a new set of valid being delivered. And sometimes we change things after it's released, so we're always learning, we're always iterating. And you can learn more about the principles of XD on this link. XD follows the iterative design process.
So you can design your low fidelity or high fidelity designs. You can jump into prototype, and then you can iterate. You can go back to design to make changes. You can go back to prototypes and iterate a lot. Then you can share with stakeholders, as a web link, to get more feedback, to get comments, to get pins, and iterate designs, iterate prototypes. And once it's all validated, then you can hand it off to developers as a design specs link. So this is Design Mode in XD, where you can do your low fidelity and high fidelity designs.
Then with one click you can go to Prototype Mode to start creating your interactions. Then you can share links for stakeholders to review or design specs for developers to consume with measurements, colors, character styles, and even assets. So developers don't even need to have XD installed to get everything they need to build the app or website. If you're running XD on mobile, and you're designing on a Mac, you can connect your device with USB and get real-time preview. But then if you're using Windows 10 to design your prototype, you have to host your XD documents in Creative Cloud files, in your file system.
And then load them from your mobile app. So that's XD, now let's learn why prototyping is so important.
- Adding, removing, and recording interactions
- Using overlays and fixed elements
- Creating rich animations within the same artboard
- Using timed transitions and drag gestures
- Previewing mobile projects on iOS or Android devices
- Sharing prototypes on the web for feedback
- Creating design specs for developers
- Exporting assets as PNG, SVG, PDF, and JPG
- Export designs to After Effects
- Delivering presentations with XD