Design Systems

簡介

一般而言，都會誤以為Design System就是統一使用者介面設計的風格，其實，那只是Design System的起點，設計系統最簡單的目的是為了整合設計團隊，讓整個專案的設計一致，也可以讓公司裡所有專案的設計一致，除了一致性之外，也可以節省設計的時間，避免一些設計上的錯誤。

接下來Design System進一步的目的在於促使設計(UX)與開發兩邊的合作，利用設計系統整合設計團隊及開發團隊，甚至是整個公司的合作。從統一大家的語言、想法開始，甚至透過Design System讓流程自動化，並且快速的產生文件。

• Course: Introduction to design systems (6篇文章及影片)

  • Overview: Introduction to design systems

  • Lesson 1: Welcome to design systems

  • Lesson 2: Define your design system

  • Lesson 3: Build your design system (利用figma)

  • Lesson 4: Document and manage your system (利用figma)

  • Update 1: Tokens, variables, and styles (利用figma)

• UX Workflow — Why the Design System is so often misunderstood (2023)

  • Core components of a design system

    • Design Kit, Component Library, Developer Sandbox, Documentation

  • Chapter 0 — We are still evolving

  • Chapter 1 — Common misunderstandings

    • The most common mistake is to solely focus on the Design perspective

  • Chapter 2 — One system to rule them all

  • Chapter 3 — Improving team communication

    • Communication is crucial in any project, and a proper Design Kit is essential for project and product teams to communicate ideas and requirements effectively

  • Chapter 4 —From Collaboration to Automation

    • The most important part in this process that we need to improve, as nobody will be surprised to hear, is the synchronization between design and development

  • Chapter 5— Documentation, yep…

    • Without proper documentation we’ll end up in a nightmare trying to maintain the Design System

• 6 Features of a Design System — The Ultimate Design System Resource (2022)**

  • Design language system

    • Swiggy Design Language System 

  • Component library

  • Design resource system

  • Documentation system

  • Code infrastructure

  • Governance system

• 7 requirements of a holistic Design System 

  • Creating a Design System requires designing the system itself

  • Its main challenge is a mindset shift

  • A successful Design System depends on ownership and advocacy

  • Design and development are (really) two sides of the same coin

  • A holistic Design System is future-friendly

  • Solid standards eradicate design debt

  • Better design requires investment

• Design Systems and Their Benefits (2:58) NN group **

  • Style guide

  • Pattern library

  • Component library

• A beginner’s journey into the world of Design Systems 

• Spelling out the Design system 

• Design Systems — Building with Systems, Purpose and Principles 

• The future of design systems 

• Why do Companies Need a design System? 

• What’s the Value of a Design System? 

• Hack the Design System

  • Getting Started with Design Systems — Part 1 

  • The UX Designer’s Role in Design Systems – Part 2 

  • Building Accessibility into Your Design System – Part 3 

  • Lessons from Brands Setting Up and Driving Adoption of Design Systems – Part 4 

  • Managing, Maintaining, and Governing Design Systems for Success – Part 5 

• Design Systems — What’s the tea? : Part one — A useful guide on best practices & insights from first-hand experiences.

• How to Create a Successful Design System : Part 2 — Let’s get into the planning

• Design Systems — What’s the tea? : Part 3 — Setting the foundation

• Two Design System Trends to Keep Alive (and Two to Avoid) 

  • Do: Platform-agnostic front-end development

  • Don’t: Limit yourself button libraries and type scales

  • Do: Prioritize Code

  • Don’t: Skip DesignOps

• Invisible design systems

  • A design system is not (just) a UI library

  • A design system is a reflection of a company’s values

• The Comprehensive 8pt Grid Guide

• Design System based on the 8pt Grid

• A Sketch library is a Design System

• Do you think your component library is your design system? Think again 

  • Setting up the styleguide

  • Building a component library

  • Lastly, documentation!

• Design System Artifacts 

• The Importance of Creating Timeless Design Systems 

• Why you need a design system 

  • To provide consistency throughout the app

  • To enable you to ship features faster

  • To make re-branding changes easy

  • To allow you to focus on the hard UX problems

• 2022 is the year of Design Systems : Reasons you (and your company) should use Design System for your next digital product

• Building Better Products with Design Systems 

• Design Systems: A solution for scale 

• Using the Design System Approach to Build Products Faster 

• Design Systems: How to create a scalable typography stack 

• No, standardization doesn’t stifle creativity 

• Design system: LEGO kits syndrome : Balancing consistency and contribution should be the primary concern of design systems.

• Evolution of design system KPIs : The evolution of KPIs for the NewsKit Design System

• ABC of design systems 

• Use ESLint to Enforce Design System : Discover how ESLint works to build testing rules to ensure design system components are consumed properly in production

• Design System vs Pattern Library vs Style Guide 

• The output of a Design System 

• ROI of design systems 

應注意事項

• The best design system is no system 

• Why design systems fail in product design 

• Stop doing design system projects 

• Design systems are flawed 

  • A design system is more than a library

  • A design system is just a tool

  • A design system is always incomplete

• When your design system fails : We’ve heard a lot about great design systems, but what happens when they don’t work out?

  • What went wrong? Common pitfalls of design systems

    • The redesign isn’t prioritized

    • The tech stack is changing

    • Maintenance takes discipline

• Design Systems FAQ: CVI and Styleguides 

• Design System FAQ: Ownership 

• Design system FAQ: adoption and implementation 

• Headless

  • Headless components in React and why I stopped using a UI library for our design system 

  • The case for headless APIs in design systems 

• Component health in design systems 

  • The first place to mark the health status at a high level is in your page names.

  • The second place to house a more detailed health status is right in the header of your components documentation/specifications.

• Why design systems fail, and how to make them work 

• Why most design systems implode 

Design Style Guide

• Creating a UX design style guide for your team 

Design Components

• Naming design system components 

• Redesigning components for an existing design system

  • Audit the component’s current usage across your product’s platform.

  • Identify pain points and poor usability attributes.

  • Outline key functional aspects of the ideal component.

  • Audit existing components across current design systems.

  • Iterate, prototype, and test.

  • Gather feedback through a “Request for Comments” (RFC).

  • Define guidelines for all possible states.

  • (Optional): Add animation to amplify the user experience through micro-interactions.

  • Create the Sketch symbol. Ship!

• Building a Pattern Library | Design Systems & Components 

• The architecture of a component

Design Tokens

• Design tokens cheatsheet : A take on Design Token definition, organization, and specificity.

• Understanding Design Tokens 

• UI/UX Design: Tokenized Design 

• Keeping it consistent: Design Tokens 

• Making design systems flexible with Design Tokens 

• Naming Tokens in Design Systems : Terms, Types, and Taxonomy to Describe Visual Style

• Naming design tokens : How to effectively name your design tokens in a systematic and future-proof way.

• Mixin Design Tokens 

• All You Should Know About Design Tokens 

• Design tokens and why design systems need them? 

• Supercharge your Design System with Design Tokens 

• Designing Tokens — What makes great design tokens, and how to build them (Part 1) 

• Designing Tokens — What Makes Great Design Tokens, and How to Build Them (Part 2) 

• Designing Tokens — What makes great design tokens, and how to build them (Part 3) 

建立/管理Design Systems

• Building a design system from scratch 

• How to Build World-Class Design Systems That Fuel Team Culture 

• Building a Design System

  • Building a Design System → Part I: The smallest version of a design system : Design Principles

  • Building a Design System → Part II: velocity through reuse 

  • Building a Design System → Part III: How to structure a design System. 

  • Building a Design System → Part IV: New to working with a design system? Use a Get-Started-Kit! 

  • Building a Design System → Part V: Documentation in a Design System 

• How we Grew our Design System Over 5 Years of Design Experimentation 

• What does simple design really mean? : Starting your design system from the right place.

• Design systems: The BNARL model 

  • Beliefs: our users are not familiar with tech and need assurance

  • Norms: everyone can contribute and evolve the design systems

    • Design Systems Must Grow and Evolve 

  • Artifacts: we make tools to support us, not the other way around

  • Rituals: high participation where people can exercise their skill

  • Languages: plain, simple, and easy to remember language

• Creating an MVP design system 

• 10 Basic Tips to Creating a Design System from Scratch

  • Design screens first

  • Create styles before symbols and components

  • Organize your artboards up front

  • Start with an existing system base

    • This can mean starting with Material Design, or something web-based like Semantic UI or Bootstrap (we also create a nice sketch starter system as well).

  • Use an icon set

  • Use visual style tools to help

  • Establish your key components

  • Establish a UI Inventory

  • Update your system between major features or releases

  • Document UI guidelines and rules

• CSS

  • Building Design Systems: How to Treat CSS Styles : Tips and Tricks to Style Your Design System

  • Creating a CSS Design System 

• Defining design system principles : An iterative set of 8 standards for building and maintaining empowering design systems.

• Part I: Foundations

  • Who Is Building Design Systems?

    • Mailchimp

    • Material Design

    • IBM Carbon

    • Atlassian

• Part II: Design Language

  • What Is A Design Language?

    • Guidelines

    • Elements

    • Components

  • How Do I Build A Design Language?

    • UI Audit

    • Establishing Priority

    • Solidify Your Brand Identity

    • Establish Guidelines

    • Build A UI Kit

• How to Pitch a Design System : Convince your startup that a design system is a good idea.

• How to approach design systems in startups?

  • Find out the reasons behind implementing Design System

  • Define Objectives

  • Define Design Principles

  • Set up fundamental atoms i.e., color, typography, spacing, grids

  • Set up atoms: Forms, Buttons, Tooltip, cards, etc

    • Reduce the buttons, classify them concisely: Better Button System 

  • Form molecules and organisms. Continuously test them on the interface

  • Build an Asset Library as you progress

  • Maintain a Repository for easy collaboration

  • Measure the success

• The next step: Design Systems beyond UI 

  • So practically, what can we add to our Design Systems, Matthijs?

    • Standards for doing research

    • Documenting user research findings

    • Non-UI stuff

      • Conversational UI

      • Document-templates

      • Email-templates

    • Workshops

• Building a design system and a component library 

• How We Build Our Design System 

• Building a design system family

• Stop building Design Systems without a tracker 

• Creating a design system for an MVP 

• Understanding the parts of a Design System: tokens, assets, components and patterns 

• Your design system is actually a product — treat it like one 

• Macro/micro vision for coherent design systems: How alternating focus between the yin and yang of design leads to the perfect balance of consistency and flexibility.

• How to build a design system if you’re the only designer in a startup 

• Measure

  • Measuring the Impact of Design Systems on Your Business Strategy 

    • Adoption and Coverage

    • Feedback from End-Users and Team

  • Measuring the Impact of a Design System 

  • How to: measure a Design System’s impact 

• System thinking for design systems 

• 10 practical tips for getting your client’s Design System off to a great start 

  • Assess the maturity of the practice

  • Conduct an inventory of existing UI Components

  • Establish some guiding design principles

  • Zero in on a Visual Identity

  • Demonstrate an Return on Investment early

  • Find a realistic governance model

  • Everyone has a role

  • Budget more time for copywriting and documentation

  • Consider building on top of a UI Component Library

  • If you’re using Sketch nested symbols, figure out the naming in advance!

• Building a Design System in a Startup 

• Organising Design Systems 

• You don’t need a design system

  • Build a style guide

  • Setup a Components file

• How we deal with inconsistency across design projects (part 1)

• Handling redundant design tasks using nested components and templates (part 2)

• Managing deliverables and feedback during fast-paced design production (part 3)

• Design Systems Architecture Diagrams : A Visual Vocabulary to Relate Systems, Products & Brands

• Design System Tiers 

• Atomic Design

  • Grouping components in atomic design systems

  • Implementing Atomic Design in Modern React Development : Using Atomic Design principles with component libraries for modern web development

  • Atomic Design and Its Modular Application in UX/UI Design 

  • DesignOps: Atomic Design 

  • Atomic 2.0 : Revisiting the Atomic Design Method for Design Systems

  • Atomic design 2022: what we can learn from Eames and other design giants 

• Collaboration / communication

  • To create an excellent design system, treat it like a collaborative process 

  • How We Collaboratively Built a New Design System 

  • Supercharging your design system contribution model 

  • Design System Communications 

  • Distributed Ownership : How to maximize acceptance & adoption of your design system

• Color

  • Adaptive, accessible and automated colour for Design Systems 

  • Defining colors in your design system 

  • How should you name your colors in a Design System? : Definitive, Semantic, and Contextual naming conventions.

• Accessibility

  • Make your design system accessible — Part 1: Color 

  • Make your design system accessible — Part 2: Icons 

• DESIGN SYSTEM TUTORIAL

  • Building Design System – Part 1: Before you start 

  • Building Design System: Figma or Sketch? 

  • Colors in Design Systems 

• Documentation

  • 9 Best Practices for Design System Documentation 

  • Rethinking Design Documentation : 5 lessons learned on the importance of using a design template

工具

• Sync your design systems with your tools : Maturity for all your tools in a Design System’s Ecosystem.

  • Steps

    • Frame your Design System’s Ecosystem Problems

    • Structure, Apply and Check on Your Sync Plan

    • Maturity Comes with a Systematic Sync Plan

  • The 4 Layers to be Synced

    • The PM Layer

    • The Designer Layer

    • The Design System’s Team Layer

    • The Developer Layer

  • Examples

    • The FIGMA Structure and Progress Tiles Sync (20 minutes)

    • The FIGMA DS UI Kit Sync (1–2 weeks)

    • The Storybook (DS Documentation) Sync (1 month)

Adobe XD

• Creating a Design System with Mick Champayne - 1 of 2 (1:56:50)

• Creating a Design System with Mick Champayne - 2 of 2 (1:56:34)

Backlight

• Why Backlight? 

  • 🚀 Backlight comes with several starter-kits to lower the cost of starting a design system. We have starter-kits or samples in React, Vue, Svelte, Web Components, and more on the way.

• Introducing Yogi — a Chakra UI Design System : YOGI is a React Design System starter-kit for Backlight, based on Chakra UI

• Introducing BRICKS — a Design System based on MUI 

• Governance in Design System : How to build a reliable design system with governance

Bit

• How we Use Design Tokens in React 

  • Design tokens + Bit + React = The ultimate design system combo

• How We Build a Component Library : How we implement a web UI component library with React, TypeScript, Bit and Design Tokens in our web design system

Figma

• Course: Introduction to design systems (6篇文章)

  • Overview: Introduction to design systems

  • Lesson 1: Welcome to design systems

  • Lesson 2: Define your design system

  • Lesson 3: Build your design system

  • Lesson 4: Document and manage your system

  • Update 1: Tokens, variables, and styles

Jira

• Using Jira for Design Systems 

Storybook

• Design Systems for Developers 

• 5 Ways a Design System Will Improve Your Team’s Entire Workflow. : StorybookJS is a powerful development tool that will improve your team’s ability to test changes, communicate with design, write better code, document and discover components, and much more.

• Strengthening the culture of collaboration between Design and Engineering 

• Structuring your Storybook : Best practices for organizing components and stories

• Bring Design and Development Together with Storybook Integration 

• Accessibility

  • Accessibility testing with Storybook 

  • Automate accessibility tests with Storybook 

現有的Design Systems

• 5 Best Design Systems and How to Learn (and Steal) From Them (11:14) **

  • Google Material Design System

  • Atlassian Design System

  • Apple Human Interface Guidelines

  • Mailchimp Design System

  • Helpscout Design System

• 10 great design systems and how to learn (and steal) from them / 10 Best Design Systems and How to Learn (and Steal) From Them 

  • Google Material Design System

  • Apple Human Interface Guidelines

  • Microsoft Fluent Design System

  • Atlassian Design System

  • Uber Design System

  • Shopify Design System

  • IBM Carbon Design System

  • Mailchimp Design System

  • Salesforce Lightning Design System

  • Helpscout Design System

  • US Web Design Government Design System

• The best design system to inspire. 

• 5 Best UI Design Systems (4:47)

  • Google Material Design System

  • Apple Human Interface Guidelines

  • Atlassian Design System

  • Lightning Design System

  • Polaris (Shopify)

• The Best UI Design Systems - Better Than Material Design | Design Essentials (9:57)

  • Eva Design System

  • Carbon Design System

  • Ant Design System

  • Seeds Design System ( by sproutsocial )

  • Lightning Design System

  • Primer Design System

  • Spectrum Design System ( by Adobe )

• United States Web Design System

  • Design principles

  • Components

  • Design tokens

  • Utilities

  • Page templates

• React

  • Design Systems with React’s Server, Shared and Client Components 

  • 8 Learnings That Improved Quality in Our React Design System 

  • Building a React Design System (with Bit)

  • Creating a Design System in React : How to build a design system using React, Bit, and friends.

• Furious

  • Introducing Furious, the FAST Design System 

• Chakra-UI

  • Why we chose Chakra-UI for our design system (part 1) 

  • Why we chose Chakra-UI for our design system (part 2) 

• Material-UI

  • Creating a Design System using React Material UI with Bit 

• Tailwind

  • Design System Foundations Using Tailwind 

Design Systems CLI

• Open Sourcing Design Systems CLI

• Introducing Design Systems CLI 

經驗

• 現有專案

  • What I Learned Implementing a Design System for an Existing Product 

  • Building a design system ( Component library and style guide ) for an existing product 

  • Build a Design System for an existing product in 4 sprints : Creating Styles, Components & Documentation

• Emma Wedekind - Building a Design System with React - ReactJS Girls Conference (17:27)

• Redesigning popular social media apps using a mini-Design System

• How to integrate content in design systems: Align content and design for design system that genuinely scales.

• Putting the system back in our design system : Evolving Polaris tokens to build products at scale and speed

• User-centered Design System Resources : How to go beyond asset libraries and build systems for people.

• How we built Matcha, Segment’s design system 

• Compare the Market’s Design System 

• How we organise our Design System libraries to help Doctolib designers use more than 70 000 components a week 

• 8 things I learnt building a design system. 

• Design Systems and Agile 

• Design systems at Sainsbury’s 

  • Figma Tokens plugin