デザインシステムに触れてみよう

Theme テーマ

デザインシステムは、近年ではデジタル庁などでも構築に取り組んでいる仕組みで、複数人でデザインを進めていく際に参照や再利用ができるため、プロジェクトの効率化につながります。

デザインシステムとは

デザインシステムとは、色、タイポグラフィ、UIコンポーネントなどのパターンと、それらを反映する際のデザイン原則がまとめられたシステムです。

Figmaはチームでコミュニケーションを取りながらのデザイン制作に適していますが、デザインシステムが整理されているとコラボレーションがしやすくなりますし、一人でデザインを進めるときにも有効な考え方です。

Figmaでは、色や文字を「スタイル」として登録できますし、パーツのまとまりを「コンポーネント」として登録ができます。また、作成したデータを一つのファイルにまとめて共有できる点や、データが常に最新版になる点など、Figmaはデザインシステムを整備するのにちょうどよいプラットフォームといえます。

小規模なプロジェクトではデザインシステムの有効度は低いのですが、大規模になればなるほど重要性が増していくので、必要に応じてデザインシステムを準備することをおすすめします。

デザインシステム関連の用語

デザインシステム関連は、似たような用語が複数存在していてわかりにくいので、本書では図1のように定義し、まとめました。

デザインシステム関連用語 | 用語 | 解説 | | --- | --- | | デザインシステム | 色、タイポグラフィ、UIコンポーネントなどのパターンと、それらを反映する際のデザイン原則がまとめられた仕組み。コードなどを含む場合も | | デザインガイドライン | 色、タイポグラフィ、UIコンポーネントなどをまとめたものと、その使い方ガイド。「デザインシステム」の一部の場合も | | UIキット | UIコンポーネントなどをまとめて再利用できるようにしたもの | | デザイントークン | 色、タイポグラフィ、UIコンポーネントなどのうちのパターンの一つを取り出したもの |

デザインシステムの事例

デザインシステムは自分たちのプロジェクトのための仕組みですが、自社のデザインシステムを公開している会社・組織もあります。それらのうちFigmaのコミュニティ上でファイルとして公開されているものもあるので、日本の会社・組織が作成のものを中心に、いくつか紹介します。

デジタル庁

行政サービスを 1. 誰もが利用できる（アクセシビリティ） 2. 使いやすい（ユーザビリティ） というものにするため、デジタル庁サービスデザインユニットが構築に取り組んでいるデザインシステムです図2。

@div:figure

Design System 1.2.1 @divend

https://www.figma.com/community/file/1172530831489802410

SmartHR UI

SmartHRのアプリケーションをつくるためのコンポーネント集で、SmartHRに関わる人はどなたでも利用・参加できるものとなっています図3。

@div:figure

SmartHR UI @divend

https://www.figma.com/community/file/978607227374353992

公開されているデータを複製する

Figmaコミュニティのファイルとして公開されているデータは、自分のアカウントの「下書き」に複製保存することができます。

先ほど紹介した、デジタル庁のデザインシステムを複製してみましょう。該当のページに移動し、「コピーを取得する」をクリックします。

自分のアカウントの「下書き」内に、Figmaファイルが編集可能な状態で保存されました図4。

@div:figure

下書きにデジタル庁のデザインシステムが保存された @divend

レイヤーやコンポーネントがそのまま触れる状態として複製できるので、学習素材としても優秀です。どのようにデータが作られているのか等を確認して、参考にしてみるとよいでしょう。