Confluence x Figma
The Problem
A product designer once shared their frustration: "We paste snippets from Confluence into Figma, only to realise they're outdated before the next review. It’s a nightmare trying to keep everything aligned."
The lack of a single source of truth across cross-functional teams has been a persistent challenge. Designers frequently paste screenshots of Confluence snippets into Figma files, but these quickly become outdated, leading to versioning issues and misalignment between design files and documentation.
​
Engineers and product managers also expressed frustration with scattered documentation, making it inefficient to review and implement designs. Confluence serves as a primary knowledge hub for many organisations, but its integration into Figma as a widget has been difficult, particularly when trying to maintain real-time updates and consistency. Addressing this challenge required a streamlined solution that would ensure up-to-date, embedded documentation within Figma, providing a reliable single source of truth for all stakeholders.
Role
Senior Product Designer (Product integrations)
(1 x PD, 1 x PM, 1 x Tech Lead, 8 Devs)
Timeline
May - July 2024
Company
Atlassian is a software company that develops collaboration, productivity and project management tools for teams. Its products, including Jira, Confluence and Trello, help organisations plan, track and manage work efficiently across various industries, from software development to business operations.
Tools
Figma, Figjam, Atlassian tools, Zoom, Google workspace
"We paste snippets from Confluence into Figma, only to realise they're outdated before the next review. It’s a nightmare trying to keep everything aligned"
Goal
To create a Figma x Confluence integration that allows designers and product teams to effortlessly embed, sync, and document design iterations within Figma.
My Role
As a Senior Product Designer at Atlassian, I led the design and research efforts, working closely with engineering and product teams to develop a seamless integration. My key contributions included:
-
Planning and facilitating workshops to uncover workflow inefficiencies, bond the team and explore different users POV.
-
Leading user research to validate pain points and define priorities.
-
Designing and prototyping the Figma-Confluence integration.
-
Collaborating with engineering to define API requirements for real-time syncing.
Research
To understand documentation pain points, I conducted workshops in Bangalore, India with my team where we did:
-
Workflow Mapping – Teams outlined their design-to-documentation process.
-
Bottleneck Identification – Highlighting challenges in collaboration.
-
Solution Brainstorming – Generating ideas for seamless integration. the first step in understanding the challenges teams faced with Figma and Confluence. I designed and facilitated these workshops to uncover pain points before conducting deeper user research
User Testing
Phase 1: Information Gathering
The first phase of user testing focused on understanding how teams navigated design documentation within Figma and Confluence. We conducted interviews and observed workflows, noting where users struggled with outdated links, missing context, and inefficient manual updates. This phase confirmed the need for real-time syncing and better visibility of design changes.
Phase 2: Prototype Walkthrough
In the second phase, we developed a prototype of the Figma-Confluence integration and tested it with users. Participants were asked to embed Figma files into Confluence, update designs, and review documentation changes. Key findings included the need for clear version tracking, notifications for out-of-sync files, and faster embedding performance. This feedback directly influenced refinements to the final design.
Research Results
-
​Fragmented Workflows – Designers often paste static screenshots into Confluence, making version tracking a nightmare.
-
Lack of Real-Time Updates – When Figma designs change, users have to manually update Confluence, leading to outdated documentation.
-
Limited Context – Engineers and stakeholders want more than just a link; they need structured insights into why a design changed.
-
Misalignment Between Teams – Engineers, designers, and product managers struggled with different expectations for documentation, requiring a more structured integration.
-
Inline Documentation – Keeping design decisions visible in Confluence.
-
Performance Optimisation – Improving load times and embedding efficiency.
Ideation with Feedback Loops
To refine the integration, I actively took designs to design jams, critique sessions, and feasibility jams with the wider team. These sessions allowed us to:
-
Gather real-time feedback from engineers, PMs, and designers.
-
Identify technical constraints early through feasibility discussions.
-
Improve usability and clarity by incorporating diverse perspectives.
By continuously iterating based on structured feedback, we ensured that the integration met both technical and user needs, refining key interaction points before development.
Shipping and Launch
Once the integration was refined through testing, we collaborated with engineering to ensure a smooth rollout. We launched the feature in phases, starting with a beta release to gather early feedback from power users. This allowed us to fine-tune performance, fix edge cases, and ensure seamless adoption. After a successful beta phase, we rolled out the integration to a wider audience, closely monitoring usage metrics and engagement.
​
Impact
-
10.6K installs within X months, indicating strong demand and widespread adoption.
-
60% reduction in manual updates, significantly decreasing the time spent maintaining documentation.
-
Improved cross-functional alignment, ensuring teams work with the latest design versions.
-
Enhanced workflow efficiency, reducing the risk of outdated or misaligned documentation across teams.
-
Positive user feedback, with teams reporting increased clarity and a more seamless design-to-documentation experience.
Conclusion
This integration transformed how teams document and track design decisions, ensuring real-time updates, version control, and seamless collaboration between Figma and Confluence. The project came with its own set of challenges, particularly navigating the technical restrictions of third-party integrations and balancing the needs of different stakeholders. Working across teams required close collaboration with engineering to align on feasibility and ensure a smooth user experience.
A major highlight of this project was traveling to India to run workshops with cross-functional teams. Engaging directly with users provided firsthand insights into their struggles and helped shape a more impactful solution. Additionally, design jams, critique sessions, and feasibility reviews with engineers and PMs ensured that the integration was both usable and technically viable.
This experience strengthened my expertise in user research, cross-functional collaboration, and overcoming technical constraints to deliver meaningful solutions at scale.
This integration transformed how teams document and track design decisions, ensuring real-time updates, version control, and seamless collaboration between Figma and Confluence. It strengthened my expertise in user research, cross-functional collaboration, and product strategy.
Next Steps
-
Enhance comment syncing for deeper collaboration.
-
Improve link paste collaboration – Partner with Figma to recognise Confluence links and display the widget automatically when pasted, similar to how FigJam handles link previews.
-
Optimise real-time updates – Ensure even faster syncing between Figma and Confluence for a seamless documentation experience.
-
Refine notification system – Provide clearer indicators when documentation is out of sync or when changes need review.
-
Enhance comment syncing for deeper collaboration.
-
Expand integration support for more design tools.
