The human side of a Design System

A presentation at Design Systems London in November 2019 in London, UK by Bernardo Raposo

Slide 1

#DesignSystemsLondon

Slide 2

The human side of a Design System #DesignSystemsLondon @braposo

Slide 3

The human side of a Design System #DesignSystemsLondon @braposo

Slide 4

The human side of a Design System Hi! I’m Bernardo

TravelRepublic @braposo #DesignSystemsLondon @braposo

Slide 5

The human side of a Design System #DesignSystemsLondon @braposo

Slide 6

The human side of a Design System Design System is the documentation #DesignSystemsLondon @braposo

Slide 7

The human side of a Design System #DesignSystemsLondon @braposo

Slide 8

The human side of a Design System General design principles Principles of graphic communication A strategy for programming Designing for disabled people Elements of the Desktop Interface #DesignSystemsLondon @braposo

Slide 9

The human side of a Design System @braposo atomicdesign.bradfrost.com #DesignSystemsLondon

Slide 10

The human side of a Design System @braposo eva.design #DesignSystemsLondon

Slide 11

The human side of a Design System #DesignSystemsLondon @braposo

Slide 12

The human side of a Design System #DesignSystemsLondon @braposo

Slide 13

The human side of a Design System #DesignSystemsLondon @braposo

Slide 14

The human side of a Design System Design System is the code #DesignSystemsLondon @braposo

Slide 15

The human side of a Design System #DesignSystemsLondon @braposo

Slide 16

The human side of a Design System Code in Design Tools #DesignSystemsLondon @braposo

Slide 17

The human side of a Design System @braposo airbnb.design/painting-with-code #DesignSystemsLondon

Slide 18

The human side of a Design System @braposo medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526 #DesignSystemsLondon

Slide 19

The human side of a Design System @braposo Rendering web content into Sketch is incredibly powerful, but our industry needs to take this even further. We need design tools that don’t merely imitate the target medium—we need them to be actually built on it. Mark Dalgleish — Sketching in the Browser #DesignSystemsLondon

Slide 20

The human side of a Design System Design in Code #DesignSystemsLondon @braposo

Slide 21

The human side of a Design System #DesignSystemsLondon @braposo

Slide 22

The human side of a Design System #DesignSystemsLondon @braposo

Slide 23

The human side of a Design System @braposo github.com/seek-oss/playroom #DesignSystemsLondon

Slide 24

The human side of a Design System @braposo playroom video youtube.com/watch?v=jnV1u67_yVg #DesignSystemsLondon

Slide 25

The human side of a Design System #DesignSystemsLondon @braposo

Slide 26

The human side of a Design System #DesignSystemsLondon @braposo

Slide 27

The human side of a Design System #DesignSystemsLondon @braposo

Slide 28

The human side of a Design System Design System is the relationships #DesignSystemsLondon @braposo

Slide 29

The human side of a Design System #DesignSystemsLondon @braposo

Slide 30

@braposo The human side of a Design System Designers #DesignSystemsLondon Developers Managers

Slide 31

The human side of a Design System @braposo Relationships are based on trust and being present #DesignSystemsLondon

Slide 32

The human side of a Design System #DesignSystemsLondon @braposo

Slide 33

The human side of a Design System @braposo Design Systems can be the single point of failure #DesignSystemsLondon

Slide 34

The human side of a Design System Make Design Systems more open #DesignSystemsLondon @braposo

Slide 35

The human side of a Design System Make Design Systems more accessible #DesignSystemsLondon @braposo

Slide 36

The human side of a Design System Make Design Systems more human #DesignSystemsLondon @braposo

Slide 37

The human side of a Design System @braposo figma.com #DesignSystemsLondon

Slide 38

The human side of a Design System @braposo airbnb.design/the-evolution-of-tools #DesignSystemsLondon

Slide 39

The human side of a Design System Get all text styles in a specific frame #DesignSystemsLondon @braposo

Slide 40

The human side of a Design System #DesignSystemsLondon @braposo

Slide 41

The human side of a Design System What if we could use something simpler? #DesignSystemsLondon @braposo

Slide 42

@braposo The human side of a Design System Get all text styles in a specific frame #DesignSystemsLondon file(id: “fileID”) { frames(name: “typography”) { texts { name styles { fontSize fontFamily fontWeight } } } }

Slide 43

The human side of a Design System #DesignSystemsLondon @braposo

Slide 44

The human side of a Design System @braposo figma-graphql figma-graphql.party #DesignSystemsLondon

Slide 45

The human side of a Design System @braposo brps.me/gqlconf19 #DesignSystemsLondon

Slide 46

The human side of a Design System #DesignSystemsLondon @braposo

Slide 47

The human side of a Design System #DesignSystemsLondon @braposo

Slide 48

The human side of a Design System #DesignSystemsLondon @braposo

Slide 49

The human side of a Design System @braposo We need different tools for this new relationship #DesignSystemsLondon

Slide 50

The human side of a Design System Interplay interplayapp.com #DesignSystemsLondon @braposo

Slide 51

The human side of a Design System Alva meetalva.io #DesignSystemsLondon @braposo

Slide 52

The human side of a Design System UXPin Merge uxpin.com/merge #DesignSystemsLondon @braposo

Slide 53

The human side of a Design System Framer X framer.com #DesignSystemsLondon @braposo

Slide 54

The human side of a Design System Builder X builderx.io #DesignSystemsLondon @braposo

Slide 55

The human side of a Design System Modulz modulz.app #DesignSystemsLondon @braposo

Slide 56

The human side of a Design System The end… #DesignSystemsLondon @braposo

Slide 57

The human side of a Design System #DesignSystemsLondon @braposo

Slide 58

The human side of a Design System Design System is the language #DesignSystemsLondon @braposo

Slide 59

The human side of a Design System @braposo Each Design System has its own language #DesignSystemsLondon

Slide 60

The human side of a Design System What’s the english of Design Systems? #DesignSystemsLondon @braposo

Slide 61

The human side of a Design System A common format for Design Systems #DesignSystemsLondon @braposo

Slide 62

The human side of a Design System #DesignSystemsLondon @braposo

Slide 63

The human side of a Design System #DesignSystemsLondon @braposo

Slide 64

@braposo The human side of a Design System Design System Utils #DesignSystemsLondon System UI Style Dictionary

Slide 65

The human side of a Design System Diez diez.org #DesignSystemsLondon @braposo

Slide 66

The human side of a Design System Storybook CSF storybook.js.org #DesignSystemsLondon @braposo

Slide 67

The human side of a Design System Lona github.com/airbnb/Lona #DesignSystemsLondon @braposo

Slide 68

The human side of a Design System Avocode SDK avocode.com/sdk #DesignSystemsLondon @braposo

Slide 69

The human side of a Design System #DesignSystemsLondon @braposo

Slide 70

The human side of a Design System @braposo Design System becomes invisible to everyone #DesignSystemsLondon

Slide 71

The human side of a Design System Main takeaways! #DesignSystemsLondon @braposo

Slide 72

The human side of a Design System @braposo Use the documentation as a starting point #DesignSystemsLondon

Slide 73

The human side of a Design System Add code to improve the design process #DesignSystemsLondon @braposo

Slide 74

The human side of a Design System @braposo Think about the people using the Design System #DesignSystemsLondon

Slide 75

The human side of a Design System @braposo Make the Design System open to everyone #DesignSystemsLondon

Slide 76

The human side of a Design System @braposo Make the Design System open to everyone #DesignSystemsLondon

Slide 77

The human side of a Design System Thank you! brps.me/dsl19

@braposo #DesignSystemsLondon @braposo