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
Bulletproof your Design system
Search
Eva Ferreira
March 26, 2025
Programming
0
40
Bulletproof your Design system
Epic Web Conf - Salt Lake City, March 2025
Eva Ferreira
March 26, 2025
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Cryptography for lovers 💖
evaferreira
0
17
Good intentions gone bad
evaferreira
0
260
Bulletproof your Design System
evaferreira
0
140
Tales of Accessibility Failures
evaferreira
0
65
Tales of Accessibility Failures
evaferreira
0
220
La accesibilidad de todos los días - HackAcademy
evaferreira
0
140
Rescue the Dead Horse
evaferreira
0
140
De 45 a 85
evaferreira
0
100
Oda a la década++
evaferreira
1
140
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
300
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
240
XP, Testing and ninja testing ZOZ5
m_seki
3
640
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
CSC509 Lecture 06
javiergs
PRO
0
260
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
420
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
490
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
820
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
KATA
mclloyd
32
15k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Six Lessons from altMBA
skipperchong
28
4k
Site-Speed That Sticks
csswizardry
11
900
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Designing for humans not robots
tammielis
254
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
How GitHub (no longer) Works
holman
315
140k
Code Reviewing Like a Champion
maltzj
526
40k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
Bulletproof your Design System Eva Ferreira – Epic Web Conf,
2025
Hi, I’m Eva! Front-end Engineer @ mabl Google Developer Expert
& CSSConf Argentina organizer @evaferreira92
Design Systems Short survey @evaferreira92
Who has one at their company? @evaferreira92
Who likes it? Do you feel like it makes your
work faster? Of better quality? Or… do you feel like it gets in the way? @evaferreira92
Some Design Systems fail @evaferreira92
What is a Design System? It’s the way your organization
designs and builds new products
It might include… • UI Style guide • UX Guidelines
• Development Guidelines • Writing Guidelines • Component Library • Repositories • Processes • Working agreements • And much more…
Design Systems empower Engineers and Designers To do their work
better, faster and with higher quality. @evaferreira92
Benefits of a Design System
Benefits • Achieves visual consistency • Avoids redundancy • Lowers
the amount of work on new features • Fosters a shared vocabulary • Helps onboarding new team members
Benefits • Achieves visual consistency • Avoids redundancy • Lowers
the amount of work on new features • Fosters a shared vocabulary • Helps onboarding new team members
Mirtha Legrand
None
Visual consistency Consistency is one of the most powerful usability
principles: When things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Top 10 Mistakes in Web Design (nngroup.com)
IF THEY ARE SO GOOD WHY DO THEY FAIL?
Why do Design Systems fail?
Avoiding failure • Research • Adoption • Maintenance @evaferreira92
Research What’s the current state of our apps?
What’s the current state of our apps? Style round-up and
Interface inventory
cssstats.com
Style Round-up
Style Round-up
@evaferreira92
@evaferreira92
Adoption Who are the users of our Design System? What
tools do they currently use?
It’s never about the stack. React? Angular? Figma? Sketch? It
does not matter. @evaferreira92
Whatever workflow your company uses is the right workflow
Maintenance Your Design System needs to stay relevant and healthy
Maintenance • Testing • Growing • Measuring success
Testing Are your components working as expected? @evaferreira92
Unit tests • More confidence on your codebase • Spot
bugs before they get to production • Use it as a way of documentation • Enables Continuous Integration (CI)
Unit test it('renders with content', () => { render( <Alert>This
is an alert</Alert> ); // Assert screen.getByText(This is an alert'); expectNoConsoleErrors(); });
A11y on the Design System Take some pressure away from
your Java developer. Let designers and Front-end engineers handle the heavy work.
Unit + axe import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations); it('should not have a11y issues', async () => { const {container} = render(<App />); expect(await axe(container)).toHaveNoViolations() });
A11y add-on for Storybook
None
None
Growing Scaling in a healthy way @evaferreira92
Documenting the component library Stories!
Stories • Stories capture the rendered state of a component
• It takes arguments that modify its state • Provides controls so non-engineers can play around with it
Stories for components
Stories for components WITH A GREAT COMPONENT COMES A GREAT
STORY
New component means new story
Force story creation https://stackoverflow.com/questions/75459508/ensure-every-component-has-a-storybook-story
None
@evaferreira92
Maintaining the component library Who? How? When?
Team models • Solidary • Centralized • Federated https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
Solidary “I made this for my team, I hope it
works for yours” • Created based on the needs of one team • No scalability plans for other teams
Centralized • Helps lots of teams and products • Evangelize
and teach how to use it correctly • Lack of participation • Lack of visibility into the day-to-day of the projects and its needs
Federated • Governance • Group of developers and designers representing
each team • Decision making takes longer
Foster collaboration The more people participate, the more people will
use it
Measure success UI Library Market Share @evaferreira92
https://rangle.io/blog/market-share-success-design-system
UI Library Market share @evaferreira92
Takeaways
Takeaways • Design Systems are an investment • They require
time to build and to maintain • It’s a set of tools • With loads of benefits • And teamwork
Software is a living thing! As such, it needs to
be taken cared of
Thank you! @evaferreira92