- Adobe XD and Zeplin can be categorized as 'Graphic Design' tools. According to the StackShare community, Zeplin has a broader approval, being mentioned in 165 company stacks & 48 developers stacks; compared to Adobe XD, which is listed in 38 company stacks and 44 developer stacks.
- Downgraded Adobe XD to 35 version (before it was 36 version) 3. Restarted my MAC 4. Downloaded Zeplin, installed it 5. Opened Adobe XD 35 version and created a new document on my computer, save it and then tried to export artboard to Zeplin. It asked me about something to allow, I clicked OK and Zeplin offered me to select a project 🙂.
Zeplin provides capabilities much needed by developers including clarity on “finalized” designs, an accessible design workspace friendly to non-designers, added structure to design screens and of course tailored technical specs built by developers for developers.
☝️ To export components, due to a technical limitation, make sure the Adobe XD file is saved locally on your device, and not on Adobe Cloud.
You now can export your Adobe XD components directly into Zeplin and they will be listed under the Components tab of your styleguide.
Exporting components is very similar to exporting artboards from Adobe XD. Initially, you need to select the components you want to export:
1. Select one or multiple components that are located in the pasteboard area, outside of an artboard. If your components are not in the pasteboard area, you can select them from the Assets panel of the file and drag them out to the pasteboard area:
2. Save the file manually. (Make sure that it's saved locally on your device, and not on Adobe Cloud. This is due to a technical limitation we're currently working on with the Adobe XD team.)
3. Select “File > Export > Zeplin” from the menu, or use the shortcut “Command/Ctrl + Option/Alt + E”.
Once the export process ends, they will be listed under the Components tab of the styleguide.
☝️ If you see the “No artboard or component selected” error message, saving your Adobe XD file and re-exporting it should do the trick.
Generating assets from components
If you'd like these components to be available as assets, you will need to mark them for export. You can learn how to mark layers for export here: Exporting assets from Adobe XD
Related articles:
Announcing new features for product teams
Introducing Component Variants, Zapier Integration, and new Notifications experience. Learn more.
Designers have published 6,860,86764 Figma, Sketch and Adobe XD designs to Zeplin for development and collaboration in the past 30 days.
Get started for freeGo to projects →Exporting Style Guide From Xd To Zeplin
Leading product teams use Zeplin
Explore why →Publish designs for development
Go beyond specs. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop.
Developers get a 'locked' design to build from, while designers can iterate on the next great release.
Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.
Bring together the multidisciplinary team
An accessible workspace that is friendly to non-designers including developers, product managers, copywriters and more.
Zeplin also helps the team collaborate by providing much needed organization and structure to native design files.
Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.
Extend your design system
Drive consistency by surfacing design system elements where developers can easily reuse them. Then, go even further by using Connected Components to extend designs to code!
open platform
Xd Components To Zeplin
Connect your tools and build custom workflows
Leverage your investments in tools like Jira, Trello, Slack and VS Code through deep integrations with Zeplin.
With the Zeplin open API and webhooks, you can also create custom workflows to support your specific needs.
Convert Xd To Zeplin
Deliver on the promise of design