Photoshop To Zeplin

| Posted on by



Zeplin is a perfect place to have an up-to-date repository for pixel-perfect comps which anyone can see and comment on. Everybody is loving to work with Zeplin:) AJ M. Zeplin is a perfect place to have an up-to-date repository for pixel-perfect comps which anyone can see and comment on. Everybody is loving to work with Zeplin:) AJ M.

To publish your designs from Photoshop to Zeplin: Select any layer/artboard in your Photoshop file Open the plugin and click “ Export selected artboards ” Select your project or styleguide then click “ Import ” to start the export process. The handoff is facilitated by taking a design from Adobe XD, Photoshop, Sketch, or Figma and exporting them into a format that can quickly generate style guides, code snippets, assets, and specs. This article offers a quick walkthrough for creating a prototype with Zeplin app used by leading product teams and introduces an alternative.

⚠️ Make sure that you're running Photoshop CC 2015 or later and Zeplin is on the latest version.

Installing the plugin

Photoshop

When you launch Zeplin's Mac app, the Photoshop plugin should be installed automatically. If not, you can install it from Zeplin's menu up top: “Zeplin > Photoshop Integration > Install Plugin…”

☝️ If the plugin still doesn't appear, make sure that the 'Enable Generator' option is selected, from the PS menu > Preferences > Plug-Ins

Photoshop Zeplin Extension

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

If installing from the menu didn't work, you can try installing the plugin manually. Two pieces need to be installed, a plugin, and a panel.
The plugin:

  • Download the plugin from here.

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

  • Paste it under the Applications/Adobe Photoshop CC 2019/Plug-ins/Generator (update the Photoshop version in the directory if you are using an older version. i.e. Applications/Adobe Photoshop CC 2017/Plug-ins/Generator ).


And finally, the panel:

Photoshop Zeplin 書き出し

  • From the Finder menu, select “Go > Go to Folder…”, type ~/Library/Application Support/Adobe/CEP/extensions , and click Go. (If the CEP directory doesn't exist, you can create it manually.)

  • Download the panel from here. Reading class resources miss e. macs class.

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

  • Paste it to the revealed folder in Finder.

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

Exporting Assets From Photoshop To Zeplin

Related articles: