Developers don't need to have XD installed to access the assets and all the info necessary to build the app or website. Once prototypes are validated by users or stakeholders, generate a design spec link for devs to access measurements, colors, and assets that are downloadable directly from the browser.
- [Instructor] Now that you worked on your designs, on your prototypes, you created all the interactions, defined the flow, then you shared your work with stakeholders as a link, got all the feedback, comments, pins, then you went back to your designs, to your prototypes, you validated everything, now that everything is ready, it's time to share this work with developers. And we can do that in XD as a design spec link. So we can publish a design spec here. The first thing I wanna do, is as soon as I have this set of elements selected, I wanna make sure I have my first, my hallmark board there selected.
Remember, this is the flow that I will publish to my developer, and I'll go there under share, publish design spec. I'll create a brand new link here, and one thing that I'll do is, as you can see, I'll define this for iOS, so you use iOS measurements. Let's create a new link there. It's now uploading all the information for my developers, information on color, character styles, measurements, everything that they need to build the app. Now, any developer that has access to this link will be able to see your flow, hover here to see how your flow is, then you can click in one art board as a developer.
I can see the colors that are used there. I can see the character styles. If I select something, and hover other elements, I can see the distance. And let's say I select this big block of text. As we can see here, I get information on my text, font, the color, and content. And anytime you click on something here, let me click here, that gets added to memory. So I can copy the color, the font name, and then I can go to my code as a developer and paste it.
Pretty useful. I can also see information about what the next art boards are, or triggers, to help me build that as a developer. But now let's say I, as a developer, I need this icon to build my app. And of course I can ask you to export that single asset from XD like you learned before, but we can do a better job than that. So here, as a developer, I'll tell my designer, please make this downloadable, and then I can pin.
So this is the developer asking for that information. So you can have conversations with developers. I'll position right there. As a designer, I'll get the notification, I'll go to my design, and then I can click there in design mode. I can open my layers panel. This is the asset. Let's rename this to pin icon, select that. What I need here is the same process that I did in the previous exercise.
I just need to mark this for batch export. Then if I publish that design spec and update my link, now the asset that's marked for export will also be exported and available there for a developer to download right from the browser. And click here. You'll see that I can see information about my selection there, and as a developer, I can download, as in this case it's an iOS project, so let's pick PDF.
And then if I hit download, I download that PDF. So technically, the developer that has access to this link doesn't need to have XD installed. They can get everything they need right here. Maybe the last thing that they might need is let's say as a designer, I also worked on a layout grid here to help with the design process. And if I share this, I'll update that. If I go back to my browser here and refresh, the developer will have access to measurements, colors, assets, and your layout grid.
The same layout grid that you defined as a designer, so they can know where this are, and if you're using frameworks like Bootstrap that has 12 columns, they can really get used to it and know exactly where everything is on your design. So this is how you can share information for developers in Adobe XD.
- 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