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
34
Analisa Kesusasteraan
aziziyazit
0
5
Design System 101
aziziyazit
0
86
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
TP5_-_UV.pdf
bernhardsvt
0
140
Juvenile in Justice
oripsolob
0
140
付箋を使ったカラオケでワイワイしましょう / Scrum Fest Okinawa 2024
bonbon0605
0
140
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.7k
ルクソールとツタンカーメン
masakamayama
1
1.2k
Ilman kirjautumista toimivia sovelluksia
matleenalaakso
1
20k
2024年度秋学期 統計学 第11回 分布の「型」を考える - 確率分布モデルと正規分布 (2024. 12. 4)
akiraasano
PRO
0
110
1106
cbtlibrary
0
450
ニュースメディアにおける生成 AI の活用と開発 / UTokyo Lecture Business Introduction
upura
0
230
Ch2_-_Partie_2.pdf
bernhardsvt
0
120
Why Did Douglass Change His Mind?
oripsolob
0
280
Sähköiset kyselyt, kokeet ja arviointi
matleenalaakso
1
18k
Featured
See All Featured
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing for Performance
lara
604
68k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Rails Girls Zürich Keynote
gr2m
94
13k
KATA
mclloyd
29
14k
Code Review Best Practice
trishagee
66
17k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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