• Zeplin Plugin For Photoshop
• Zeplin Photoshop Plugin

Here's a guide on how to export your Photoshop designs to Zeplin.Thanks to Designmodo for the wonderful 'Slides' Photoshop resource: http://designmodo.com/sl.

This is where Zeplin enters the scene. Zeplin is a collaboration tool for UI designers and front end developers. It goes beyond the design workflow and helps teams with the design hand-off. It allows designers to upload their wireframes or visual designs straight from Sketch and add them to project folders in Zeplin. When you launch Zeplin's Windows app, the Photoshop plugin should be installed automatically and you should see the Zeplin plugin in Photoshop. If the plugin is not visible, you can install it from Zeplin's menu up top: “Help Install Photoshop Plugin” Did you try to install via the menu and didn’t work?

⚠️ Zeplin currently only works for Photoshop CC 2015 and up, make sure you have a supported version installed.

Zeplin shows the location of the file containing the screen if you are the same user who exported that screen and using the same machine (computer) used to publish your design. You can directly open the design file in Photoshop by clicking on the file name. Next up: Collaborating with your team Exporting assets from Photoshop. Is it possible to add Zeplin file and exporting? For example, how it's done in Photoshop - https://support.zeplin.io/en/articles/1067453-exporting-designs-from-photoshop.

Zeplin Plugin For Photoshop

Installing the plugin

When you launch Zeplin's Windows app, the Photoshop plugin should be installed automatically and you should see the Zeplin plugin in Photoshop. If the plugin is not visible, you can install it from Zeplin's menu up top: “Help > Install Photoshop Plugin”

Did you try to install via the menu and didn’t work?

If installing from the menu doesn't work, you can try installing the plugin manually. This requires two different components to be installed, the plugin and the panel.

To install the plugin:

Zeplin Photoshop Plugin

• Download the plugin from here.

• Unzip it and copy the folder called io.zeplin.photoshop-plugin.

• Paste it under Photoshop’s Plug-insGenerator folder.

And finally, the panel:

• Download the panel from here.

• Unzip it and copy the folder called io.zeplin.photoshop-panel.

• Press Win+R, type %APPDATA%AdobeCEPextensions , and press enter. (If the CEP folder doesn't exist, you can create it manually.)

• Paste it to the revealed explorer window.

Now when you restart Photoshop, you should see the Zeplin plugin in the menu up top: “Window > Extensions > Zeplin”

Related articles: