Bulletproof your Design system

Epic Web Conf - Salt Lake City, March 2025

Transcript

1. Bulletproof your Design System Eva Ferreira – Epic Web Conf, 2025
2. Hi, I’m Eva! Front-end Engineer @ mabl Google Developer Expert & CSSConf Argentina organizer @evaferreira92
3. Design Systems Short survey @evaferreira92
4. Who has one at their company? @evaferreira92
5. 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
6. Some Design Systems fail @evaferreira92
7. What is a Design System? It’s the way your organization designs and builds new products
8. It might include… • UI Style guide • UX Guidelines • Development Guidelines • Writing Guidelines • Component Library • Repositories • Processes • Working agreements • And much more…
9. Design Systems empower Engineers and Designers To do their work better, faster and with higher quality. @evaferreira92
10. Benefits of a Design System
11. Benefits • Achieves visual consistency • Avoids redundancy • Lowers the amount of work on new features • Fosters a shared vocabulary • Helps onboarding new team members
12. Benefits • Achieves visual consistency • Avoids redundancy • Lowers the amount of work on new features • Fosters a shared vocabulary • Helps onboarding new team members
13. Mirtha Legrand
15. 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)
16. IF THEY ARE SO GOOD WHY DO THEY FAIL?
17. Why do Design Systems fail?
18. Avoiding failure • Research • Adoption • Maintenance @evaferreira92
19. Research What’s the current state of our apps?
20. What’s the current state of our apps? Style round-up and Interface inventory
21. cssstats.com
22. Style Round-up
23. Style Round-up
24. @evaferreira92
25. @evaferreira92
26. Adoption Who are the users of our Design System? What tools do they currently use?
27. It’s never about the stack. React? Angular? Figma? Sketch? It does not matter. @evaferreira92
28. Whatever workflow your company uses is the right workflow
29. Maintenance Your Design System needs to stay relevant and healthy
30. Maintenance • Testing • Growing • Measuring success
31. Testing Are your components working as expected? @evaferreira92
32. 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)
33. Unit test it('renders with content', () => { render( <Alert>This is an alert</Alert> ); // Assert screen.getByText(This is an alert'); expectNoConsoleErrors(); });
34. A11y on the Design System Take some pressure away from your Java developer. Let designers and Front-end engineers handle the heavy work.
35. 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() });
36. A11y add-on for Storybook
39. Growing Scaling in a healthy way @evaferreira92
40. Documenting the component library Stories!
41. 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
42. Stories for components
43. Stories for components WITH A GREAT COMPONENT COMES A GREAT STORY
44. New component means new story
45. Force story creation https://stackoverflow.com/questions/75459508/ensure-every-component-has-a-storybook-story
47. @evaferreira92
48. Maintaining the component library Who? How? When?
49. Team models • Solidary • Centralized • Federated https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
50. 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
51. 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
52. Federated • Governance • Group of developers and designers representing each team • Decision making takes longer
53. Foster collaboration The more people participate, the more people will use it
54. Measure success UI Library Market Share @evaferreira92
55. https://rangle.io/blog/market-share-success-design-system
56. UI Library Market share @evaferreira92
57. Takeaways
58. 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
59. Software is a living thing! As such, it needs to be taken cared of
60. Thank you! @evaferreira92