Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Customizability in Design Systems

20,085 views

Published on

Maintaining the integrity of your design system is always about striking a balance between providing enough flexibility to meet your customer's needs and introducing the right constraints.

This talk is about the process, thinking, and tooling behind the customizability in Atlassian's design system, including how we support theming and customization of our react components.

Published in: Technology
  • Be the first to comment

Customizability in Design Systems

  1. 1. SARAH FEDERMAN | SR. FRONT END DEVELOPER | @SARAH_FEDERMAN Customizability in Design Systems
  2. 2. SARAH FEDERMAN | SR. FRONT END DEVELOPER | @SARAH_FEDERMAN Customizability in Design Systems
  3. 3. Stay for Alex’s talk. WHAT IS A DESIGN SYSTEM?
  4. 4. A set of shared guidelines and components. WHAT IS A DESIGN SYSTEM?
  5. 5. Designing flexibility into your system. WHAT IS CUSTOMIZABILITY?
  6. 6. How it looks What it does How it's used Flexibility in…
  7. 7. FLEXIBLE APIS + THEMING Customizability =
  8. 8. The ability to skin, or apply visual overrides, to the design system The built-in choices that we provide to users. FLEXIBLE APIS THEMING
  9. 9. SPECTRUM OF FLEXIBILITY Constrained Flexible
  10. 10. When and Why How we make decisions about customizability
  11. 11. • Variability in product offerings • Support for legacy product • Enabling experimentation • Enabling productivity WHY MIGHT I NEED FLEXIBITY?
  12. 12. PARTIAL ADOPTION IS BETTER THAN NO ADOPTION
  13. 13. DYNAMIC TABLES REDESIGN
  14. 14. NAVIGATION
  15. 15. NEW NAVIGATION CONFIDENTIAL DO NOT SHARE
  16. 16. WHY DO APIS BECOME FLEXIBLE? 1. THERE’S A VALIDATED USE CASE FOR IT 2. DEVELOPERS LOVE IT 3. IT’S EASIER
  17. 17. How Exploring different methods of supporting customizability
  18. 18. Flexible API Patterns How to enable customizability through React code
  19. 19. BASIC PROPS
  20. 20. ADVANCED PROPS
  21. 21. COMPOUND COMPONENTS
  22. 22. BASE/VARIANTS
  23. 23. OVERRIDES API
  24. 24. SPECTRUM OF FLEXIBILITY Constrained Flexible Simple Props Advanced Props Base / Variants Compound Components Overrides API
  25. 25. SPECTRUM OF FLEXIBILITY Constrained Flexible Simple Props Advanced Props Base / Variants Compound Components Overrides API Set options Bring your own
  26. 26. COMPONENT APIS ARE NOT A DIRECT IMPLEMENTATION OF YOUR GUIDELINES
  27. 27. Theming Exploring different methods of supporting visual customization
  28. 28. • External stylesheets (dark-theme.css) • CSS-in-JS (css prop) • Classname overrides, utility classes CSS OVERRIDES
  29. 29. SPECTRUM OF FLEXIBILITY Constrained Flexible CSS Overrides
  30. 30. Cross-platform variables that define key design data WHAT ARE DESIGN TOKENS?
  31. 31. Creating a call-out Watch the tutorial in the Presentation Guidelines at Atlassian.design to learn how to create call-outs on screenshots within this template.
  32. 32. DESIGN TOKEN OVERRIDES Source: System UI
  33. 33. SPECTRUM OF FLEXIBILITY Constrained Flexible Design Token Overrides CSS Overrides
  34. 34. COMPONENT TOKENS Source: Adobe Spectrum
  35. 35. HOW CAN WE SYSTEMIZE THIS?
  36. 36. ANATOMY OF A COMPONENT
  37. 37. Anatomy of a Component States Properties that change as a result of a change of state Variants A preset appearance option Skin Visual properties of a component Structure Properties that effect how it lays out on the page Subcomponents Smaller components that are composed by the parent component
  38. 38. Skin Background-color, border-color, etc ANATOMY OF A BUTTON Structure Padding, margin, height, etc Variants danger, primary, link, subtle, etc. States hover, active, focused, selected, etc Subcomponents Spinner, icon
  39. 39. COMPONENT TOKEN FORMAT
  40. 40. button.skin.background.color.variants.danger.states.focus
  41. 41. PREDICTABLE STRUCTURE Returns the value of button.skin.background.color.variants.danger.states.focus
  42. 42. PREDICTABLE STRUCTURE Lets us embed additional information into the structure
  43. 43. CROSS PLATFORM SPECIFICATION FOR HOW A COMPONENT SHOULD LOOK.
  44. 44. COMPONENT TOKENS ARE AN INTERNAL CONCERN.
  45. 45. The Future Vision Where can this go?
  46. 46. FUTURE POSSIBILITIES • Cross-platform component tokens • Mapping token structure to a finite state machine • Graphql selection of tokens • Tokens as infrastructure for managing visual breaking changes • Component API as source of truth
  47. 47. API DRIVEN UI Source: getaround.tech
  48. 48. FLEXIBLE APIS + THEMING Customizability =
  49. 49. SARAH FEDERMAN | SR. FRONT END DEVELOPER | @SARAH_FEDERMAN Thank you Send Tweets.

×