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
71
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Nasionalisme Melayu 1920 - 1948
aziziyazit
0
38
UKM - MFE
aziziyazit
0
71
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
93
Analisa Kesusasteraan
aziziyazit
0
25
Design System 101
aziziyazit
0
140
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
220
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
200
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
210
Logo basic prog lang (Hafsa)
aziziyazit
0
32
Other Decks in Education
See All in Education
データで見る赤ちゃんの成長
syuchimu
0
320
Alumnote inc. Company Deck
yukinumata
0
3.5k
2025年度春学期 統計学 第15回 分布についての仮説を検証する ー 仮説検定(2) (2025. 7. 17)
akiraasano
PRO
0
120
日本の情報系社会人院生のリアル -JAIST 修士編-
yurikomium
1
130
Adobe Express
matleenalaakso
1
8k
フィードバックの伝え方、受け身のココロ / The Way of Feedback: Words and the Receiving Heart
spring_aki
1
170
1014
cbtlibrary
0
260
(2025) L'origami, mieux que la règle et le compas
mansuy
0
150
Sanapilvet opetuksessa
matleenalaakso
0
33k
Web Application Frameworks - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
0
3k
Портфолио - Шынар Ауелбекова
shynar
0
120
理想の英語力に一直線!最高効率な英語学習のすゝめ
logica0419
6
430
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
For a Future-Friendly Web
brad_frost
180
9.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Facilitating Awesome Meetings
lara
56
6.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Designing Experiences People Love
moore
142
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
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