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
48
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
70
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
190
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
160
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
160
Logo basic prog lang (Hafsa)
aziziyazit
0
15
Back to the basic (Agile Manifesto)
aziziyazit
0
180
Math Proj Based
aziziyazit
0
48
3L-Components
aziziyazit
0
160
Build Scalable Design System Using Provider-Consumer Pattern
aziziyazit
0
140
Other Decks in Education
See All in Education
Materiales para Marketing Digital
navarromorales
0
1.5k
2024年度春学期 統計学 第4回 データを「分布」で見る (2024. 5. 2)
akiraasano
PRO
0
140
「最初の本」の紹介
eltociear
1
210
week15@tcue2024
nonxxxizm
0
380
Прием на целевое обучение
pnuslide
0
4.7k
ポケモンで音象徴
jamashita
0
260
プロダクト・エンジニア・QAE 3軸でのナレッジシェアのススメ
hinac0
1
520
#英語力ランキング批判:EF-EPI,TOEFLスコア,英語教育実施状況調査
terasawat
0
450
自己紹介 / who-am-i
yasulab
2
3.6k
小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル案/curriculum model
codeforeveryone
0
230
困ったときのガイドライン / We Support You in Any Situation
yasulab
2
3.6k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
1.8k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
4 Signs Your Business is Dying
shpigford
178
21k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
A Tale of Four Properties
chriscoyier
155
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Designing for Performance
lara
604
67k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Building Applications with DynamoDB
mza
89
5.8k
Being A Developer After 40
akosma
72
580k
We Have a Design System, Now What?
morganepeng
46
7k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
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