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
35
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
62
Tales of Accessibility Failures
evaferreira
0
220
La accesibilidad de todos los días - HackAcademy
evaferreira
0
130
Rescue the Dead Horse
evaferreira
0
140
De 45 a 85
evaferreira
0
98
Oda a la década++
evaferreira
1
140
Other Decks in Programming
See All in Programming
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
480
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
970
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.3k
令和最新版手のひらコンピュータ
koba789
14
7.8k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
360
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
700
Understanding Ruby Grammar Through Conflicts
yui_knk
1
110
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
730
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
55
6.5k
A better future with KSS
kneath
239
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Code Reviewing Like a Champion
maltzj
525
40k
Six Lessons from altMBA
skipperchong
28
4k
Building an army of robots
kneath
306
45k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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