How to Integrate Figma with Jira (Step-by-Step)
Integrating Figma with Jira creates a direct link between designs and the engineering tickets that implement them. Instead of engineers hunting for the right Figma frame through Slack DMs or outdated bookmarks, the design is embedded directly in the Jira issue. This single-source connection reduces design-engineering miscommunication and ensures engineers always see the latest design.
This guide covers setting up the Figma-Jira integration, embedding designs in issues, and building a handoff workflow that keeps designs in sync with ticket status.
Step-by-step guide
Install the Figma for Jira app
In Jira, go to the Atlassian Marketplace and search "Figma for Jira." Install the official Figma plugin (by Figma, Inc.). This plugin adds a "Design" panel to Jira issues where Figma frames can be embedded. The installation requires Jira admin permissions.
Link Figma to your Jira instance
After installation, go to Jira Settings > Apps > Figma for Jira > Configure. Click "Connect to Figma" and authorize with your Figma account. The integration now allows any Figma file in your organization to be linked to Jira issues. All team members with Jira access can view linked Figma frames (Figma view permissions apply separately).
Link Figma frames to Jira issues
Open a Jira issue. In the "Design" panel (right sidebar), click "Add design." Paste the Figma frame URL (right-click on any frame in Figma > "Copy link to selection"). The Figma frame embeds as a live preview in the Jira issue. Engineers can click through to Figma for full inspection. The preview auto-updates when the design changes.
Link from Figma back to Jira
Install the Jira plugin in Figma: in Figma, go to Resources (Shift+I) > Plugins > "Jira." Authorize with your Jira account. Select any frame in Figma and use the Jira plugin to link it to a specific Jira issue number. This bidirectional link means designers can see ticket status from Figma and engineers can see designs from Jira.
Set up design status tracking
In Jira, add a custom field "Design Status" (dropdown: Not Started, In Progress, Ready for Dev, Needs Revision). Engineers and designers update this field as work progresses. When "Design Status = Ready for Dev" and the Figma frame is embedded, the story is fully ready for engineering pickup. Add this field to the sprint board card display.
Create a design handoff checklist
Add a checklist to your Jira story template: Figma frame linked, design reviewed by PM, edge cases documented, error states designed, mobile variants included. This checklist ensures complete design handoff before the story enters an active sprint. Stories without complete handoff checklists should not be pulled into the sprint.
Use Figma Dev Mode for inspection
Figma Dev Mode (available on paid Figma plans) allows engineers to inspect designs for exact values (spacing, color tokens, font sizes) and export assets directly from the browser. Link to Figma Dev Mode from the Jira issue description for engineer self-service — this eliminates many design-to-engineering clarification questions.
Common mistakes
Linking entire Figma files instead of specific frames
Linking a Figma file URL shows the entire file, which is overwhelming. Always link to the specific frame that corresponds to the Jira story. Right-click the frame > "Copy link to selection" to get a frame-level URL.
Not updating Figma links when designs change
If the design changes significantly, the linked frame URL may point to an outdated component. When designs are revised, update the Jira link to the latest approved frame. Add the Design Status field to track when designs need re-review.
Embedding designs without dev-mode access
If engineers do not have Figma accounts, they can view embedded previews but cannot inspect the design for specifications. Either grant Figma viewer accounts to engineers or use Figma Dev Mode's shareable link feature.
Tips
Add the Figma frame thumbnail to the Jira board card display so designs are visible without opening the issue
Use Figma's Prototype link (not just the frame link) for stories that require interaction flow understanding
Create a Jira dashboard filter "Design Status = Ready for Dev" so engineering can see all available design-complete stories
Run a monthly audit of Jira stories with broken Figma links — designs move and links break over time
How Vantage helps
Vantage integrates with Figma directly to import designs as product context. When you attach a Figma frame to a Vantage project, Vantage analyzes the design and incorporates it into PRD generation and requirement extraction — bridging design and product specification in one step.