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
Component-Driven Design Systems Workshop
Search
Andrey Okonetchnikov
April 24, 2019
Education
0
200
Component-Driven Design Systems Workshop
https://component-driven.io
Andrey Okonetchnikov
April 24, 2019
Tweet
Share
More Decks by Andrey Okonetchnikov
See All by Andrey Okonetchnikov
A Common Design Language
okonet
2
1.7k
Make Linting Great Again (Long version)
okonet
0
68
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1.1k
Make Linting Great Again
okonet
0
160
Modular CSS — Agent Conf '17 Edition
okonet
3
360
Modular CSS
okonet
3
260
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
86
Профессия "Front-end архитектор"
okonet
0
150
Other Decks in Education
See All in Education
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
AIの時代こそ、考える知的学習術
yum3
2
150
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
470
SkimaTalk Teacher Guidelines Summary
skimatalk
0
780k
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
100
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.4k
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
6.6k
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
19
12k
2025/06/05_読み漁り学習
nag8
0
130
SARA Annual Report 2024-25
sara2023
1
170
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
maryang
0
100
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
510
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.8k
Raft: Consensus for Rubyists
vanstee
138
7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Ace a Technical Interview
jacobian
276
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Docker and Python
trallard
44
3.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Code Review Best Practice
trishagee
68
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Transcript
Component-Driven Design Systems Workshop
component driven.io https://component-driven.io @okonetchnikov @iamsapegin @ComponentDriven
@okonetchnikov UI developer with an experience in both design and
development who specializes in interaction design, design systems and modern frontend development.
UI engineer working with web technologies since 1999. Creator of
react- styleguidist and component-driven- development @iamsapegin
bit.ly/cddwrkshp Workshop GitHub page
What’s on your mind?
Plan for today
Plan for today ✓ DS theory ✓ UI Inventory ✓
Introduction to CDD ✓ Design Tokens ✓ UI Primitives ✓ Layout & Whitespace Management ✓ UI Composition
Design language Typography Color Spacing UX
No whitespace Added whitespace Typography
Low contrast High contrast Color
Spacing No structure Structured content
Design language • Establishes the brand • Adds consistency •
Improves accessibility
Brand
Dropbox Yandex.Disk Brand
Consistency
Accessibility
Accessibility
How do we enforce design language?
Design Systems
“Design system defines a set of design- related rules as
a system of instructions that can be re-used across single or multiple products”
German government vs Austrian government
German federal government web-sites
German federal government web-sites
German federal government web-sites
Design system
Austrian federal government web-sites
Austrian federal government web-sites
Austrian federal government web-sites
Austrian federal government web-sites
No design system
Component-driven Design Systems
The Process 1. Analyze & Plan 2. Execute 3. Maintain
4. PROFIT!
1. Analyze & Plan
Where to start 1. Analyze & find problems (UI Inventory)
2. Document 3. Plan 4. Execute!
UI inventory process
UI inventory process
UI inventory process
UI inventory process
Document
Plan
https://bit.ly/2U3hdss
2. Execute Building styleguides
Styleguides
“Styleguide is a collection of rules, patterns and components that
are re- usable across single or multiple products.”
https://vueds.com/example/#!/Design%20Tokens
https://material-ui-next.com/style/color/
https://www.lightningdesignsystem.com/design-tokens/
https://vueds.com/example/#!/Design%20Tokens?id=all
https://ant.design/components/button/
https://react-bootstrap.github.io/components/buttons/
https://www.lightningdesignsystem.com/components/avatar/
https://dialogs.github.io/dialog-web-components/
http://jxnblk.com/rebass/getting-started
http://blueprintjs.com/docs/v2/#icons
Good styleguides • A common language for designers, developers, PMs
• Easy to use: good structure + relevant content • Styleguide = documentation • Easy to create & maintain • Always up-to-date
Styleguide generators
None
https://storybook.js.org
None
https://www.catalog.style
react-cosmos
https://github.com/react-cosmos/react-cosmos
None
https://react.feedly.com
npm start
Directory structure for component-driven development
Design Tokens
–https://www.lightningdesignsystem.com/design-tokens/ “Design tokens are the visual design atoms of the
design system — specifically, they are named entities that store visual design attributes”
Typography scale a a a a a a a a
a a a a a a a a a
http://webtypography.net/3.1.1
Naming • x-small small medium large x-large • xs, sm,
md, lg, xl • xs s m l xl • 0, 1, 2, 3, 4, 5 • alpha beta gamma delta epsilon
Linear progression Geometric progression Spacing scale
Spacing
https://design.lyft.com/re-approaching-color-9e604ba22c88 Color palettes
https://www.colorbox.io
https://colorsnapper.com
Color tokens
⚒ DesignTokens
UI Primitives
None
Button
Label Button Icon Input Avatar
Label Button Icon Input Avatar
Login Form
Label Button Icon Input Avatar
Search Toolbar
Label Button Icon Input Avatar
⚒ Primitives
Component variations <Button primary /> <Button secondary />
Component variations // Don't do this <Button primary /> <Button
secondary /> // Impossible state! <Button primary secondary />
Component variations // Do this instead! <Button variant="primary" /> <Button
variant="secondary" />
Accessing design tokens // Hard coded value styled.button`color: tomato;`
Accessing design tokens // Value from the static imported theme
import {colors} from './theme.js'; styled.button`color: ${colors.primary};`
Accessing design tokens // Value coming from the theme styled.button`
color: ${props => props.theme.colors.primary}; `
Accessing design tokens // Value coming from the theme (shorthand)
import {themeGet} from 'styled-system'; styled.button` color: ${themeGet('colors.primary')}; `
API for design tokens import { color } from 'styled-system';
const Text = styled.p`${color};` Text.defaultProps = { color: 'primary' } // Renders text with primary color <Text/> // Renders text with secondary color <Text color="secondary"/> https://styled-system.com/how-it-works
⚒ Whitespace & Layout
UI Patterns
None
–https://en.wikipedia.org/wiki/Design_pattern “A design pattern is the re-usable form of a
solution to a design problem.”
A Pattern Language: Towns, Buildings, Construction Christopher Alexander
http://ui-patterns.com/patterns/PasswordStrengthMeter
https://react.feedly.com/#inputsuggestionlist
Patterns • A great way to communicate • Suitable for
both designers & developers (and many others) • Solve particular design problems • Re-usable • …
3. Maintain
Process Development Product Design
Process Product Design & Development
Process Product Design & Development Styleguide
Process Design & Development Design System
Process Design & Development Design System
Benefits of CDD • Develop in isolation • Faster feedback
loop • See all possible states • Easier to refactor • Documentation!
Reasons for CDD • A common language for designers &
developers • Enforce design language & design system • Consistent UI • Scales: single or multiple products • Up-to-date documentation
How to start? • Don’t ask for permission, just start!
• Make a thing • Show it’s useful • Commit!
Discussion What problems are you facing…
Further reading
Atomic Design Brad Frost
Design Systems Alla Kholmatova
A Pattern Language: Towns, Buildings, Construction Christopher Alexander
The Elements of Typographic Style Robert Bringhurst
http://webtypography.net
• https://www.styled-components.com • github.com/jxnblk/styled-system • https://github.com/rebassjs/grid • https://github.com/rebassjs/space • https://github.com/sapegin/stack-styled
• github.com/jxnblk/macro-components
component driven.io https://component-driven.io @okonetchnikov @iamsapegin @ComponentDriven