Advanced Design Systems Considerations JSConf Hawaii 2020 (cc) image by anjan58 - https://flic.kr/p/4rQd7T

(cc) image by freestocks.org - https://flic.kr/p/JxqjjP

systems of systems

photo by invisionapp Prior art

design system by Meng To for designcode.io

Blend in

thank you for not thanking

values

more components does not guarantee more efficiency

fight for atomic components

avoid manifest destiny

avoid manifest destiny

solve people problems in meatspace

values over everything

design systems are for quality in the face of deadlines

only relevant for inside of a button

this is a button icon this is a regular icon

Button injects its own Icon

wrong size icon for inside a button

Special icon type for inside buttons…

Pass it in as a prop so we can modify it

Disallow children to avoid jamming an icon in there

nice looking & intuitive, just need to fix the size…

Icon knows about Button -vsButton knows about Icon

Inside of Icon, we render ourselves differently if we can tell that we’re in a button

create relationships without encoding strict dependencies

kinda like a foreign key

overrides iconSizeToken for its children to 12px

reads the value as 12px for this context

decentralization

Configuration is centralized by default and that isn’t super great

inversion of control as a means for configuration

only do internationalization once

good composition allows for good internationalization

borrowing good ideas from apple

the modifiers run in order before the View ever renders anything

the result of each modifier being turned on the component with all modifiers turned on

a react component that knows how to take the output from the modifiers runs first, has nothing to do with react

render anywhere that you can implement View

your design system should last longer than react is “cool”

what does success look like?

every arbitrary subset of your design system should be “complete”

decentralization & inversion of control

values outlast implementations

design systems are about values

Mahalo! send complaints to @slexaxton (cc) image by anjan58 - https://flic.kr/p/4rQd7T