Join Demian Borba for an in-depth discussion in this video Publish as PDF or web prototype, part of Developing a Design System with Adobe XD.
- Xd can help you share your work, your designs, and your design system. So let's say I want to have my two designs here, my icons there, and I also add an artboard here for my pattern library. So, I'll make something bigger like that. I'll double-click on the title to get that in. All these activate a grid, and I'll do a 64, too big, to make bigger columns.
Make the color darker, because I have a lot of white components. And this is where I'll save my components, where I'll place my components. So, I can bring that card, and I can even add some titles, some description here to describe what it is, what it does. I'll write my buttons. I can even create organisms like a full header and add it here. Let's do that. Or a footer. So I'll do that with this footer.
I'll select everything, convert it to a symbol, now it's available there, and I can then make my area there bigger to fit my footer. And you can see I'm building my Lego parts to reuse later. Wonderful. And I can add more as I create my project. Remember the design system is an iterative process.
Now, if you need to share this, you can do it as a PDF, so in order to do that, you can go to File>Export. I don't have anything selected, and when I do it, let's create a folder here for my PDF. And when I do it, I can select PDF here. I can export all of my artboards as one single PDF, and hit Export All Artboards. Now if I go there, I'll see one PDF with my design, my mobile design, my icons, and my components, my pattern library.
I can then share this PDF and get feedback. The other way of sharing this is via web link. So I can go all the way to the right, click on Share Online, give it a title, DDTS Project. I can add a thumbnail, so I can grab an image to be my thumbnail. I can even allow comments and I can create a link.
Now, all these assets are being uploaded to Creative Cloud, and now I have this public link that I can share with anyone. I have four artboards. I can see the web design here, available in this link. I can scroll. I can see all my work here connected in one place, can go all the way to the top. Every URL here is a unique URL, so if I move to another artboard, I get to that artboard, and then if I have 100 artboards, I can share a specific link, and it'll take me directly to that artboard.
Let's say I want to present this. I can then go to full screen mode, and then I'm not having all these elements that can create distraction, and I can present. I hit "S" to go back to this mode. So, this is how you create a PDF or a web link to share your work with stakeholders and get feedback. Now let's see how you can export individual assets for designers and developers to make it happen.
- Managing your project
- Managing typography and colors
- Pattern library with symbols
- Creating a CC Library in Photoshop
- Consuming colors and character styles
- Using linked and unlinked bitmaps
- Exporting assets
- Gathering feedback