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

10.
When and Why
How we make decisions about customizability

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

12.
PARTIAL ADOPTION IS
BETTER THAN NO ADOPTION

13.
DYNAMIC TABLES REDESIGN

14.
NAVIGATION

15.
NEW NAVIGATION
CONFIDENTIAL DO NOT SHARE

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

17.
How
Exploring different methods of supporting customizability

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

19.
BASIC PROPS

20.
ADVANCED
PROPS

21.
COMPOUND
COMPONENTS

22.
BASE/VARIANTS

23.
OVERRIDES API

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

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

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

27.
Theming
Exploring different methods of supporting visual customization

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

29.
SPECTRUM OF FLEXIBILITY
Constrained Flexible
CSS Overrides

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

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.
DESIGN TOKEN OVERRIDES
Source: System UI

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

34.
COMPONENT TOKENS
Source: Adobe Spectrum

35.
HOW CAN WE SYSTEMIZE
THIS?

36.
ANATOMY OF A COMPONENT

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.
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.
COMPONENT TOKEN FORMAT

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

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

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

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

44.
COMPONENT TOKENS ARE
AN INTERNAL CONCERN.

45.
The Future Vision
Where can this go?

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.
API DRIVEN UI
Source: getaround.tech

48.
FLEXIBLE APIS + THEMING
Customizability =

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