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.

1. SARAH FEDERMAN | SR. FRONT END DEVELOPER | @SARAH_FEDERMAN
Customizability in Design
Systems

2. SARAH FEDERMAN | SR. FRONT END DEVELOPER | @SARAH_FEDERMAN
Customizability in Design
Systems

3. Stay for Alex’s talk.
WHAT IS A DESIGN SYSTEM?

4. A set of shared guidelines and
components.
WHAT IS A DESIGN SYSTEM?

5. Designing flexibility into your
system.
WHAT IS CUSTOMIZABILITY?

6. How it looks
What it does
How it's used
Flexibility in…

7. FLEXIBLE APIS + THEMING
Customizability =

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. SPECTRUM OF FLEXIBILITY
Constrained Flexible

14. When and Why
How we make decisions about customizability

15. • Variability in product offerings
• Support for legacy product
• Enabling experimentation
• Enabling productivity
WHY MIGHT I NEED FLEXIBITY?

16. PARTIAL ADOPTION IS
BETTER THAN NO ADOPTION

17. DYNAMIC TABLES REDESIGN

18. NAVIGATION

19. NEW NAVIGATION
CONFIDENTIAL DO NOT SHARE

21. WHY DO APIS BECOME
FLEXIBLE?
1. THERE’S A VALIDATED USE CASE FOR IT
2. DEVELOPERS LOVE IT
3. IT’S EASIER

22. How
Exploring different methods of supporting customizability

23. Flexible API Patterns
How to enable customizability through React code

24. BASIC PROPS

25. ADVANCED
PROPS

26. COMPOUND
COMPONENTS

27. BASE/VARIANTS

28. OVERRIDES API

29. SPECTRUM OF FLEXIBILITY
Constrained Flexible
Simple Props
Advanced Props
Base / Variants
Compound
Components
Overrides API

30. SPECTRUM OF FLEXIBILITY
Constrained Flexible
Simple Props
Advanced Props
Base / Variants
Compound
Components
Overrides API
Set options Bring your own

31. COMPONENT APIS ARE NOT
A DIRECT IMPLEMENTATION
OF YOUR GUIDELINES

32. Theming
Exploring different methods of supporting visual customization

33. • External stylesheets (dark-theme.css)
• CSS-in-JS (css prop)
• Classname overrides, utility classes
CSS OVERRIDES

34. SPECTRUM OF FLEXIBILITY
Constrained Flexible
CSS Overrides

35. Cross-platform variables that
define key design data
WHAT ARE DESIGN TOKENS?

36. 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.

37. DESIGN TOKEN OVERRIDES
Source: System UI

39. SPECTRUM OF FLEXIBILITY
Constrained Flexible
Design Token
Overrides
CSS Overrides

41. COMPONENT TOKENS
Source: Adobe Spectrum

42. HOW CAN WE SYSTEMIZE
THIS?

43. ANATOMY OF A COMPONENT

44. 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

45. 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

46. COMPONENT TOKEN FORMAT

47. button.skin.background.color.variants.danger.states.focus

48. PREDICTABLE STRUCTURE
Returns the value of button.skin.background.color.variants.danger.states.focus

49. PREDICTABLE STRUCTURE
Lets us embed additional
information into the structure

50. CROSS PLATFORM
SPECIFICATION FOR HOW A
COMPONENT SHOULD LOOK.

51. COMPONENT TOKENS ARE
AN INTERNAL CONCERN.

52. The Future Vision
Where can this go?

53. 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

54. API DRIVEN UI
Source: getaround.tech

55. FLEXIBLE APIS + THEMING
Customizability =

56. SARAH FEDERMAN | SR. FRONT END DEVELOPER | @SARAH_FEDERMAN
Thank you
Send Tweets.