☝️ 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.
- In this quick video I show you how to easily export your designs from Adobe XD straight into Zeplin, making your dev a much happier person!Software: https://.
- 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.
Exporting components is very similar to exporting artboards from Adobe XD. Initially, you need to select the components you want to export:
Adobe XD is a vector-based prototyping tool made by Adobe Inc., which is used to create user interface designs and prototyping user experience. Developers describe it as a “UX/UI design collaboration tool.” On the other side, Zeplin XD is considered a collaboration tool for front-end developers and UI designers. Zeplin exports artboards and components as 2x by default to support Retina displays. This behavior has an exception for Adobe XD plugin exports. If you have an artboard/component bigger than 8000x8000 pixels, Zeplin exports it as 1x instead of 2x. With the Zeplin + Adobe XD integration you can easily share your XD designs and specs to give your team the insights they need and provide comments. Once you export, your team will have access to the designs in an organized way, with all the assets and code snippets to make the development process more streamlined.
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
Zeplin Adobe Xd Software
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
Zeplin Adobe Xd Crack
Adobe Xd Zeplin Components
Related articles: