What is the Jira Ticket Plugin for Figma and why you should use it

The Jira ticket plugin for Figma is a tool that connects designers, developers and project managers in projects by integrating their design work in Figma with their project management workflow in Jira. With this plugin, designers can create new Jira issues or link existing ones to their Figma designs. This streamlines collaboration and improves communication between designers and developers.

Why You Should Use the Jira Ticket Plugin for Figma

The Jira ticket plugin for Figma helps you manage your software projects more efficiently by keeping your design work and project management in sync. By linking Figma designs to Jira issues, you can reduce manual updates and improve communication between designers and developers. You can view and edit Jira issues directly from your Figma designs, which saves you time and keeps you organised!

How I integrated a new way of working

In this part, I'm going to show you how I made the integration of the plugin work.
Some images will be blurred for the sake of privacy, thank you for understanding.

Setting up the Figma file

First, I created a Figma file that corresponded to the same pages as the back office we are redesigning. I did this because the developers and project managers are very familiar with the back office. This assisted them in navigating the Figma file in case they got lost or needed to find something that had not yet been assigned to a ticket.

Organising the tickets

You may have noticed an extra page called 'jira' tickets. This is were the designers import all the tickets and organise them.

Because the priority level is not displayed on the tickets (at the time of writing), we decided to add it ourselves and sort them in this manner, with the colours corresponding to the priority of the tasks. When you are ready to begin designing, you can cut and paste the ticket into the appropriate location, or you can right-click the ticket and select 'move to page', then select the appropriate page.

Clean file, clean design

So, in order to create a better overview of the ticket we're working on, we created a template that we followed to ensure that the layout stayed consistent and there weren't wireframes all over the page.

The template consists out of 3 parts:
1/ A place for the ticket
2/ A place for the designs
3/ A place to add documentation

Personally I prefer this over using comments, which in my opinion are better for quick questions but not complete documentations for devs to understand.

Finally, I'd like to point out that this method of using the ticket and the template works for our workflow and does not guarantee that it will work perfectly for your team. However, you can use this as a guideline to fine-tune it for your specific workflow.

If you have any suggestions or want to show me how you used it, do not hesistate to contact me at Ralph@mirahi.io!

My experience with the plugin

Despite having a clear overview of the Figma file before using the Jira ticket plugin in my current project, I frequently had product owners (POs) or developers asking me where to find the designs they needed to review or create. After researching how others dealt with similar issues, I came across the Jira ticket plugin while looking for solutions to this problem.

After seeing how the plugin worked, I realised it could be the solution we needed. The plugin works flawlessly, is quick, and has greatly aided our team. For example, I always place created tickets directly above the design to which they are linked, and the team decided to do the same, so there is no confusion about where to look or where to place tickets.

To ensure that the plugin was as effective as possible, I demonstrated it to the entire team so that they could understand how to use it. After using the plugin for a trial period of one week, I received only one message asking where to find designs, which was a significant improvement compared to the past.

My conclusion

If you're a designer working with people who are not familiar with Figma or working on a very large project, I highly recommend using the Jira ticket plugin for Figma. It's an excellent tool for streamlining collaboration and getting rid of communication problems in your current and future projects.

How to Use the Jira Ticket Plugin for Figma

To use the Jira ticket plugin for Figma, you need to have a Jira account and an API token. Follow these steps to set up and use the plugin:

1/ Install the plugin from the Figma community plugins section.

2/ Authenticate your Jira account within Figma by entering your Jira site URL and API token.

3/ To create a ticket within your figma file you will need to do the following:
  1/ Open the plugin in your figma project
  2/ Fill in the number that is associated to the ticket in Jira and then click ”add   ticket”. For me it would be DES-25.

The plugin will then generate a ticket within figma which then automatically links the figma file in your Jira ticket

4/ To view or edit a Jira issue linked to your Figma design, click on the "View in Jira" button in the plugin menu.

If you want a more details explanation on how it should be installed, there is a video about it: Demo video

A big shout out to the creator Lukas Bittner, for this great plugin!