デザインシステムの資料を作る時に参考にしたリンク集

こんにちは、よりデザイン@ryo_panです。

この記事は何?

DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります(いちおう全部目は通してる…ハズ)。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。

この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから!」というツッコミがあればぜひお願いします。

まずデザインシステムについて学びたい時は

Design Systems Handbook
InVisionが作成したハンドブック。まず最初に目を通すならこれでしょう。デザインシステムについてもっともまとまってると言える情報源です。

Nathan CurtisさんのMedium記事
DMMさんの記事をご覧になった方はうっすら勘付かれたかと思いますが、この方のMedium記事の引用がとても多いです。それだけ、デザインシステムについての言及が豊富です。全ての記事に目を通すことをおすすめしますが、あえて選ぶならA Design System isn’t a Project. It’s a Product, Serving Products. / Defining Design Systems / Designing a Systems Team / Design System Features, Step-by-Step / Measuring Design System Successあたりでしょうか。

思想・考え方

What is a Design System?
デザインシステムとは?についてメタファーを使って説明したり導入する理由を解説している記事。

Importance of Design Systems
デザインシステムの重要性について。

What is a Design System?
デザインシステムとは?について。

Design Systems Are a Language. Product Is a Conversation
デザインシステムと言語について。

The Most Exciting Design Systems Are Boring
デザインシステムを用いることで新しい発明や課題解決に取り組めるよ、という記事。

Design systems, style guides, pattern libraries. What the hell is the difference?
デザインシステムとスタイルガイド、パターンライブラリの違いについて。

Why Design Systems Fail
デザインシステムが失敗する理由について。

デザインシステムが作り出す明文化への道
デザインシステムとデザインの明文化について。

Atomic Design & creativity
Atomic Designについて、LEGOや音符といったメタファーを用いて解説している記事。

How to

構築
Dummy’s Guide to Building a Design System

How to build a design system that will last

The Minimum Viable Design System

How to build a Design System?

Creating a Design System: The Step-by-Step Guide

Creating a Design System Language…

Setup a design system

Atomic Design の理解 : molecules と organisms をどのように分割するか

Building Flexible Design Systems(スライド)

運用

Introducing Design Systems Ops

一貫したデザインのためにデザインシステムを運用する方法

A Maintainable Style Guide

Refactoring Your Way to a Design System

企業の取り組み

Airbnb
The Way We Build
Building a Visual Language

Atlassian
Atlassianはどのようにしてデザインシステムを作り上げたか
Atlassianのデザインプロセスをけん引する、自主性のあるチーム

BizReach
サービスの一貫性と高速開発をもたらす「動くスタイルガイド」

Etsy
Designed for Growth
New York Design Systems Coalition

GE
GE’s Predix Design System
Creating Cirrus: The next generation Predix design language

Mailchimp
Issue 17 // Systemic Design

Salesforce
Living Design Systems(スライド)
Salesforce Design System for Native Apps(スライド)
Design Tokens in Design Systems(スライド)
Living Design System
The Salesforce Team Model for Scaling a Design System

Shopify
Locating Polaris: How we built a style guide for our design system

Trello
Introducing Nachos, A Tasty New Design System For Trello

UXPin
Design Systems Sprint

アメリカ連邦政府
大規模デザインシステムを作る:いかにしてアメリカ連邦政府のデザインシステムを作り上げたか

ヒラリー・クリントン
Pantsuit: The Hillary Clinton UI pattern library

サービス・ツール

InVision Design System Manager
InVisionがBrand.aiを買収後、新たに発表したSketch・InVision Studioで使えるライブラリサービス。

Design Systems by UXPin
UXPin上で動作するデザインシステム。

React Sketch.app by Airbnb
Airbnbが開発したReactベースでSketchファイルを作成するツール。

Lona by Airbnb
Airbnbが開発したデザインシステムの定義ファイルを生成できるツール。

その他

design.systems
デザインシステムについての情報を集めているサイト。まだ情報は少なめ。デザインシステムのSlackチームのInviteも受け付けています。

A DESIGN SYSTEMS CONFERENCE
サンフランシスコで行われたデザインシステムのカンファレンス。各セッションのレポートやグラフィックレコーディングが見れます。

1人design system advent calendar
デザインシステムについてのAdvent Calendarを書かれている日本の方。どの記事も読みやすいです。

Figma + Design Systems
Figmaが作成したコミュニティ。今後、デザインシステムについて学ぶ場やリソースの提供などを行うらしいです。

デザインシステム集

いくつか代表的な事例を列記します。

Atlassian Design

Carbon Design System by IBM

GEL by BBC

Fluent Design System by Microsoft

Francfranc Design System Guidelines

Lightning Design System by Salesforce

Nachos by Trello

Photon Design System by Firefox

Polaris by Shopify

他にも知りたいという方はAwesome Design Systems styleguides.io が参考になるでしょう。

頂いたサポートは撮影機材や執筆時のおとも(☕)などに使わせて頂きます