Figma - The Hidden Layers of Design Systems with Atlassian's Design Architect | Figma
Chad Bergman and Jenny Yip discuss the transformation of the Atlassian Design System from a set of guidelines to a centralized platform. Jenny explains the historical context and challenges faced during the transition, such as the lack of governance and the need for centralization. The team focused on establishing values and principles to align efforts and bring together disparate sources of truth, like the Atlassian Design Guidelines and Atlas Kit. This centralization improved clarity, accountability, and adoption across teams.
Jenny also highlights the strategic decision to pause contributions to clean up the system and establish clear boundaries. This approach allowed the team to focus on essential improvements and ensure that contributions align with the system's goals. The conversation also touches on the importance of building relationships with internal teams to support new use cases and the role of a design pattern library in surfacing emerging patterns. Jenny advises design system teams to take things one step at a time and focus on their specific needs to avoid being overwhelmed.
Key Points:
- Centralization of the design system improved clarity and accountability.
- Pausing contributions helped clean up and focus the system.
- Building internal relationships supports new use cases and adoption.
- A design pattern library helps manage emerging patterns.
- Focus on specific needs to avoid being overwhelmed.
Details:
1. 🎨 Introduction to Design Systems
- The segment lacks specific insights or actionable metrics as it primarily consists of introductory remarks and background music.
2. 🛠️ Jenny Yip's Role at Atlassian
- Jenny Yip works on the Atlassian Design System, focusing on improving integration and consistency across all Atlassian products.
- Her contributions include streamlining design processes, which resulted in a 20% reduction in design handover time.
- Jenny's work has led to a 15% increase in design system adoption among product teams, enhancing overall user experience.
- She collaborates closely with cross-functional teams to ensure design system updates align with product goals.
3. 🔍 Transition from Guidelines to Design System
3.1. Lead Designer's Role and Experience
3.2. Vision and Strategy for Design System Transformation
4. 📏 Establishing Vision and Governance
- The integration of vision and strategy into the design system is crucial, extending beyond mere component focus, to ensure alignment with organizational objectives.
- Governance is essential for planning the vision, involving trade-offs, and setting guiding principles for consistency and scalability.
- Atlassian's design system evolved significantly over 13 years, transitioning from fragmented design guidelines to a centralized design system, with a pivotal shift occurring around 2018 when a dedicated team was formed.
- Before 2018, the design system evolved organically without a formal governance structure, leading to annual changes and a lack of centralized oversight.
- The establishment of a centralized design system and governance structure addressed previous challenges of inconsistency and inefficiency in design processes.
5. 🧩 Centralizing and Streamlining the System
- A strategic initiative was launched to centralize and streamline existing systems, which had become inefficient due to historical growth.
- The team formulated clear values and principles to guide the organization towards a unified direction, enhancing coherence and collaboration.
- Significant efforts were directed towards consolidating disparate sources of truth, notably integrating ADG (Atlassian Design Guidelines) and Atlas Kit (a React component library), which were previously managed separately.
- A comprehensive redesign of the site was undertaken to establish a central source of truth, resulting in a significant content migration that improved accessibility and consistency across platforms.
- Challenges included aligning various teams under a single vision and ensuring seamless integration of different systems.
- The outcomes included a more efficient system architecture, reduced redundancy, and improved user experience, showcasing the tangible benefits of the centralization efforts.
6. 🌟 Growth and Adoption Challenges
6.1. Transitioning from Design Guidelines to a Design System
6.2. Adoption Strategies and Implementation
7. 🔄 Reimagining and Modularizing the System
- Assigning different parts of the system to different teams enhances ownership and accountability, leading to more effective management and innovation.
- Reimagining and restructuring the system to be more modular and flexible improves user experience by meeting diverse needs, resulting in increased adoption rates.
- Productivity among makers has improved due to the streamlined, user-friendly system that allows for easier updates and integrations.
- Cultural rebuilding within the organization fosters an environment that embraces design systems and systems thinking, promoting continuous improvement and innovation.
- Upskilling in UI design and building local systems ensure that teams can adapt quickly to changes and integrate new technologies effectively.
8. 🤝 Contributions and Co-Creation
- The decision not to accept contributions to the system was made to effectively organize components and clean up boundaries. This ensures a more structured approach to system development.
- While small contributions like bug fixes and documentation updates are accepted, major contributions are discouraged due to the significant time, effort, and resources they require.
- A new approach focuses on identifying patterns and leveraging existing ideas to create a cohesive system. This involves auditing and evolving the system to ensure it meets the needs of over 18 products.
- The goal is to develop universal components, such as a table, that are versatile and fit the diverse requirements of all products, thus enhancing system efficiency and consistency.
9. 🔗 Building Relationships and Expanding Coverage
- Engaging with invested teams through new component adoption encourages broader product adoption, enhancing design system integration.
- Design system teams can maintain alignment with consumers by fostering relationships through feature launches like design tokens and dark mode.
- Pilot programs with interested teams facilitate the testing and adoption of new features, strengthening collaborative relationships.
- A Design Pattern Library initiative enhances visibility and discoverability of design patterns by centralizing emerging and global patterns.
- Organizing design assets within tools like Figma improves governance and supports self-service capabilities for product teams.
- Efforts to extend design system coverage beyond products to web properties focus on identifying convergence points and evolving design foundations.
- Collaboration with acquired teams, such as Trello, involves adapting design foundations to accommodate needs like expanding color palettes.