Figmaなら簡単！デザインシステムの作り方を詳しく解説

Post on:2021年4月6日

はじめに

Figmaで新しいプロジェクトを始めるたびに、真っ白なキャンパスを見るのが好きですか？

好きではないと思います。もし、デザインのプロジェクトを素早く始めたい、時間を大幅に節約できたらもっと良いと思いませんか？

デザインシステムがあなたの助けとなります。
では、デザインシステムとは何でしょうか？

デザインシステムとは

デザインシステムの基本的な構成は、コンポーネントライブラリとスタイルガイドを1つにまとめたものだと考えてください。コアとなるUI要素を事前に構築しておき、すぐに使用できるようにすることで、デザインプロジェクトに集中し、より早く完成させることができます。

この記事では、私がどのようにしてFigma用のデザインシステム「Cabana」を構築したのか解説します。その過程で、あなたは汎用性の高いパワフルなデザインシステムを作成するために何が必要なのかをより理解できると思います。

注: 独自のデザインシステムを始めるための最良の方法に関する貴重なヒントとアドバイスを提供するためにこの記事はあります。最初から最後までのすべてを作成するためのガイドではありません。

1. 何よりもまず、強力なカラーパレットを作るべき理由

Figmaでデザインシステムを作成する際は、最初にカラーパレットから始めます。可能な限りベースカラー（つまりプライマリ・セカンダリ・ターシャリ）を最小限に抑えることがポイントです。

もちろん、カラーパレットは柔軟性を持たせるためにベースカラーを拡張して、さまざまな色合いのティント（明るいバリエーション）やシェード（暗いバリエーション）を提供することは理にかなっています。

FigmaのカラーパネルにあるHSLオプションの彩度と明度の値を調整することで、最初のベースカラーからさまざまな色合いのティントとシェードを作成することができますが、これは時間のかかるプロセスです。

FigmaのカラーパネルにあるHSLオプション

ティントとシェードは、下記のツールを使用すると簡単です。

Tint and Shade Generator #1e90ff

このツールでは、ベースカラーのHEX値を入力するだけで、すぐにティントとシェードのカラーパレットを作成できます。これによりパーフェクトに計算されたさまざまな色合いが完成します。

次に、システムで使用するティントとシェードを選択します。HEX値をコピーして、関連する塗りつぶしオプションにペーストするだけです。

先に進む前に、カラーパレットでの命名規則に関する簡単なヒントを紹介します。下記のようなシンプルなものを使用することを強くお勧めします

Primary / Base
Secondary / Base

スラッシュ（/）を使用すると、カラーが分類され、インスペクタパネルから該当するカラーを素早く見つけることができます。

命名はシンプルにし、スラッシュを使用すると、目的のカラーを素早く見つけられる

また、通知・バッジ・入力フォームなどに使用するために、標準的なレッド（エラー）・グリーン（成功）・イエロー（警告）のベースカラーを用意しておくことも検討しなければなりません。

エラー・成功・警告に使用するカラーを用意

ブラックとグレーのさまざまな色合いも絶対に必要です。

必須となるホワイトだけでなく、不透明度のレベルが異なるホワイトを追加することもお勧めします。これらのバリエーションは例えば、色つきの背景や画像の上にアイコンを配置したいときに最適で、色や画像の一部または全部を簡単に透過させることができます。

ブラック・グレー・ホワイトのバリエーションを用意

そして、忘れてはいけないのがブランドカラーです。

これらは多くのプロジェクトで活用することができます。
メインのカラーパレットと一緒に作成しておくと良いでしょう。

主要ブランドのカラーも用意

最後に、グラデーションを用意しておくと、常に役に立ちます。

グラデーションを用意しておくと便利

デザインシステムの最初のビルドでグラデーションを追加することにした場合は、左から右、上から下の両方のバリエーションを追加することで、最初からある程度の汎用性を持たせておいてください。

グラデーションは左から右、上から下の両方のバリエーションを用意

2. デスクトップとスマホの両方に対応するタイポグラフィ

Figmaでデザインシステムを作成する際は、デスクトップとスマホの両方に対応できるように、タイポグラフィの選択肢を豊富に用意しておきましょう。

Sketchでは配置とカラーをテキストスタイル内で結びつけますが、Figmaではこれらが分離されているので、管理するテキストスタイルの数が格段に少なくなり、ファイルがよりすっきりと軽くなります。

Figmaでのテキストスタイルの管理は簡単

独自のデザインシステムを構築するときは、可能であれば2フォントファミリーのルールに従うことをお勧めします。私のデザインシステムでは、InterとOxygenをベースのフォントファミリーとして選択しました。この2フォントは互いによく引き立て合っていて、ベースとして装飾的すぎないためです。

特大の表示スタイルを作成するだけでなく、モジュラースケーリングを使用してh1からh5まで見出しの通常スタイルを作成し、本文のテキストサイズを18ptに設定し、比率を1.2にしました。本文用を18ptにしたのは、特に長文コンテンツでの読みやすさを向上させるためです。

