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
65
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
UKM - MFE
aziziyazit
0
63
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
56
Analisa Kesusasteraan
aziziyazit
0
16
Design System 101
aziziyazit
0
120
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
210
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
190
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
190
Logo basic prog lang (Hafsa)
aziziyazit
0
23
Back to the basic (Agile Manifesto)
aziziyazit
0
220
Other Decks in Education
See All in Education
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
higgi13425
0
480
プログラミング教育する大学、ZEN大学
sifue
1
530
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
550
データ分析
takenawa
0
4.5k
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
280
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
230
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
510
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Speed Design
sergeychernyshev
32
1k
Code Review Best Practice
trishagee
68
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
A better future with KSS
kneath
239
17k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Facilitating Awesome Meetings
lara
54
6.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Navigating Team Friction
lara
187
15k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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