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
180
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.3k
Make Linting Great Again (Long version)
okonet
0
51
Modular CSS v2 (CSS-in-JS edition)
okonet
3
920
Make Linting Great Again
okonet
0
160
Modular CSS — Agent Conf '17 Edition
okonet
3
310
Modular CSS
okonet
3
250
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
73
Профессия "Front-end архитектор"
okonet
0
120
Other Decks in Education
See All in Education
Поступление в ТОГУ 2024
pnuslide
0
26k
3 занятие. Канва бизнес-модели #ideaNN 2.02.2024.
karlov
0
190
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
20240319AJG
tosseto
0
270
キャリアと組織の成長塾#1 アスリートからエンジニアの道へ
takashi_toyosaki
1
380
STEAM教育の枠組で行うプログラミング学習
asial_edu
0
160
人生の転機からチャンスを掴む「シュロスバーグの4Sモデル」/4s-models
yuko_yokouchi
0
330
執筆テーマの決め方
sapi_kawahara
1
150
2023年度桜井政成ゼミ資料_論文の探し方・読み方
masanari
6
2.1k
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
signer
PRO
0
1.4k
Pre-enrollment Information for UTokyo International Students
utokyoissr2360
0
3.8k
5 занятие. Разбор метода "8 кубиков"бизнес-модели #ideaNN 16.02.2024.
karlov
0
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Gamification - CAS2011
davidbonilla
76
4.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Teambox: Starting and Learning
jrom
126
8.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
What the flash - Photography Introduction
edds
64
11k
Agile that works and the tools we love
rasmusluckow
323
20k
Designing Experiences People Love
moore
135
23k
Optimizing for Happiness
mojombo
369
69k
The Mythical Team-Month
searls
214
42k
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