- We’ll use Photoshop, Adobe XD, Zeplin. I've taught over 220.000 students on Udemy and I'm a best-selling instructor! I've taught over 220.000 students on Udemy and I'm a best-selling instructor! You’ll learn about Material Design, the principles of color, spacing, and typography, tips and tricks, how to get design resources, and much much.
- This extension is developed using zem, Zeplin Extension Manager. Zem is a command line tool that lets you quickly create and test extensions. To learn more about zem, see documentation. This project is licensed under the Apache License, Version 2.0.
- 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.
- Why Avocode is the best Zeplin alternative for sharing and inspecting design files? 1) Easier hand-off without preparing layers. 2) You don’t need design tools. 3) Inspecting features are more advanced. 4) Unlimited projects.
☝️ 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.
Really all you need to do here with Zeplin is to upload your sketch or xd file to Zeplin and share the link with your developer. To better prepare the design files and make the whole handoff smoother, here are some of the things you can do. First, name everything.
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”.
Xd Zeplin
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
Zeplin Io Download
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
Xd To Zeplin Not Working
Related articles: