What is a Design System?

What is a Design System?

• A single source of truth for design and code across teams
• A shared library of styles, components, patterns, and guidelines
• Acts as both a toolbox and rulebook for building products

Why Use a Design System?

Why Use a Design System?

• Consistency – users get a familiar experience everywhere
• Efficiency – designers & engineers collaborate faster with reusable parts
• Scalability – easier to maintain across multiple products/features or as things change

The Benefits in Action

The Benefits in Action

• Reduced design & dev time on common UI (buttons, forms, modals, etc.)
• Higher quality and accessible experiences by default
• More time to focus on solving real user problems instead of re-inventing UI

What are Components?

What are Components?

• UI abstraction (duh)
• Every component should have a mission
• All features added to a component should be in service of its core mission.
• No Swiss-army components (example: Button that accepts options and becomes a drop-down menu)

Components should not be styled!

Components should not be styled!

• If you find yourself needing to override the default styles of a component... raise the red flag.
• Have a conversation with your friendly neighborhood UX professional about the discrepancy.
• Remember...

There is no gospel of Mock.

There is no gospel of Mock.

• A mock is an idea, not a mandate.
• If something about the mock doesn't make sense, it should be a conversation.
• Figma and code are not perfectly in sync and probably never will be.
• If the mock calls for a rainbow-unicorn, make sure everyone understands the effort to create a rainbow-unicorn before you sink days into it.