Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution

UXAustralia
PRO
August 25, 2023
Design
0
120

UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution

Over the past 2 years the Atlassian Design System team have been reimagining how a design system needs to evolve to be a force multiplier for good - good for our own team, good for our designers and developers and good for our customers. They’ll share their journey towards unlocking a thriving design system which supports the past, the present and the future all at the same time and how they evolved it to drive both purpose and impact at scale. In a time of economic uncertainty, different design models of what good looks like not only become necessary but essential to fuel the next decade of design system’s growth. We’ll share the highs and lows and wisdom we have gained by going smaller, to go bigger.

UXAustralia
PRO

August 25, 2023
Tweet

More Decks by UXAustralia

See All by UXAustralia
UXA2023 Yasamin Asadi - Designing for a post-lockdown metaverse
uxevents
PRO
0
56
UXA2023 Penny Goodwin - Information Architecture and product development
uxevents
PRO
0
89
UXA2023 Andy Budd - Design’s Mid-Life Crisis
uxevents
PRO
0
410
Graphic Recording - Andy Budd
uxevents
PRO
0
290
UXA2023 Erin Casali - Driving organizational change with co-design
uxevents
PRO
0
290
UXA2023 Alina Butolina - The Value of Global Inclusive Design Practices
uxevents
PRO
0
140
UXA2023 Emily Underwood and Eilish Out-O'Reilly - Designing for the overlooked user we will all become
uxevents
PRO
0
140
UXA2023 Julia Suh - Driving a multi-sector collaboration for countering online child sexual exploitation
uxevents
PRO
0
22
UXA2023 Claudette Yazbek - A New Policy Paradigm
uxevents
PRO
0
76

Other Decks in Design

See All in Design
「Blueskyちゃん」誕生経緯と公式設定
kawaiirailroads
0
180
誰でも簡単⁉️👀 絵文字ができるまで😃👍
oguemon
6
9.3k
Укрощая сложность цифрового продукта
ashapiro
0
220
終わりなき探究を前提としたデザインモデルの開発 - デュアルサイクルモデルの提案 -
hirokazu_oda
0
290
Yukiya Shiba PDF Portfolio
48yukyia
0
150
既存の価値をアップデートするABEMAらしい将棋ブランディングとクリエイティブについて
cyberagentdevelopers
PRO
1
210
UXA2023 Emily Underwood and Eilish Out-O'Reilly - Designing for the overlooked user we will all become
uxaustralia
PRO
0
140
デザイナーとして動き方の変化
naoenomoto
2
1k
企業のための言葉えらび 〜Ameba リブランディングプロジェクト〜
cyberagentdevelopers
PRO
1
460
Adding a Touch of glitr
achafetz
0
220
Figmaにおけるバージョン管理について
littlebusters
0
1.1k
Rettyとオレンジの歩み
y__ri9813
0
450

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Making the Leap to Tech Lead
cromwellryan
119
8.1k
The Pragmatic Product Professional
lauravandoore
23
4.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
56k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Six Lessons from altMBA
skipperchong
17
2.6k
Design by the Numbers
sachag
272
18k
Teambox: Starting and Learning
jrom
125
8.1k
Designing for Performance
lara
601
66k
Designing the Hi-DPI Web
ddemaree
274
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
6
7.1k