見出しと本文のスタイルに加えて、リードやキャプション用にLead, Small, Caption, X-Smallのスタイルを作成します。特に後者はスマホ用のデザインを作成する際に最適で、前者はデスクトップ用を扱う際に適しています。

ここでの命名規則は、あなたが使いやすいものにしてください。例えば、見出しならHeading 1からHeading 6、本文ならBody, Body L, Body Sなど、さまざまな命名規則があります。自分にあったものを選んでください。

ただし、カラーパレットと同様にパターンに従って、スラッシュ（/）でグループ化し、参照しやすくすることをお勧めします。例えば、こんな感じです。

Lead 24 / Family #1 / Regular
Lead 24 / Family #2 / Regular

Figmaでテキストスタイルを管理

2つのフォントファミリーとそれらのさまざまなスタイルには最低限、RegularとBoldのウェイトのバリエーションを作成することをお勧めします。もちろん、個人の好みに合わせて追加することは可能です（例：Light、Semi-Boldなど）。

現在のFigmaでは、異なるフォントファミリーに変更したい場合、手動で行わなければなりません。これはクールではありません！

でも、絶望しないでください。
才能豊かなJan Sixが開発したBatch Stylerという素晴らしいプラグインがありますので、ぜひお勧めします。

Batch Styler

このプラグインを使えば、複数のスタイルを一度に変更することができます。

3. 忘れてはならないのが、エレベーションとシャドーです

そして、忘れてはならないのが、エレベーションとシャドーです

カラーパレットとタイポグラフィのスタイルに加えて、優れたデザインシステムのコアスタイルに追加するのはエレベーション（立体図）とシャドー（影）です。

ライトとダークの両方のデザインに適したシャドウと、それに伴うエレベーション（20%, 40%, 60%, 80%など）を作成しておくことをお勧めします。

ライトテーマ用のエレベーションとシャドー

4. 優れたデザインシステムにはアイコンが必要

優れたデザインシステムには、最初から優れたアイコンのセットが必要です。

優れたアイコンのセットが必要

パワフルなデザインシステムのコア要素は次のとおりです

カラー
タイポグラフィ
エレベーションとシャドー
アイコン

ボタン、入力、モーダルなど他のコンポーネントはこの次ですぐに触れる予定です。

最初のビルド用に、軽量で多様性のあるアイコンセットを見つけてください。

軽量で多様性のあるアイコンセットを見つける

私のデザインシステム「Cabana」では、かなり充実した、しかし大げさではないベースのアイコンセットが必要でした。

アイコンにはさまざまな種類があり、奇抜なスタイルではなく、塗りつぶしとラインの両方のオプションがあるものを探した結果、Evaというオープンソースのアイコンにたどり着きました。

Eva Icons -GitHub

私がお勧めするもう1つのオープンソースアイコンセットは、Feather Iconsです。

Feather -GitHub

アイコンを整理・管理したいですか？
アイコン用の管理ツールを入手してください。

IconJar

私の個人的な選択はIconJarです。
IconJarはmacOSのみですが、Windowsユーザーでも絶望しないでください。Nucleoをお勧めします。

Nucleo

少し話がそれたので、デザインシステムに戻ります。
先ほど作成したメインのコンポーネントに、Evaのアイコンセットからアイコンを1つずつ移動します。

アイコンをデザインシステムに移動

IconJarの優れた点は、24ptのバウンディングボックスが適用された状態でアイコンが挿入されることで、デザイン内の配置や視覚的な一貫性を助けます。

バウンディングボックスが適用された状態のアイコン

あとは、先ほど作成したプライマリーベースのカラースタイルを適用するだけです。

アイコンにカラーを適用

アイコンを分類するための命名規則を決めます（カラーとタイポグラフィと同様）。

Icon / Alert Circle / Fill
Icon / Alert Circle / Line

アイコンを分類するための命名規則を決める

次に、それをコンポーネントに変換します（Alt + Cmd + K）。

この部分は少し時間がかかるように見えますが、このプロセスをうまく自動化するのに役立つFigmaプラグインをまだ見つけていないので、当面は手動で行うことになります。

5. 主要なコンポーネントを選択する

パワフルで多機能なデザインシステムには何が必要でしょうか？
コンポーネントです。それも大量に必要です。

最初に何百ものコンポーネントを作成するのは大変な作業ですが、それが終われば、その後は必要に応じて少しずつ追加していくだけでスムーズに作業を進めることができます。

デザインシステムの作成は、最も時間のかかる作業です。温かいココアを飲みながら、一晩で主要なコンポーネントを完成させることはできません。残念ながら、少し時間をかけなければなりません。

最初は常に、小さなコンポーネントから始めましょう！

小さなコンポーネントから始める

主要なコンポーネントを構築する際は、最初にボタンから始めます。ボタンのような小さなコンポーネントは、どのプロジェクトでも一般的によく使用される要素の1つだからです。モーダル・カード・カレンダーなどの大きなコンポーネントに進む前に、まずはボタンを作成することは理にかなっています。これらの小さなコンポーネントは必然的に機能します。

私のデザインシステムでは、プライマリを作成しました