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
38
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
250
Bulletproof your Design System
evaferreira
0
130
Tales of Accessibility Failures
evaferreira
0
63
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
99
Oda a la década++
evaferreira
1
140
Other Decks in Programming
See All in Programming
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.2k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
AI時代のUIはどこへ行く?
yusukebe
16
8.7k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
500
Testing Trophyは叫ばない
toms74209200
0
840
AIコーディングAgentとの向き合い方
eycjur
0
260
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
250
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
120
testingを眺める
matumoto
1
140
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
510
Namespace and Its Future
tagomoris
6
700
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
620
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Language of Interfaces
destraynor
161
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Producing Creativity
orderedlist
PRO
347
40k
A better future with KSS
kneath
239
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
KATA
mclloyd
32
14k
Designing for Performance
lara
610
69k
Speed Design
sergeychernyshev
32
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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