Bulletproof your Design system

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

14. None

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

37. None
38. None

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

46. None

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