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
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
250
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
950
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
190
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
1
270
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
900
Go言語はstack overflowの夢を見るか?
logica0419
0
340
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
850
CSC509 Lecture 04
javiergs
PRO
0
300
私はどうやって技術力を上げたのか
yusukebe
43
19k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Writing Fast Ruby
sferik
629
62k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Unsuck your backbone
ammeep
671
58k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
The Language of Interfaces
destraynor
162
25k
Mobile First: as difficult as doing things right
swwweet
224
10k
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