Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System 101

Design System 101

Design System 101

Azizi Yazit

March 07, 2023
Tweet

More Decks by Azizi Yazit

Other Decks in Research

Transcript

  1. Azizi Yazit
    Architect
    Developer
    Speaker
    History

    View Slide

  2. Backend
    Frontend
    Service
    module
    components

    View Slide

  3. Backend
    GUI
    Service
    module
    components
    all screenshots taken from https://setproduct.com/

    View Slide

  4. Style-guide
    Frontend
    Designer
    UI Developer

    View Slide

  5. Style-guide
    Frontend
    UI Developer
    creates visual representations of concepts
    and ideas in Figma (static Style-guide)
    preparing UI assets
    UI | UX | Graphic
    Designer

    View Slide

  6. Style-guide
    Frontend
    Designer
    A component developer focuses on developing UI
    building blocks, whereas a application developer
    focuses on coding applications
    UI Developer
    Component
    Developer
    Application
    Developer
    Develop UI components
    UI Documentation in Storybook
    (living Style-guide)
    Integrate UI components by referring to living Style-guide
    Manage business logic / application logic

    View Slide

  7. Designer
    Frontend
    UI Developer
    Style-guide
    a document that contains design guidelines for each
    repeatedly used design element, such as visual identity
    elements, icons, interface components, and their states,
    headings, etc
    Static Living

    View Slide

  8. Designer
    Frontend
    UI Developer
    Static Style-guide
    Figma is a powerful web-based design tool
    that helps you create anything, websites,
    applications, logos, and much more.

    View Slide

  9. Designer
    Frontend
    Pixel Perfect
    UI Developer
    Static Style-guide
    1
    3
    4
    Verification
    Designer
    UI Developer
    Web App
    2
    width, height, border, colours,
    sizing, spacing, CSS etc
    publish

    View Slide

  10. Designer
    Frontend
    UI Developer
    2
    3 developer efforts
    Static Style-guide
    1
    Designer
    Web App
    UI Developer
    UI Developer
    UI Developer Web App
    Web App
    change design

    View Slide

  11. Designer
    Frontend
    UI Developer
    Living Style-guide
    Storybook is a frontend workshop for
    building UI components and pages in
    isolation. Storybook provides a workshop to
    build UIs in isolation. It helps you develop
    hard-to-reach states and edge cases
    without needing to run the whole app.

    View Slide

  12. Designer
    Frontend
    Component
    Developer
    UI Developer
    Living Style-guide
    1
    Designer
    2
    3
    Tester
    Web App
    UI Developer
    Web App
    UI Developer
    Web App
    UI Developer
    publish develop reusable
    components
    Verification

    View Slide

  13. Designer
    Frontend
    UI Developer
    Living Style-guide
    1
    Designer
    Component
    Developer
    2
    3
    Tester
    Web App
    UI Developer
    Web App
    UI Developer
    Web App
    UI Developer
    change develop reusable
    components
    Verification
    4
    all consumers
    changed

    View Slide

  14. Design System
    Components
    Input
    Dropdown
    Button
    Canvas Docs
    Button
    Examples



    Publish
    Publish
    Publish Publish
    Publish
    • added icon
    • new background colour (purple)
    • removed border
    Design System
    Components
    Input
    Dropdown
    Button
    Canvas Docs
    Button
    Examples



    Publish Publish
    Design System
    v1.0 v1.1
    v1.0
    v1.1 v1.1 v1.1 v1.0
    Consumers
    ds-components v1.0
    ds-components v1.1

    View Slide

  15. App 1
    npm install ds-component:1.1
    App 2
    npm install ds-component:1.1
    App 3
    npm install ds-component:1.1
    node_modules
    update new button changes
    1 2
    3
    4

    View Slide

  16. Style-guide
    Frontend
    Designer
    UI Developer
    mail
    calendar
    meet
    drive
    Org
    Product
    A
    Product
    B
    Product
    C
    • GUI standards
    • Shareable components
    • Spacing system
    • Color system
    • …

    View Slide

  17. Style-guide
    Frontend
    Designer
    UI Developer
    material.mail
    Calendar Team Meet Team Drive Team
    Material Design
    material.calendar material.meet material.drive
    Mail Team
    Design system
    • GUI standards
    • Shareable components
    • Spacing system
    • Color system
    • …

    View Slide

  18. Component Library Standards
    Spacing System Colours System
    Design System

    View Slide

  19. Material Design

    View Slide

  20. Ant Design

    View Slide

  21. Material Design

    View Slide

  22. Primer Design

    View Slide

  23. Carbon Design

    View Slide

  24. Lightning Design

    View Slide

  25. Component Library
    Design System
    Components are interactive building blocks for creating a user
    interface. The purpose of such a library is to keep reusable user
    interface components in a single place that can then be used for
    different projects.

    View Slide

  26. Component Library
    Design System

    View Slide

  27. Component Library
    Design System

    View Slide

  28. Component Library
    Design System

    View Slide

  29. Component Library
    Design System

    View Slide

  30. Component Library
    Design System

    View Slide

  31. Design System
    Standards
    Design guidance, specs, and tools to streamline the
    work of getting from Designer to finished products.
    Colours
    Motion
    Icons
    Shape
    Font

    View Slide

  32. Design System
    Spacing System
    Spacing methods use
    baseline grids, key-lines,
    padding, and incremental
    spacing.
    4-Pixel Rule 8-Pixel Rule
    4 8 12 16 20 8 16 24 32
    var(—size_*)

    View Slide

  33. Design System
    Spacing System
    Spacing methods use
    baseline grids, key-lines,
    padding, and incremental
    spacing.
    4-Pixel Rule 8-Pixel Rule
    4 8 12 16 20 8 16 24 32
    var(—size_*)
    var(—size_*)
    —size_* token name
    var( ) CSS variable
    _* token value
    e.g. _1, _2
    example var(—size_1)

    View Slide

  34. Design System
    Colours System
    Colours system helps
    you apply colour to
    your UI in a meaningful
    way.
    var(—colour_*)

    View Slide

  35. Design System
    Spacing System
    Spacing methods use
    baseline grids, key-lines,
    padding, and incremental
    spacing.
    4-Pixel Rule 8-Pixel Rule
    4 8 12 16 20 8 16 24 32
    var(—size_*)
    var(—colour_*)
    —size_* token name
    var( ) CSS variable
    _* token value
    e.g. _primary, _secondary
    example var(—colour_primary)

    View Slide

  36. Summary
    Design System
    Standards
    Canvas Docs
    Overview
    About this Design System
    Your Design System Name
    Overview
    Components
    Spacing
    Colours

    View Slide

  37. Figma

    View Slide

  38. Storybook

    View Slide