Bulletproof your Design System

The hardest part of Design Systems is neither the coding nor the deploying; it’s the adoption. Encouraging teams to use it and to integrate it as part of their workflow is no easy task and it is the key to avoid the dreaded “Failure of the Design System”. In this talk, we are going to explore multiple tools and strategies that will help you and your teams increase the adoption of your design system across your company. From simplifying testing, to smooth implementation and maintenance. Join us to make your design system truly bulletproof.

Transcript

1. Bulletproof your Design System Eva Ferreira –Shift Conference, 2023
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. Basically… It’s a set of tools @evaferreira92
10. Design Systems empower Engineers and Designers To do their work better, faster and with higher quality. @evaferreira92
11. Benefits of a Design System
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. Benefits • Achieves visual consistency • Avoids redundancy • Lowers the amount of work on new features • Fosters a shared vocabulary • Helps onboarding new team members
14. Mirta Legrand
16. Benefits • Achieves visual consistency • Avoids redundancy • Lowers the amount of work on new features • Fosters a shared vocabulary • Helps onboarding new team members
17. 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)
18. IF THEY ARE SO GOOD WHY DO THEY FAIL?
19. Why do Design Systems fail?
20. Why do Design Systems fail? • It wasn’t sold correctly • It didn’t have enough research when created • It wasn’t built with team collaboration in mind • It was built at the wrong time @evaferreira92
21. “Let’s just use Bootstrap” A kitten dies. A Front-end engineer cries. A Designer is desolated. @evaferreira92
22. How to avoid failure? How do we get people to actually use it?
23. Avoiding failure • Research • Adoption • Maintenance @evaferreira92
24. Research Is there a pilot project? What’s the current state of our apps?
25. Pilot Project Test your Design System in a real application, in a controlled environment. @evaferreira92
26. Pilot project • Potential for components and common patterns • Scope • Technically independent • Champion
27. What’s the current state of our apps? Style round-up and Interface inventory
28. cssstats.com
29. Style Round-up
30. Style Round-up
31. Interface inventory • Screenshot party 🎉 • Find common patterns • Find awfully old components • Keep / Kill • Beginning of a shared vocabulary https://bradfrost.com/blog/post/interface-inventory
32. Adoption Who are the users of our Design System? What tools do they currently use?
33. Who are the users of the Design System? Mostly designers and engineers @evaferreira92
34. Who are the users of the Design System? Mostly designers and engineers. Cross-team. @evaferreira92
35. Who are the users of the Design System? Mostly designers and engineers. Cross-team. @evaferreira92
36. https://bradfrost.com/blog/post/design-system-interview-questions/
37. Design System Interview • What does success look like? Fast forward a year from now, things are going great, everyone is thrilled with the design system. How did that happen? • What’s going to sink this ship? Fast forward a year from now and the design system initiative is a total failure. Why did it fail?
38. It’s never about the stack. React? Angular? Figma? Sketch? It does not matter. @evaferreira92
39. Whatever workflow your company uses is the right workflow
40. Maintenance Your Design System needs to stay relevant and healthy
41. Maintenance • Testing • Growth
42. Testing Are your components working as expected? @evaferreira92
43. Testing Are your components working as expected? @evaferreira92 *
44. 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)
45. Unit test it('renders with content', () => { render( <Alert>This is an alert</Alert> ); // Assert screen.getByText(This is an alert'); expectNoConsoleErrors(); });
46. A11y on the Design System Take some pressure away from your Java developer. Let designers and Front-end engineers handle the heavy work.
47. Unit + a11y tests React testing library meets axe-core
48. Adding axe-core to unit tests • Run accessibility tests on your components • Look for violations on different states • Add it to your pipelines
49. Unit + a11y tests 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() });
50. A11y add-on for Storybook
53. Integrate into your workflow Use those unit tests on your continuous integration
54. Wait, what about the add-on? Not yet! But it’s in the roadmap ➡️ https://storybook.js.org/addons/@storybook/addon-a11y
56. name: Here you go, axe! # Controls when the workflow will run on: # Triggers the workflow on push or pull request events but only for the "main" branch push: branches: [ "main" ] pull_request: branches: [ "main" ]
57. # Steps represent a sequence of tasks that will be executed as part of the job steps: # Runs a set of commands using the runners shell - name: Install dependencies run: npm ci - name: Create build run: npm run build - name: Run tests run: npm run test
58. # Steps represent a sequence of tasks that will be executed as part of the job steps: # Runs a set of commands using the runners shell - name: Install dependencies run: npm ci - name: Create build run: npm run build - name: Run tests run: npm run test
59. # Steps represent a sequence of tasks that will be executed as part of the job steps: # Runs a set of commands using the runners shell - name: Install dependencies run: npm ci - name: Create build run: npm run build - name: Run tests run: npm run test
60. Growth Scaling in a healthy way @evaferreira92
61. Documenting the component library Stories!
62. 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
63. Stories for components
64. Stories for components WITH A GREAT COMPONENT COMES A GREAT STORY
65. New component means new story
66. Force story creation https://stackoverflow.com/questions/75459508/ensure-every-component-has-a-storybook-story
68. @evaferreira92
69. Maintaining the component library Who? How? When?
70. Team models • Solidary • Centralized • Federated https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
71. 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
72. 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
73. Federated • Governance • Group of developers and designers representing each team • Decision making takes longer
74. Foster collaboration The more people participates, the more people will use it
75. Measure success UI Library Market Share @evaferreira92
76. https://rangle.io/blog/market-share-success-design-system
77. UI Library Market share
78. Takeaways
79. 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🫂
80. Software is a living thing! As such, it needs to be taken cared of 🌿
81. Thank you! @evaferreira92