デザインを多くに伝える『ことば』に変え、メンテナンスし続けることがシステムをデザインするということ。 その『ことば』達の辞書であるDesign Systemsを作るために必要な気づき、人、そしてチームについて。
Design Systemas a ProductYuya Saito @ NikkeiFrontrend Vol.82016.12.05
View Slide
Frontend Engineer @ NikkeiYuya Saito
frontendweekly.tokyoFrontend Weekly
WHat isDesign System?
“A design system is everything that makesup your product.— Mark Otto
TypographyLayoutGridColorIconComponentsCoding Style…
Examples
Bootstrapby Twitter
MaterialDesignby Google
LightningDesignSystemby salesforce
PredixDesignSystemby GE
Origamiby Financial Times
Why Do We NeedDesign System?
by OpenSignal
DesignTechnical debt
1
Managed Chaos
Components ofDesign System
Style Guides
Brandidentity
Designlanguage
Voice andtone
Code style
PatternLibraries
Problem withDesign System
Design System
Goal for Design System
Scaling is Hard
Evangelising is Harder
People for Design System
“A Design System isn’t a project.It’s a product, serving products.— Nathan Curtis
IntroduceThe Talents
デザイナがどんなコンセプトを形にしようとしているのかについて共感できること
エンジニアがシステムを作るのに必要となる仕様や⽅法論について理解できること
デザイナとエンジニアの中間に⾝を置けるバランス感覚を持った⼈
Design Fundamentals
Tiny Debtalso scale fast
Should Designer Code?
Not gonna lie.It’s too hard to learn it now
デザイナとエンジニアにはギャップがある
ContinuousCollaboration
Continuous Delivery
ConceptDesign SystemDevelop
Why?
ベストケースシナリオ vs.現実的なデータ
"Living" Design System
⽬に⾒えているものの、⾔葉にしづらかったビジュアルを⾔語化する
IntroduceTeam Model
Operation
Local development environment⾃動リロード⾃動コンパイルとソースマップなど…ローカル開発環境
Front-end automated testingJavaScriptのユニットテストE2Eテストアクセシビリティのテストなど…ユニット、E2Eテストなどの⾃動化
Cross-browser test automation先ほどのテスト群を、様々なブラウザでもテストできる環境クロス・ブラウザテストの⾃動化
Visual regression testingUIコンポーネントの表⽰テストビジュアル・リグレッション
DocumentationJSDocSassDoc...ドキュメント⽣成
Automate & Integrate
Solitary Model単⽣モデル
Mini Bootstrapを作って、それを⾊んな⼈に使って貰う
確⽴されたパターンライブラリの存在は⼤きな利点
Design System product
⾃分達の解決が気にいらないなら、使わなくても構わない
Centralized Model中央集権モデル
Best for Agency
Pattern Libraryproductproduct productproduct
アクティブな参加や貢献を得づらい
Federated Model連合モデル
UX IAIxD
Not for Everyone
Which Model IsBest for Me?
It Depends...
• 会社の規模• プロダクトの規模• Design Systemのスコープ
Design System Isa product
Goal
わかりやすく売り上げが出るプロダクトではない
Product NeedsA team
Team
チームの利点
“ͲΜͳΞϓϦͰ͋Ζ͏ͱɺαʔϏεͰ͋Ζ͏ͱຊʹඞཁͳͷ༷ʑͳઐੑΛ࣋ͬͨਓୡͰฤ͞ΕΔνʔϜͰ͢ɻٻΊΒΕ͍ͯΔઐੑΛνʔϜͰൃشͰ͖Δਓɺ͕ࣗࣗ࣋ͭઐҎ֎ͷԞਂ͞Λ͍ͬͯΔਓͰ͢ɻ— Yuya Saito
Thank you!@cssradar