The Organization plan’s pricing is based on the number of designers and developers on the team, basically anyone who needs to upload designs or access specs, assets or code snippets. The base fee includes 12 seats, along with unlimited projects, components and versions. All Collections. Photoshop Integration. Photoshop Integration +1. 8 articles in this collection. Setting up proxy for Photoshop plugin on Windows. When you select an individual layer or a group in Photoshop, you’ll notice an additional button on the Zeplin panel that lets you mark this selected layer/group as an asset. After marking it as an asset, Zeplin exports all the necessary images with different scales, formats and suffixes, depending on the platform you’re designing for. Photoshop mockups can be exported to Zeplin in a few easy steps.Whenever you download the Zeplin Mac or Windows app it will pre-install the Photoshop plugin. You can only import from either Photoshop or Sketch. Illustrator support has been requested, but I doubt the developers will ever bother adding that functionality. With regards to Photoshop, I don't know of a way to preserve layers from Illustrator. I've exported artboards from Photoshop to Zeplin but I feel like the process is clunky.

Announcing new features for product teams

Introducing Component Variants, Zapier Integration, and new Notifications experience. Learn more.

Designers have published 6,860,867

6

4

Figma, Sketch and Adobe XD designs to Zeplin for development and collaboration in the past 30 days.

Get started for freeGo to projects →

How To Use Zeplin With Photoshop

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.

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.

Photoshop Spline

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

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.

Deliver on the promise of design

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

Installing the plugin

Photoshop 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?

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:

How To Install Zeplin In Photoshop

• 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”

Photoshop Zeplin Extension

Related articles: