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
67
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
65
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
64
Analisa Kesusasteraan
aziziyazit
0
17
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
200
Logo basic prog lang (Hafsa)
aziziyazit
0
25
Back to the basic (Agile Manifesto)
aziziyazit
0
220
Other Decks in Education
See All in Education
プレゼンテーション実践
takenawa
0
8.3k
SARA Annual Report 2024-25
sara2023
1
190
実務プログラム
takenawa
0
8.3k
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
520
データ分析
takenawa
0
8.3k
Common STIs in London: Symptoms, Risks & Prevention
medicaldental
0
140
CHARMS-HP-Banner
weltraumreisende
0
310
検索/ディスプレイ/SNS
takenawa
0
8.3k
2025年度春学期 統計学 第7回 データの関係を知る(2)ー回帰と決定係数 (2025. 5. 22)
akiraasano
PRO
0
120
アントレプレナーシップ教育 ~ 自分で自分の幸せを決めるために ~
yoshizaki
0
140
Education-JAWS #3 ~教育現場に、AWSのチカラを~
masakiokuda
0
180
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
240
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Practical Orchestrator
shlominoach
189
11k
The Cult of Friendly URLs
andyhume
79
6.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Scaling GitHub
holman
460
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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