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
190
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.5k
Make Linting Great Again (Long version)
okonet
0
64
Modular CSS v2 (CSS-in-JS edition)
okonet
3
1k
Make Linting Great Again
okonet
0
160
Modular CSS — Agent Conf '17 Edition
okonet
3
330
Modular CSS
okonet
3
250
JavaScript для насыщенных пользовательских интерфейсов
okonet
0
77
Профессия "Front-end архитектор"
okonet
0
130
Other Decks in Education
See All in Education
Comment aborder et contribuer sereinement à un projet open source ? (Masterclass Université Toulouse III)
pylapp
0
3.2k
小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル案/curriculum model
codeforeveryone
2
2.3k
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.4k
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
1
2.6k
Kaggle 班ができるまで
abap34
1
190
Flip-videochat
matleenalaakso
0
14k
1030
cbtlibrary
0
300
Ch2_-_Partie_3.pdf
bernhardsvt
0
100
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
19k
Comezando coas redes
irocho
0
370
謙虚なアジャイルコーチ__アダプティブ_ムーブ_による伴走支援.pdf
antmiyabin
0
270
Qualtricsで相互作用実験する「SMARTRIQS」実践編
kscscr
0
290
Featured
See All Featured
Teambox: Starting and Learning
jrom
133
8.8k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Facilitating Awesome Meetings
lara
50
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
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