Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
All the things I know about building design sys...
Search
Diana
April 01, 2016
Design
3
1k
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
Color from Chaos
broccolini
5
130
Design Systems: when and how much?
broccolini
5
1.1k
Color Systems
broccolini
2
550
Building design systems at GitHub
broccolini
6
1.5k
Competence, compassion, and confidence
broccolini
2
520
Empowering designers to code (2)
broccolini
13
1.1k
Empowering Designers to Code
broccolini
3
850
Responding to change
broccolini
0
310
Designing Your App
broccolini
15
610
Other Decks in Design
See All in Design
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Bash Introduction
62gerente
610
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Automating Front-end Workflow
addyosmani
1367
200k
Embracing the Ebb and Flow
colly
84
4.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Designing for humans not robots
tammielis
250
25k
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!