5 things that aren’t true about design systems

A presentation at Microsoft Reactor Sydney in October 2019 in Sydney NSW, Australia by Inayaili León

Slide 1

Slide 1

5 things that aren’t true about design systems @yaili Microsoft Reactor, Sydney, October 2019

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Photo by Rick Mason on Unsplash

Slide 7

Slide 7

Photo by mlhradio on Flickr

Slide 8

Slide 8

Photo by Milivoj Kuhar on Unsplash

Slide 9

Slide 9

Untruth #1 “Everyone loves and understands our work.”

Slide 10

Slide 10

Untruth #1 “Everyone loves and understands our work.” “Some people hate us, and many don’t know what we’re trying to do.”

Slide 11

Slide 11

#1 “Everyone loves and understands our work.” “Material?”

Slide 12

Slide 12

#1 “Everyone loves and understands our work.” Photo by You X Ventures on Unsplash

Slide 13

Slide 13

#1 “Everyone loves and understands our work.” Photo by You X Ventures on Unsplash

Slide 14

Slide 14

Untruth #2 “Our documentation is always up to date.”

Slide 15

Slide 15

Untruth #2 “Our documentation is always up to date.” “We don’t always have time to document things.”

Slide 16

Slide 16

Slide 17

Slide 17

#2 “Our documentation is always up to date.” Photo by Ben White on Unsplash

Slide 18

Slide 18

#2 “Our documentation is always up to date.” Buster Keaton in “The General”, 1926. GIF from r/silentmoviegifs

Slide 19

Slide 19

#2 “Our documentation is always up to date.” Photo by Filip Bunkens on Unsplash

Slide 20

Slide 20

#2 “Our documentation is always up to date.” Usage Do • Keep the content of a card related to a • • • • • Example Usage Anatomy Developer guidance API single concept • Keep content inside cards aligned, even in cases where dividers extend to the edge of the card • Avoid scrolling inside cards; rely on scrolling of the parent container instead • Avoid placing a card on a background lighter than $neutral-2 Don’t N E M I C E P S • Place cards within cards • Include many calls to action within a single card • Use card to replace similar components, such as dialog

Slide 21

Slide 21

Untruth #3 “Everyone works together in harmony.”

Slide 22

Slide 22

Untruth #3 “Everyone works together in harmony.” “We block each other all the time.”

Slide 23

Slide 23

#3 “Everyone works together in harmony.”

Slide 24

Slide 24

#3 “Everyone works together in harmony.” Photo by Luke Brugger on Unsplash

Slide 25

Slide 25

Untruth #4 “No one ever needs custom components.”

Slide 26

Slide 26

Untruth #4 “No one ever needs custom components.” “Someone needs a custom component every day.”

Slide 27

Slide 27

#4 “No one ever needs custom components.” Photo by Brendan Church on Unsplash

Slide 28

Slide 28

#4 “No one ever needs custom components.” Seinfeld, “The Soup Nazi”, 1995

Slide 29

Slide 29

#4 “No one ever needs custom components.” Photo by Vidar Nordli-Mathisen on Unsplash

Slide 30

Slide 30

#4 “No one ever needs custom components.” Photo by DorkyMum on Flickr

Slide 31

Slide 31

Untruth #5 “We validate everything.”

Slide 32

Slide 32

Untruth #5 “We validate everything.” “Most times we push to the system without testing.”

Slide 33

Slide 33

#5 “We validate everything.” Photo by Kai Pilger on Unsplash

Slide 34

Slide 34

#5 “We validate everything.” Photo by Annie Spratt on Unsplash

Slide 35

Slide 35

#5 “We validate everything.” Photo by Annie Spratt on Unsplash

Slide 36

Slide 36

#5 “We validate everything.” Photo by Mimi Thian on Unsplash

Slide 37

Slide 37

(I’m nearly done!)

Slide 38

Slide 38

Slide 39

Slide 39

Thank you! @yaili, references bit.ly/reactor-sydney