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
47
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Design System 101
aziziyazit
0
63
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
160
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
150
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
150
Logo basic prog lang (Hafsa)
aziziyazit
0
12
Back to the basic (Agile Manifesto)
aziziyazit
0
170
Math Proj Based
aziziyazit
0
37
3L-Components
aziziyazit
0
150
Build Scalable Design System Using Provider-Consumer Pattern
aziziyazit
0
120
Other Decks in Education
See All in Education
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.1k
Data Management and Analytics Specialisation
signer
PRO
0
980
Best Wedding day perfume
vicjon
0
260
Dolce and Gabbana Light Blue Perfume
vicjon
0
390
Часто задаваемые вопросы
pnuslide
0
19k
執筆テーマの決め方
sapi_kawahara
1
170
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
4 занятие. Разбор бизнес-моделей и метод красной нити #ideaNN 9.02.2024.
karlov
0
230
Baa Baa Black Sheep
haiinya
0
120
人生の転機からチャンスを掴む「シュロスバーグの4Sモデル」/4s-models
yuko_yokouchi
2
690
自己紹介 / who-am-i
yasulab
2
3k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Typedesign – Prime Four
hannesfritz
36
2k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Designing for Performance
lara
601
67k
In The Pink: A Labor of Love
frogandcode
137
21k
Statistics for Hackers
jakevdp
789
220k
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