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
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
290
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
370
AIでLINEスタンプを作ってみた
eycjur
1
230
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
print("Hello, World")
eddie
2
530
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
490
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
310
Testing Trophyは叫ばない
toms74209200
0
870
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Invisible Side of Design
smashingmag
301
51k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimizing for Happiness
mojombo
379
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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