🤝 Keep design and dev in sync with Figma for Jira ✨

[#1]

Hi Atlassian Community

Today, we are excited to announce the general availability of the newly enhanced Figma for Jira app on the Atlassian Marketplace.

Modern software development is a team sport that spans multiple disciplines, and design plays an essential role within the team. However, there are often challenges during handoff between design and development. This is why we are thrilled to introduce a partnership between Figma and Atlassian that aims to improve the design-to-code collaboration proces.

Let's take a look at what's new to the Figma for Jira app and how the integration can bring your design and development teams closer together.

Keep work in-sync while staying in your flow

With the Figma for Jira app, teams can link designs to Jira and see a preview of the Figma file, frame, or prototype directly in the Jira issue. Paste the Figma URL directly into the design field of the Jira issue, and add as many designs as you want to give your team all the context they need in Jira.

Teams that are designing in Figma can use the Jira plugin for Dev Mode to link a design directly to a Jira issue without leaving Figma. Dev Mode is a new workspace in Figma for developers, and the Jira plugin makes it easy for teams to create new Jira issues from Figma while inspecting designs. When combined with the Figma for Jira app, teams can minimize context switching and work from the tool they prefer by linking designs from either Figma or Jira - and be confident that the Jira issue and Figma design are in-sync.

A bigger and better design viewing experience in Jira

Teams can now see a “design linked” icon in the Board view to quickly locate Jira issues that have a linked Figma design file. Hover over the design icon to see information about the linked design, when it was last updated, and easily access the Figma link or view the design directly in the expanded view in Jira.

We've also revamped the preview mode of Figma in Jira to offer a more immersive and interactive experience. Now, your team can zoom, pan, and interact with the designs in an enhanced view in Jira. This feature allows developers to have a better look and feel of the design, and everyone can see the latest design changes in an issue at a glance.

Unlock the power of real-time design updates in Jira

Teams can access even more powerful features of the integration after setting up their Figma for Jira app to enable real-time syncing between Figma and Jira.

One of these features is live design updates in Jira issues, which helps keep the whole team in context and in sync with the latest designs. The "design updated" status will indicate to your team if a design has been updated since their last viewing, ensuring everyone stays informed about the latest design changes.

See when a design is ready for development

A big challenge during the design and development handoff process is the constant back and forth between teams to verify versions and status of a design. With the Figma for Jira app, teams can see if a Figma design has been marked as “Ready for Dev” directly in the linked Jira issue. After setting up the Figma for Jira app, any new changes to the Ready for Dev status in Figma’s Dev Mode will be synced to the linked Jira issue. No more miscommunication over which design version is final – you’ll always know the status of the design in Jira.

Automate workflows in Jira with linked designs

After setting up the Figma for Jira app, teams will have access to design automations in Jira, which can help save time and reduce blockers during design and development handoff. Teams can set up automations to notify developers of changes to designs, transition issue statuses, and easily add labels to issues with designs. Say goodbye to manual processes and spend more time on work that matters. Learn more about how to get started on design automations.

Increase efficiency with JQL search

Once the Figma for Jira app is set up, teams can leverage Jira Query Language (JQL) to search for Jira issues with linked Figma designs. This feature enables teams to be more efficient and use JQL to prioritize tasks in Jira. For example, teams can leverage JQL search to quickly locate all the issues with designs that are marked as 'ready for dev' and have a 'To do' status. With JQL search, teams can easily find information, perform bulk updates, and export reports based on criteria related to linked designs. Learn more about JQL search for designs.

Learn from Jira + Figma customers

Curious about how other teams are using the Figma for Jira app for handoff? You can hear directly from customers such as One.com, Condé Nast, and Experian about how their teams use Jira and Figma to achieve design-development flow state in this new blog post from Figma Shortcut.

The teams at Atlassian and Figma have been hard at work to deliver the newly updated Figma for Jira app. As part of the process, we have been learning from customers how they use Figma and Jira to accelerate their design to code workflows. Here are a few insights from our customers:

We are able to seamlessly connect our UX work in Figma to the larger feature build managed by Jira. Having Jira and Figma connected helps us maintain fast responses, version control, and high quality work as our projects move through their lifecycle. – Daniel Zollo, Design Operations Manager at Shutterfly

We use Jira as our point of reference for design needs and Figma to define design decision and direction. Linking Figma designs directly into corresponding Jira tickets helps us prioritize design timelines and deliver when the designs are ready for development. – Linda Tran, Senior Product Designer at Sumo Logic

We hope these enhancements help simplify your team’s design and development hand-off process. Download the Figma for Jira App and Jira plugin for Dev Mode today to start connecting your design and development workflows! If your team already has the previous version of the Figma for Jira app installed, you can ask your admin to set up the app to access the latest features.

Does your team use both Figma and Jira? Leave a comment and let us know your experience with the Figma for Jira app!

[Rachel Tang]

woooo amazing partnership! 

[Jimi Wikman]

This is magic.

[Barbie Bibiana]

super awesome sauce ^__^

[Sofía Sagel Sánchez]

hey! not sure if it's a bug but whenever a link of a Figma prototype is attached to a ticket, Jira read it as a file link. Sometimes we need to attach both, the file and the prototype and Jira doesn't allow us.

Thanks!

[Roy Koren]

Hi,

Great work!

2 issues - 1*bug, 1*suggestion:

1. Bug (in my opinion) - when clicking on the "Add design" button, the screen stays stuck at the top instead of scrolling to where you add the Figma link.

2. Suggestion - if you link more than 1 item, I think it's better to have a list of links instead of the current state (it gets too complicated to find multiple designs), and also be able to directly link to a UAT, so you can click on different screens you would like to see in the design.

[Selino Valdes]

If you're stuck on an infinite spinner using Safari…
Try turning off the "block window" security feature.
#learning

[YY哥]

Hi @Annie Lu ,

Amazing integration. Thanks! After a try, I have two product suggestions:

• As a designer, I expect to update fields like assignee/label .etc and comment directly in Figma, instead of switching to Jira;
• For a design update, such as wording change, it doesn't need to notify or let developers know this update. I expect to notify them when I tag a change instead of any change. Currently, any update to the design file will be shown with edit date in Jira issue detail page.

Please consider them and thanks again.

YY哥

[Carlos Garcia Navarro]

This is great! Thanks for sharing!

[Claus Stadel]

Are you planning on makeing the "Design Preview" in Jira show dev-mode annotations, if you paste in a dev-mode link for you design? (maybe with a toggle to turn the on/off in the preview).

[Josh Shepherd]

This is an awesome feature. As someone who has team working in both products I love the power of this integration.

[Humashankar VJ]

Absolutely enchanting!