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
70
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
36
UKM - MFE
aziziyazit
0
68
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
85
Analisa Kesusasteraan
aziziyazit
0
23
Design System 101
aziziyazit
0
130
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
200
Logo basic prog lang (Hafsa)
aziziyazit
0
29
Other Decks in Education
See All in Education
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
220
学びは趣味の延長線
ohmori_yusuke
0
100
Alumnote inc. Company Deck
yukinumata
0
1.9k
RSJ2025 ランチョンセミナー 一歩ずつ世界へ:学生・若手研究者のための等身大の国際化の始め方
t_inamura
0
280
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
830
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
2025/06/05_読み漁り学習
nag8
0
190
アントレプレナーシップ教育 ~ 自分で自分の幸せを決めるために ~
yoshizaki
0
170
Linuxのよく使うコマンドを解説
mickey_kubo
1
260
EVOLUCIÓN DE LAS NEUROCIENCIAS EN LOS CONTEXTOS ORGANIZACIONALES
jvpcubias
0
150
20250611_なんでもCopilot1年続いたぞ~
ponponmikankan
0
170
高校におけるプログラミング教育を考える
naokikato
PRO
0
160
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
BBQ
matthewcrist
89
9.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Music & Morning Musume
bryan
46
6.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
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