Transcript

  1. Going smaller to go bigger.
    A design system’s evolution.
    Maria Christley
    Head of Design

    UI Platform
    Eva Plaisted
    Senior Product Designer

    Atlassian Design System

    Klaus Paiva
    Senior Engineer

    Atlassian Design System

    View Slide

  2. Atlassian Design System is the
    cornerstone of crafting quality

    View Slide

  3. View Slide

  4. 18+ products

    View Slide

  5. 4000+
    designers
    &
    developers
    18+ products

    View Slide

  6. 18+ products
    30,000+
    marketplace 

    vendors
    4000+
    designers
    &
    developers

    View Slide

  7. 18+ products
    millions
    end
    customers
    4000+
    designers
    &
    developers
    30,000+
    marketplace 

    vendors

    View Slide

  8. The ‘wicked’ intersection
    PAST
    High maintenance
    burden
    PRESENT
    Hyper growth driving
    high demand
    No longer modern,
    world class or useful
    FUTURE
    What future?
    No time!?!?

    View Slide

  9. Unleashing the potential for high quality
    design decisions to be made with
    confidence and speed.
    ✨
    Going smaller to go bigger

    View Slide

  10. ✨
    TEAM
    COMPOSABILITY
    FUTURE
    VISION

    View Slide

  11. Team

    View Slide

  12. When a design system
    tries to please
    everyone,
    Image credit: The Pokemon Company

    View Slide

  13. SERVICE
    VALUE
    PRODUCT
    Design
    Systems are
    for people

    View Slide

  14. Image credits @JohnnyParr @CallaghanDesign

    View Slide

  15. An organization’s output is directly
    related to how it communicates
    internally
    

    Conway’s Law

    View Slide

  16. View Slide

  17. Thanks for capturing all this and for seeking
    our feedback regularly as this evolves!
    Co-designing our future is really
    empowering.
    I’m also keen to know how these partner
    relationships are going to be developed.
    Ali Pereira, Design Systems Designer
    … …
    … …

    View Slide

  18. One team

    View Slide

  19. UI Foundations UI Foundations Accessibility Maker Experience
    Teams
    Four mission driven teams

    View Slide

  20. UI Foundations UI Foundations Accessibility Maker Experience
    Enablement and adoption
    Enterprise grade
    Service and support
    Teams
    Shared
    Capabilitie
    s
    Atlassian Design System leadership
    Leads
    Four mission driven teams

    View Slide

  21. You will ship your org.
    Embrace this to be
    mission focused.

    View Slide

  22. Composability

    View Slide

  23. UI Foundations UI Foundations Accessibility Maker Experience

    View Slide

  24. UI Foundations UI Foundations Accessibility Maker Experience

    View Slide

  25. Maintainable
    Scalable
    Flexible

    View Slide

  26. Maintainable
    Scalable
    Confluence → Jira → Trello →
    Flexible

    View Slide

  27. Maintainable
    New products and experiences
    Scalable
    Flexible

    View Slide

  28. Easily supported by the DS team
    Maintainable
    Scalable
    Flexible

    View Slide

  29. This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action Action
    Let’s build a card!

    View Slide

  30. This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action Action

    View Slide

  31. Flexible
    Scalable
    Maintainable
    Create a super card 🦸
    This is a heading
    I'm baby jawn godard ennui, big mood
    mustache af jean shorts. Shaman vibecession
    tumblr, food truck 8-bit quinoa mustache yes
    plz unicorn YOLO. Praxis banh mi jawn
    stumptown kitsch green yuccie.
    Action Action

    View Slide

  32. Flexible
    Scalable
    Maintainable
    Action
    Build ALL the cards
    This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action Action

    View Slide

  33. Flexible
    Scalable
    Maintainable
    This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action Action
    Break it down 🕺
    Flexible
    Scalable
    Maintainable

    View Slide

  34. Break it down 🕺
    This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action
    Action
    Flexible
    Scalable
    Maintainable

    View Slide

  35. This is a heading
    I'm baby jawn godard ennui, big mood
    mustache af jean shorts. Shaman vibecession
    tumblr, food truck 8-bit quinoa mustache yes
    plz unicorn YOLO. Praxis banh mi jawn
    stumptown kitsch green yuccie.
    This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action Action

    View Slide

  36. This is a heading
    I'm baby jawn godard ennui, big mood
    mustache af jean shorts. Shaman vibecession
    tumblr, food truck 8-bit quinoa mustache yes
    plz unicorn YOLO. Praxis banh mi jawn
    stumptown kitsch green yuccie.
    Action Action
    This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action Action

    View Slide

  37. This is a heading
    This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa mustache yes plz unicorn YOLO.
    Praxis banh mi jawn stumptown kitsch green
    yuccie.
    Action
    elevation.surface.default
    Image
    space.300 24
    Box
    heading.default
    text.default
    space.200 16
    Stack
    Space.100 8
    Inline
    Space.100 8
    Stack
    button
    avatar.small
    icon.button
    heading.small
    This is a smaller header
    space.200 16
    Box
    space.150 12
    Stack

    View Slide

  38. This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa.
    This is a smaller header
    This is a subtitle
    Edited 4 July 2023

    View Slide

  39. This is a description. I’m baby jawn godard
    ennui, big mood mustache af jean shorts.
    Shaman vibecession tumblr, food truck 8-bit
    quinoa.
    This is a smaller header
    This is a subtitle
    Edited 4 July 2023

    View Slide

  40. But how ?
    Design Tokens Primitives
    New!

    View Slide

  41. But how ?
    Design Tokens
    The single source of truth to
    name and store design
    decisions.
    Primitives
    New!

    View Slide

  42. But how ?
    Design Tokens
    The single source of truth to
    name and store design
    decisions.
    Primitives
    The scaffolding built around
    design tokens to guide usage.
    New!

    View Slide

  43. But how ?
    UI foundations
    Our products
    Tokens Primitives

    View Slide

  44. Guidance is 🏽.
    Embed it into your
    system, every step

    View Slide

  45. 8
    How it started…
    Hi there!

    View Slide

  46. “I don’t understand when 

    I can use 8px and when I
    can use 4px.”
    Inconsistent guidance
    How it started…
    8

    View Slide

  47. “I don’t understand when 

    I can use 8px and when I
    can use 4px.”
    Inconsistent guidance
    “I use grid size with any
    multiple to get the values
    my designers request.”
    Creative use of grid-size
    How it started…
    8

    View Slide

  48. “I don’t understand when 

    I can use 8px and when I
    can use 4px.”
    Inconsistent guidance
    “I use grid size with any
    multiple to get the values
    my designers request.”
    Creative use of grid-size
    “How should I space
    elements apart on my
    page?”
    Lack of updated grids
    How it started…
    8

    View Slide

  49. “I don’t understand when 

    I can use 8px and when I
    can use 4px.”
    Inconsistent guidance
    “I use grid size with any
    multiple to get the values
    my designers request.”
    Creative use of grid-size
    “Why are all these page
    widths inconsistent?”
    A layout crisis
    “How should I space
    elements apart on my
    page?”
    Lack of updated grids
    How it started…
    8

    View Slide

  50. “I don’t understand when 

    I can use 8px and when I
    can use 4px.”
    Inconsistent guidance
    “What the f%*& are our
    breakpoints?”
    No framework for responsive
    “I use grid size with any
    multiple to get the values
    my designers request.”
    Creative use of grid-size
    “Why are all these page
    widths inconsistent?”
    A layout crisis
    “How should I space
    elements apart on my
    page?”
    Lack of updated grids
    How it started…
    8
    Wait, isn’t
    it 2023?

    View Slide

  51. 64
    48
    40
    32
    24
    20
    12 16
    6
    4
    How it’s going…
    Scale
    8
    Welcome
    friends!

    View Slide

  52. How it’s going…
    space.025
    space.050
    space.075
    space.100
    space.150
    space.200
    space.250
    space.300
    space.400
    space.500
    space.600
    space.800
    Scale
    Tokens
    64
    48
    40
    32
    24
    20
    12
    16
    6
    4
    8

    View Slide

  53. How it’s going…
    Box Stack Inline
    Scale
    Tokens
    Primitives

    View Slide

  54. How it’s going…
    Scale
    Tokens
    Primitives
    Grid

    View Slide

  55. MAKER
    S
    Scale
    Tokens
    Primitives
    Grid
    How it’s going…

    View Slide

  56. Scale
    Tokens
    Primitives
    Grid
    Responsive
    Density
    MAKER
    S
    CUSTOMER
    S
    How it’s going…

    View Slide

  57. Box Stack Inline
    space.300 24
    Box space.300 24
    Stack
    space.300 24
    Inline
    Layout primitives

    View Slide

  58. Box Stack Inline
    Layout primitives

    View Slide

  59. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    Let’s build with primitives!

    View Slide

  60. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    Let’s build with primitives!

    View Slide

  61. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    space.300 24
    Box
    Let’s build with primitives!

    View Slide

  62. Let’s build with primitives!
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  63. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    space.200 16
    Inline
    Let’s build with primitives!

    View Slide

  64. Let’s build with primitives!
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  65. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    space.050 4
    Stack
    Let’s build with primitives!

    View Slide

  66. Let’s build with primitives!
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  67. 🖥
    space.300 24
    Box
    space.200 16
    Inline
    space.050 4
    Stack
    But wait…there’s more!
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  68. But wait…there’s more!
    📱
    space.200 16
    Box
    space.050 4
    Stack
    space.150 12
    Inline
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    🖥
    space.300 24
    Box
    space.200 16
    Inline
    space.050 4
    Stack
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  69. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    IT Operations
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Financial Month End
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Customer Support
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Sales Ops
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    IT Support
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    SWAGs
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    HR Service Desk
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Onboarding
    Let’s put it into action

    View Slide

  70. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    IT Operations
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Financial Month End
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Customer Support
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Sales Ops
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    IT Support
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    SWAGs
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    HR Service Desk
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Onboarding
    space.800 64
    Stack
    space.800 64
    Stack
    space.300 24
    Box
    space.200 16
    Inline
    space.050 4
    Stack

    View Slide

  71. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    IT Operations
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Financial Month End
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Customer Support
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Sales Ops
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    IT Support
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    SWAGs
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    HR Service Desk
    Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Onboarding
    space.500 40
    Stack
    space.200 16
    Box
    space.150 12
    Inline
    space.050 4
    Stack
    space.500 40
    Stack

    View Slide

  72. Wow, finally after so many years,
    we have an amazing portal with a
    long description to top up the
    lorem ipsum
    Sales Ops
    Wow, finally after so many years,
    we have an amazing portal with a
    long description to top up the
    lorem ipsum
    Travel Service Desk
    Wow, finally after so many years,
    we have an amazing portal with a
    long description to top up the
    lorem ipsum
    IT Support
    Wow, finally after so many years,
    we have an amazing portal with a
    long description to top up the
    lorem ipsum
    SWAGs
    Wow, finally after so many years,
    we have an amazing portal with a
    long description to top up the
    lorem ipsum
    HR Service Desk
    Wow, finally after so many years,
    we have an amazing portal with a
    long description to top up the
    lorem ipsum
    Onboarding

    View Slide

  73. Strive for parity 🔮
    but allow it to come
    in different forms*
    * meet the maker where they are

    View Slide

  74. Let’s talk about code for a bit…
    Hi, there!

    View Slide

  75. UX: Design and Code
    UX: Design and Code
    +
    UX: Design and Code

    View Slide

  76. +
    UX: Design and Code

    View Slide

  77. Let’s build our card for real!

    View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  83. Why stop there?
    Primitives can be applied
    to other UI foundations…
    Are we
    stopping?

    View Slide

  84. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  85. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  86. Wow, finally after so many years, we have
    an amazing portal with a long description
    to top up the lorem ipsum
    Travel Service Desk

    View Slide

  87. Key benefits

    View Slide

  88. Key benefits
    Increased designer and developer productivity

    View Slide

  89. Key benefits
    Increased designer and developer productivity
    •
    Pervasive IA: Terminology parity, better handovers

    View Slide

  90. Key benefits
    Increased designer and developer productivity
    •
    Pervasive IA: Terminology parity, better handovers
    Less time handling boilerplate, more time spent
    shipping

    View Slide

  91. Key benefits
    Increased designer and developer productivity
    •
    Pervasive IA: Terminology parity, better handovers
    Less time handling boilerplate, more time spent
    shipping
    6+ hours
    saved /
    week
    of design
    time

    View Slide

  92. Handover 🤝

    in detail 🔍

    View Slide

  93. +
    Bring the tools closer together

    View Slide

  94. +
    ❤
    Bring the tools closer together

    View Slide

  95. Bring the tools closer together
    Box Stack Inline

    View Slide

  96. Bring the tools closer together

    View Slide

  97. Bring the tools closer together

    View Slide

  98. xcss
    What about bespoke experiences?

    View Slide

  99. Full docs: go.atlassian.com/xcss
    xcss: An example

    View Slide

  100. xcss: An example
    Full docs: go.atlassian.com/xcss

    View Slide

  101. xcss: An example
    Full docs: go.atlassian.com/xcss

    View Slide

  102. Auto layout
    What about vendor lock-in?

    View Slide

  103. Three 🔑

    principles

    View Slide

  104. Elements to success
    Cohesion Composition Confidence

    View Slide

  105. Cohesion
    Ensure cohesive
    experiences that
    are distinctly
    Atlassian while not
    restricting the
    creativity and
    unique expression
    of our makers
    Composition Confidence

    View Slide

  106. Composition Confidence
    Cohesion

    View Slide

  107. Cohesion
    Composition
    Smaller pieces
    mean higher
    fidelity. They can
    be composed
    infinitely with each
    use being
    declarative and
    intentionally
    expressive.
    Confidence

    View Slide

  108. Composition Confidence
    Cohesion

    View Slide

  109. Cohesion Composition
    Confidence
    More expressive &
    declarative code
    ‑‐
    Better target for
    code
    transformation tools
    ‑‐
    Keeping code up-
    to-date with latest

    View Slide

  110. Composition Confidence
    Cohesion

    View Slide

  111. Future

    View Slide

  112. PAST PRESENT
    2023
    FUTURE
    2033
    What do the next 10 years hold?

    View Slide

  113. Make experience quality
    the pit of success

    View Slide

  114. We’re shifting our
    culture through
    systems thinking.
    “
    Jennie Yip | Principal Design Architect 

    Atlassian Design System

    View Slide

  115. View Slide

  116. Thank you for
    adding
    dark mode! This
    was an
    accessibility issue
    for some people
    like me.
    “
    JIRA CUSTOMER

    View Slide

  117. Primitives are
    awesome. [They
    are] genuinely low
    effort and high
    impact.
    “
    ATLASSIAN
    DEVELOPER

    View Slide

  118. Systemic Shifts

    View Slide

  119. What have we
    atlassian.design

    View Slide

  120. View Slide

  121. THANK YOU
    Maria Christley
    Head of Design

    UI Platform
    Eva Plaisted
    Senior Product Designer

    Atlassian Design System

    Klaus Paiva
    Senior Engineer

    Atlassian Design System

    View Slide