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
71
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Nasionalisme Melayu 1920 - 1948
aziziyazit
0
38
UKM - MFE
aziziyazit
0
71
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
93
Analisa Kesusasteraan
aziziyazit
0
25
Design System 101
aziziyazit
0
140
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
220
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
200
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
210
Logo basic prog lang (Hafsa)
aziziyazit
0
32
Other Decks in Education
See All in Education
~キャラ付け考えていますか?~ AI時代だからこそ技術者に求められるセルフブランディングのすゝめ
masakiokuda
7
500
20250830_本社にみんなの公園を作ってみた
yoneyan
0
130
Google Gemini (Gem) の育成方法
mickey_kubo
2
190
20250807_がんばらないコミュニティ運営
ponponmikankan
0
180
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.2k
Web Application Frameworks - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
0
3k
AI for Learning
fonylew
0
200
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
380
Web Architectures - Lecture 2 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
バケットポリシーの記述を誤りマネコンからS3バケットを操作できなくなりそうになった話
amarelo_n24
1
110
「実践的探究」を志向する日本の教育研究における近年の展開 /jera2025
kiriem
0
110
尊敬語「くださる」と謙譲語「いただく」の使い分け
hysmrk
0
110
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Become a Pro
speakerdeck
PRO
29
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Facilitating Awesome Meetings
lara
56
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Docker and Python
trallard
46
3.6k
Code Reviewing Like a Champion
maltzj
526
40k
GitHub's CSS Performance
jonrohan
1032
470k
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