Jira Zeplin



Integration

Installing the Zeplin for Jira app Learn how to install the Zeplin for Jira app in your Jira Software Cloud instance. Collapsed Expanded 1.1.3 Jira Server 7.2.0 - 8.9.1 2020-05-28 Fix screen modal issues and support new Jira versions Download Version 1.1.3. Released 2020-05-28. Supported By Zeplin. Free. Commercial. Zeplin is a connected space for product teams where they can share designs, generate specs, assets and code snippets, tailored for iOS, Android and Web.To get started using Zeplin together with Jira, Enable Zeplin through Atlassian Marketplace. Head to a Jira issue and enable Zeplin. I am project manager and an interdisciplinary designer passionate about technology. I appreciate the order and things well done, check out the projects that I have done!

How do you work with developers? I'm working in a project where I'm the only designer and we are using Jira to do the sprints and track our tasks.

I design everything using Sketch and I do it like this:

  • Create a Page for each 'section' that we are going to have (ie. Home, Products, Detail, etc)

  • Create an Artboard for each 'state' (Dashboard, Element hover, Element selected, etc) and each 'size' (1.25x, Desktop, Tablet, Mobile)

Then I want to share everything using InVision but here's where I get to the first problem. To do the Sketch + InVision integration I will need to have a file for each 'size' that I want (right?). I think that with Sketch Libraries this is going to be 'easy', but still, not sure if this is the best approach.

I send all the views to Zeplin so developers could have the specs and I post the link to Zeplin on Jira.

This is my current flow, do you do something similar or there's something I'm doing different?

Login to Comment

Jira Zeplin

You'll need to log in before you can leave a comment.

Register Today

New accounts can leave comments immediately, and gain full permissions after one week.

Zeplin for Visual Studio Code lets you quickly access the designs you’re working on, follow design changes, open the Jira issues they’re attached to —all from within VS Code. 🔌

Installation

  1. Install Zeplin from Visual Studio Code extension marketplace.
  2. Open the new Zeplin sidebar.
  3. Login to Zeplin.

Zeplin Jira Server

Usage

Access designs you’re working on

The Zeplin sidebar in Visual Studio Code lets you access the designs you’re actively working on.

Get started by adding a project. Once you add one, all the screens and components in the project will be listed in the sidebar. You can quickly open each screen or component in Zeplin by clicking the “Open in Zeplin” icon in each row. Similar to adding projects, you can also add styleguides and access all their components.

You can also pin screens or components you frequently visit, and they will be listed under the “Pinned” panel.

Follow designs changes

The Zeplin sidebar lets you to see which designs have been updated since you last visited. Once you add a project, Zeplin will list changes to screens and components under the “Activity” panel.

Open Jira issues

Using Zeplin for Jira, you can attach Zeplin resources to Jira issues. This enables two-way collaboration—when you’re viewing a design in Zeplin, you can open the related Jira issue.

The Zeplin sidebar lets you view which resources are attached to a Jira issue by displaying a Jira icon in the row, and clicking the icon opens the Jira issue directly. Coupled with the “Pinned” panel, you can quickly access Jira issues of designs you frequently visit.

Manage Connected Components configuration

Zeplin Jira Integration

Connected Components in Zeplin lets you access components in your codebase directly on designs in Zeplin, with links to Storybook, GitHub and any other source of documentation based on your workflow. 🧩

Zeplin for Visual Studio Code makes it easier to create the JSON configuration file that connects components in your codebase to their design counterparts in Zeplin. Check out our getting started guide for Connected Components.

Contributing and Issue Tracking

See CONTRIBUTING.md for details.