デザインシステムの資料を作る時に参考にしたリンク集
この記事は何？
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
Creating a Design System: The Step-by-Step Guide
Creating a Design System Language…
Atomic Design の理解 : molecules と organisms をどのように分割するか
Building Flexible Design Systems（スライド）
運用
Introducing Design Systems Ops
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
アメリカ連邦政府
大規模デザインシステムを作る：いかにしてアメリカ連邦政府のデザインシステムを作り上げたか
ヒラリー・クリントン
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が作成したコミュニティ。今後、デザインシステムについて学ぶ場やリソースの提供などを行うらしいです。
デザインシステム集
いくつか代表的な事例を列記します。
Fluent Design System by Microsoft
Francfranc Design System Guidelines
Lightning Design System by Salesforce
Photon Design System by Firefox
他にも知りたいという方はAwesome Design Systems や styleguides.io が参考になるでしょう。
頂いたサポートは撮影機材や執筆時のおとも（☕）などに使わせて頂きます