Almost over a year ago, Zeplin provided a new door for developers to build their extensions to generate and display code snippets from different design resources. Since this great initiative.
☝️To be able to export designs from Adobe XD to Zeplin, you need to have the desktop app installed on your computer.
When you have the latest versions of both Adobe XD and Zeplin installed, you will see a new menu item in the Export menu of Adobe XD. Follow these steps below to export a layer or artboard from Adobe XD to Zeplin.
- A vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps.
- How can you handoff design from Adobe Xd with Zeplin Zeplin now integrates with Adobe XD CC, If you are working with Adobe XD now you can do smooth handoff w.
- Chat about it in Slack, attach it to issues in Jira, export it to Zeplin — app integrations connect XD to all the tools your team uses. Explore new frontiers Tap into the future of design with integrations in VR interfaces, voice app testing for Amazon Alexa and Google Assistant and micro-apps without code.
- Zeplin is a connected space for product teams where they can handoff designs and styleguides with accurate specs, assets, code snippets automatically. Export your file in one click using our Adobe XD and Adobe Photoshop plugins, generating development resources automatically.
Select any layer/artboard in your XD.
Select “File > Export > Zeplin”.
The shortcut for the last used export option is ⌥⌘E. So, next time you want to export designs to Zeplin, simply select the artboards and press Option, Command, E.
☝️ Use Ctrl + Alt + E on Windows.
This will take you to Zeplin where you can select the project you want to publish the artboards into. Designs are now live on Zeplin, along with all the specs, assets, and code snippets that developers can make use of.
Troubleshooting Export Issues
⚠️ If you’re experiencing an export issue, you can give the new Zeplin Adobe XDplugin a try.
You can install the new plugin from https://zpl.io/xd-plugin. Once the plugin is installed, you can export your designs from the menu up top: 'Plugins' > 'Zeplin for XD (Beta)' > 'Export Selected...':
Seeing File Location
Zeplin shows the file location on the right panel of the screen if you're the user who exported that screen and you're using the same machine that you used to export. You can directly open the design file in XD by clicking on the file name.
☝️ It's sadly not possible to import XD files directly into Zeplin just yet. You can only export your designs from the Export menu of Adobe XD.
Related Articles:
Features
Collect team projects and styleguides under one roof
Organization members can browse and join organization projects and styleguides as they wish. This also means that you can simply share a link to a project, without inviting manually.
Create unlimited projects
Organization members (who have the permission) can create unlimited projects, using their own accounts.
Assign roles, manage permissions
Assign roles to organization members to define who can create projects, edit resources, invite/remove members and so on.
Access unlimited versions
Organization members can access unlimited versions per screen.
Zeplin Xdm
Shared billing
Organization admins can access organization’s billing information as necessary, this way this information is not tied to a personal account.
Zeplin Xd Pro
Restricted members
Setup restricted members—external developers, designers—who can only access certain projects.
Zeplin Xdrive
Priority support
Zeplin Components Xd
Great support is a part of Zeplin’s DNA, but organization members will have the priority.