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
Design System for Micro frontends
Search
Azizi Yazit
October 20, 2021
Education
0
61
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
45
Analisa Kesusasteraan
aziziyazit
0
11
Design System 101
aziziyazit
0
97
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
200
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
180
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
180
Logo basic prog lang (Hafsa)
aziziyazit
0
19
Back to the basic (Agile Manifesto)
aziziyazit
0
220
Math Proj Based
aziziyazit
0
56
Other Decks in Education
See All in Education
家族をスクラムチームに! アジャイルで取り組む家事と育児 | Install Scrum to Family
coosuke
PRO
1
270
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
signer
PRO
0
2k
ANS-C01_2回不合格から合格までの道程
amarelo_n24
0
110
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
130
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
0
140
Adobe Express
matleenalaakso
1
7.8k
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
220
環境・社会理工学院 建築学系 大学院入試について|Science Tokyo(東京科学大学)
sciencetokyo
PRO
0
1.1k
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
3
900
JAWS-UGを通じてアウトプット活動を楽しんでみませんか? #jawsug_tochigi
masakiokuda
0
370
宮城大学の講義にAIが演じる架空の人格を導入した事例の紹介
tendasato
1
120
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.5k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Music & Morning Musume
bryan
47
6.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
A better future with KSS
kneath
239
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
780
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
microfrontends Design system
An architectural style where independently deliverable frontend applications are composed
into a greater whole
1 2 3 incremental changes independent deployment autonomous team
A Design system is collection of reusable components, guided by
clear standard, that can be assembled together to build any number of application.
1 2 3 documented components living style guide single source
of truth
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised independent deployment autonomous team incremental changes
App 1 App 2 App 3 App 4 Independent Design
System
App 1 App 2 App 3 App 4 Independent Design
System
App 1 App 2 App 3 App 4 Independent Design
System
App 1 App 2 App 3 App 4 Independent Design
System independent deployment autonomous team incremental changes
Provider Design System Color System Spacing System Icons Atomic Components
Typography Fonts Composite Components Headless UI Compound Component Consumer Design System Customised Atomic Components Implemented Composite Components
Headless UI UI Logics & Interaction handling UI look &
feel Abstraction Implementation Provider Consumer
Headless UI
Headless UI
Headless UI
Provider-Consumer Provider Design System App 1 App 2 v1 v1
v1 v2 v2 v2 App 3 v2 App 4 v1 Consumer Design System Consumer Design System Consumer Design System Consumer Design System
Provider Design System App 1 App 2 v1 v1 v1
v2 v2 v2 App 3 v2 App 4 v1 Consumer Design System Consumer Design System Consumer Design System Consumer Design System independent deployment autonomous team incremental changes