Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
All the things I know about building design systems
Diana
April 01, 2016
Design
3
720
All the things I know about building design systems
Lightning talk for the Clarity conference closing party.
Diana
April 01, 2016
Tweet
Share
More Decks by Diana
See All by Diana
broccolini
5
56
broccolini
5
710
broccolini
2
320
broccolini
6
990
broccolini
2
150
broccolini
13
610
broccolini
3
460
broccolini
0
49
broccolini
15
530
Other Decks in Design
See All in Design
youknowcast
1
140
olloui
0
100
alyciawhite25
0
140
jjgallaher
PRO
0
370
angelofalls
0
410
bread
0
140
donnewin
0
450
sn_taiga
0
280
avyjonsay
0
110
avyjonsay
0
120
kignato1
0
190
hsmtyshs
PRO
3
1.3k
Featured
See All Featured
schacon
145
6.6k
chriscoyier
498
130k
jonyablonski
19
1.2k
mongodb
23
3.9k
lara
590
61k
jcasabona
8
550
orderedlist
PRO
328
36k
3n
163
22k
davidbonilla
70
3.6k
notwaldorf
16
1.8k
ddemaree
273
31k
lauravandoore
437
28k
Transcript
How people build software ! " G’day
How people build software ! " I’m Diana Mounter @broccolini
How people build software ! Diana Mounter! Come to Buzzfeed
and do a talk! 3 About what? All the things you know!
How people build software ! " All the things I
know About building design systems
How people build software ! ! 5 !
How people build software ! Write down your principles 6
1
How people build software ! Yup! 7 You’re gonna do
it OOCSS/ functional/atomic/BEM right?
How people build software ! 8 When you actually see
the code
How people build software ! 9 Lots of arguments vibrant
discussions
How people build software ! 10 After 6 months of
learning the hard way… Principle led development!
How people build software ! ! 11 !
How people build software ! 12 IT’S A UNIX SYSTEM
I KNOW THIS!
How people build software ! "
How people build software ! "
How people build software ! 15
How people build software ! ! Write down your principles
16 •Styleguide driven design and development •Obvious and transparent •Components, Objects, Utilities •Naming convention •Property order
How people build software ! Naming things is hard, but
it can be easier 17 2
How people build software ! 18 Choose a naming convention
• Show the options in code • Describe the pros and cons
How people build software ! 19 Is it searchable? •
In markup and CSS
How people build software ! 20 Easy to understand, quick
to internalize <div class="box xs-mt-2 bg-gray">
How people build software ! 21 Make a list of
all your classes .boxed-group .simple-box .box-group .box-simple
How people build software ! You can keep things (mostly)
up-to-date 22 3
How people build software ! 23 Use routine events to
make updates • Onboarding • Training
How people build software ! 24 Make it part of
your code review checklist • Did you update the docs?
How people build software ! Make it easy for everyone
to contribute to documentation 25 4
How people build software ! 26
How people build software ! Let people play with the
lego 27 5
How people build software ! Let people play with the
lego 28 1
How people build software ! 29 Cap: Check out basscss.
It’s a class library that lets you build new UI elements quickly. Sam: I hate it! https://medium.com/buzzfeed-design/how-i-learned-to-stop- worrying-and-love-the-atomic-class-98d6ccc45781#.ootp6rbxh
How people build software ! 30 Give designers a prototyping
environment that is easy to setup and uses production CSS.
How people build software ! 31 Styleguides are a gateway
drug for empowering designers to code.
How people build software ! Look forward, don’t look back
32 6
How people build software ! 33
How people build software ! 34 Not everything needs to
be changed all at once.
How people build software ! Just do it (but choose
your ships!) 35 7
How people build software ! " Thanks!