よりデザイン

2017年12月31日デザインの話

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

この記事は何?

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あたりでしょうか。

Design Systems by Alla Kholmatova
Smashing Magazineが発行しているデザインシステムの書籍。eBookでも購入できます。日本語版も近々出る予定だそうです。

思想・考え方

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

How to Get the Most Out of Shopify’s New Design System Polaris

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が開発したデザインシステムの定義ファイルを生成できるツール。

その他

Adele
UXPinが提供する、デザインシステムやパターンライブラリを横串検索できるサービス。

Awesome Design Systems
Adeleと同じように(というかAdeleは後発)デザインシステムを集めているGithubリポジトリ。

Design Systems (Slack)
デザインシステムについて話せるSlackへの招待リンク。

design.systems
デザインシステムについての情報を集めているサイト。まだ情報は少なめ。

Clarity 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

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

このエントリーをはてなブックマークに追加

似ている話

2018.01.23

デザインシステムの本を執筆するかもしれないので、ご協力頂ける企業さんをさがしています

2018.01.20

UXPinのデザインシステム・パターンライブラリ集「Adele」を見てみた

2018.01.16

デザインツールの書籍を執筆して学んだこと