$30 off During Our Annual Pro Sale. View Details »

Bulletproof your Design System

Eva Ferreira
September 19, 2023

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.

Eva Ferreira

September 19, 2023
Tweet

More Decks by Eva Ferreira

Other Decks in Technology

Transcript

  1. Bulletproof
    your Design System
    Eva Ferreira –Shift Conference, 2023

    View Slide

  2. Hi, I’m Eva!
    Front-end Engineer @ mabl
    Google Developer Expert & CSSConf Argentina organizer
    @evaferreira92

    View Slide

  3. Design Systems
    Short survey
    @evaferreira92

    View Slide

  4. Who has one at
    their company?
    @evaferreira92

    View Slide

  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

    View Slide

  6. Some
    Design Systems fail
    @evaferreira92

    View Slide

  7. What is a
    Design System?
    It’s the way your organization designs and builds new products 💅

    View Slide

  8. It might include…
    • UI Style guide
    • UX Guidelines
    • Development Guidelines
    • Writing Guidelines
    • Component Library
    • Repositories
    • Processes
    • Working agreements
    • And much more…

    View Slide

  9. Basically…
    It’s a set of tools
    @evaferreira92

    View Slide

  10. Design Systems
    empower
    Engineers and Designers
    To do their work better, faster and with higher quality.
    @evaferreira92

    View Slide

  11. Benefits of
    a Design System

    View Slide

  12. Benefits
    • Achieves visual consistency
    • Avoids redundancy
    • Lowers the amount of work on new features
    • Fosters a shared vocabulary
    • Helps onboarding new team members

    View Slide

  13. Benefits
    • Achieves visual consistency
    • Avoids redundancy
    • Lowers the amount of work on new features
    • Fosters a shared vocabulary
    • Helps onboarding new team members

    View Slide

  14. Mirta Legrand

    View Slide

  15. View Slide

  16. Benefits
    • Achieves visual consistency
    • Avoids redundancy
    • Lowers the amount of work on new features
    • Fosters a shared vocabulary
    • Helps onboarding new team members

    View Slide

  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)

    View Slide

  18. IF THEY ARE SO GOOD
    WHY DO THEY FAIL?

    View Slide

  19. Why do Design
    Systems fail?

    View Slide

  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

    View Slide

  21. “Let’s just
    use Bootstrap”
    A kitten dies. A Front-end engineer cries. A Designer is desolated.
    @evaferreira92

    View Slide

  22. How to avoid
    failure?
    How do we get people to actually use it?

    View Slide

  23. Avoiding failure
    • Research
    • Adoption
    • Maintenance
    @evaferreira92

    View Slide

  24. Research
    Is there a pilot project?
    What’s the current state of our apps?

    View Slide

  25. Pilot Project
    Test your Design System in a real application, in a controlled environment.
    @evaferreira92

    View Slide

  26. Pilot project
    • Potential for components and common patterns
    • Scope
    • Technically independent
    • Champion

    View Slide

  27. What’s the current
    state of our apps?
    Style round-up and Interface inventory

    View Slide

  28. cssstats.com

    View Slide

  29. Style Round-up

    View Slide

  30. Style Round-up

    View Slide

  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

    View Slide

  32. Adoption
    Who are the users of our Design System?
    What tools do they currently use?

    View Slide

  33. Who are the users
    of the Design System?
    Mostly designers and engineers
    @evaferreira92

    View Slide

  34. Who are the users
    of the Design System?
    Mostly designers and engineers. Cross-team.
    @evaferreira92

    View Slide

  35. Who are the users
    of the Design System?
    Mostly designers and engineers. Cross-team.
    @evaferreira92

    View Slide

  36. https://bradfrost.com/blog/post/design-system-interview-questions/

    View Slide

  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?

    View Slide

  38. It’s never
    about the stack.
    React? Angular? Figma? Sketch? It does not matter.
    @evaferreira92

    View Slide

  39. Whatever workflow
    your company uses
    is the right workflow

    View Slide

  40. Maintenance
    Your Design System needs to stay relevant and healthy

    View Slide

  41. Maintenance
    • Testing
    • Growth

    View Slide

  42. Testing
    Are your components working as expected?
    @evaferreira92

    View Slide

  43. Testing
    Are your components working as expected?
    @evaferreira92
    *

    View Slide

  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)

    View Slide

  45. Unit test
    it('renders with content', () => {
    render(
    This is an alert
    );
    // Assert
    screen.getByText(This is an alert');
    expectNoConsoleErrors();
    });

    View Slide

  46. A11y on the
    Design System
    Take some pressure away from your Java developer.
    Let designers and Front-end engineers handle the heavy work.

    View Slide

  47. Unit + a11y tests
    React testing library meets axe-core

    View Slide

  48. Adding axe-core to unit tests
    • Run accessibility tests on your components
    • Look for violations on different states
    • Add it to your pipelines

    View Slide

  49. Unit + a11y tests
    import { axe, toHaveNoViolations } from 'jest-axe';
    expect.extend(toHaveNoViolations);
    it('should not have a11y issues', async () => {
    const {container} = render();
    expect(await axe(container)).toHaveNoViolations()
    });

    View Slide

  50. A11y add-on for Storybook

    View Slide

  51. View Slide

  52. View Slide

  53. Integrate into
    your workflow
    Use those unit tests on your continuous integration

    View Slide

  54. Wait,
    what about
    the add-on?
    Not yet! But it’s in the roadmap ➡️
    https://storybook.js.org/addons/@storybook/addon-a11y

    View Slide

  55. View Slide

  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" ]

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  60. Growth
    Scaling in a healthy way
    @evaferreira92

    View Slide

  61. Documenting
    the component library
    Stories!

    View Slide

  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

    View Slide

  63. Stories for components

    View Slide

  64. Stories for components
    WITH A GREAT COMPONENT
    COMES A GREAT STORY

    View Slide

  65. New component
    means new story

    View Slide

  66. Force story creation
    https://stackoverflow.com/questions/75459508/ensure-every-component-has-a-storybook-story

    View Slide

  67. View Slide

  68. @evaferreira92

    View Slide

  69. Maintaining
    the component library
    Who? How? When?

    View Slide

  70. Team models
    • Solidary
    • Centralized
    • Federated
    https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

    View Slide

  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

    View Slide

  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

    View Slide

  73. Federated
    • Governance
    • Group of developers and
    designers representing
    each team
    • Decision making takes
    longer

    View Slide

  74. Foster collaboration
    The more people participates, the more people will use it

    View Slide

  75. Measure success
    UI Library Market Share
    @evaferreira92

    View Slide

  76. https://rangle.io/blog/market-share-success-design-system

    View Slide

  77. UI Library Market share

    View Slide

  78. Takeaways

    View Slide

  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🫂

    View Slide

  80. Software is
    a living thing!
    As such, it needs to be taken cared of 🌿

    View Slide

  81. Thank you!
    @evaferreira92

    View Slide