Pragmatic Drag and Drop

Atlassian has developed and adopted a single, open-source drag and drop solution called Pragmatic Drag and Drop. This solution aims to improve performance by reducing shipped code, enhance visual consistency across products through a design framework and Figma tooling, and provide a great experience for all users, including those using assistive technologies. It leverages browser primitives with workarounds for inconsistencies and offers modularity for flexibility and performance. The design decisions have continued to evolve as they iterate based on how things feel in products, user feedback, as well as the creation of novel experiences. With Pragmatic drag and drop, they have intentionally decoupled design outputs from behavior outputs to give them the room to iterate and experiment on their design without needing to impact the underlying behavior. This decoupling also allows them to create separate design outputs for unique experiences. In order to help promote consistency in what they design and what they ship to their users, they created Pragmatic drag and drop tooling for Figma. Having Figma tooling enables their designers and engineers work with the same visual design language. The modular nature of Pragmatic drag and drop posed a challenge for their Figma outputs, so they focused on simplicity over fidelity. They knew it would be challenging to create a rich drag and drop prototype in Figma that would just 'work' — instead, they broke the components down into each part and state of the drag process. They also recorded Looms to provide guidance on how to show the different stages of a drag experience.