Posted   by 

Photoshop Zeplin



Getting Started

Then when you select any layer inside an artboard (using the selection tool, “V”) the Zeplin panel will display a shiny big button to start the export process. Here's how a Photoshop file with artboards looks like: Exporting designs from Photoshop Exporting assets from Photoshop.

In order to publish designs from Photoshop to Zeplin, you will need to download the desktop app.

Photoshop Spline

When you download the desktop app, Zeplin automatically installs a plugin on Photoshop. If you’re not seeing the plugin, you can install it manually by following these steps for Mac or Windows.

  1. Adobe Photoshop - The industry standard in design, photography, video editing & more. Sketch - Professional Digital Design for Mac. Zeplin - Collaboration app for UI designers and frontend developers.
  2. Zeplin 101 🤓 +7. 48 articles in this collection. Photoshop Integration +1. 8 articles in this collection Written by Pelin, Didem, Berk and 1 other Global Styleguides +4. 18 articles in this collection Written by Hande, Tuba, Noelis and 4 others Component Variants. 10 articles in this collection.

☝️ It is not possible to publish PSD files directly without using the plugins.

Enabling the plugin

Photoshop Zeplin

After downloading the desktop app, you can enable the plugin from Photoshop menu up top at “Window > Extensions”.

If you do not see Zeplin under “Extensions,” you can try installing the plugin manually by following the details here:

Publishing your designs

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

Seeing file location

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

Related articles:

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 →
253px
Radius, 2px
#419BF9
Roboto, Medium, 24px
#FFFFFF

Leading product teams use Zeplin

Explore why →

Photoshop Zeplin Plugin

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.

Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

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 To Zeplin

Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.

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!

Zeplin Photoshop Server Cannot Be Reached

open platform

Photoshop Zeplin

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