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
1.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
160
Design Systems: when and how much?
broccolini
5
1.2k
Color Systems
broccolini
2
570
Building design systems at GitHub
broccolini
6
1.6k
Competence, compassion, and confidence
broccolini
2
560
Empowering designers to code (2)
broccolini
13
1.1k
Empowering Designers to Code
broccolini
3
880
Responding to change
broccolini
0
340
Designing Your App
broccolini
15
650
Other Decks in Design
See All in Design
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
110
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
450
アクセシビリティに取り組むメリット
magi1125
2
270
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
170
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.6k
maki setoguchi
maki_setoguchi
0
520
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
210
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
130
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Pragmatic Product Professional
lauravandoore
36
7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Context Engineering - Making Every Token Count
addyosmani
8
310
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Adaptive Systems
keathley
44
2.8k
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!