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
52
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
33
Analisa Kesusasteraan
aziziyazit
0
3
Design System 101
aziziyazit
0
85
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
200
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
170
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
170
Logo basic prog lang (Hafsa)
aziziyazit
0
17
Back to the basic (Agile Manifesto)
aziziyazit
0
200
Math Proj Based
aziziyazit
0
56
Other Decks in Education
See All in Education
勉強したらどうなるの?
mineo_matsuya
10
6.9k
中野区ミライ★ライター倶楽部presents『MINT』
nakamuramikumirai
0
440
1216
cbtlibrary
0
270
ルクソールとツタンカーメン
masakamayama
1
1.1k
Medidas en informática
irocho
0
900
Unraveling JavaScript Prototypes
debug_mode
0
140
MySmartSTEAM2425
cbtlibrary
0
110
ヘイトスピーチがある世界のコミュニケーション
ktanishima
0
770
2024年度秋学期 統計学 第6回 データの関係を知る(1)ー相関関係 (2024. 10. 30)
akiraasano
PRO
0
110
HCL Notes/Domino 14.5 EAP Drop1
harunakano
1
140
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.5k
Kaggle 班ができるまで
abap34
1
250
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
Navigating Team Friction
lara
183
15k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
RailsConf 2023
tenderlove
29
980
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
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