FigmaでWebサイトやスマホアプリのデザインシステムを制作する手順を解説

UI/UXデザインのコラボレーションツール「Figma」で、Webサイトやスマホアプリのデザインシステムを制作する手順を紹介します。

カラーパレットをはじめ、タイポグラフィ、シャドー、アイコン、コンポーネントなど、Figmaでデザインシステムに必要なものをどのように制作するか解説します。

Figmaでデザインシステムを制作する手順を解説

Creating a Design System in Figma.
by Marc Andrew

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
Figmaのワイヤーフレーム素材は、以前の記事をご覧ください。

はじめに

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

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

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

デザインシステムとは

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

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

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

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

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

強力なカラーパレットを作るべき理由

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

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

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

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

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

サイトのキャプチャ

Tint and Shade Generator #1e90ff

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

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

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

  • Primary / Base
  • Secondary / Base

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

Figmaのインスペクタパネル

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

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

通知・バッジ・入力フォームなどに使用するためのカラー

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

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

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

ブラックのさまざまな色合い

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

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

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

ブランドカラーの一覧

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

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

グラデーションの一覧

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

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

グラデーションのバリエーション

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

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

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

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

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

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

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

独自のデザインシステムを構築するときは、可能であれば2フォントファミリーのルールに従うことをお勧めします。私のデザインシステムでは、InterOxygenをベースのフォントファミリーとして選択しました。この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でテキストスタイルを管理

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つだからです。モーダル・カード・カレンダーなどの大きなコンポーネントに進む前に、まずはボタンを作成することは理にかなっています。これらの小さなコンポーネントは必然的に機能します。

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

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

プライマリのボタン

続いて、セカンダリを作成します。

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

セカンダリのボタン

そして、バリエーションを作成します。命名は前述と同じです。

  • Button / Primary / Extra Large / Default
  • Button / Primary / Extra Large / Left Icon
  • Button / Primary / Extra Large / Right Icon

「Extra Large」に加えて、デスクトップとスマホの両方をカバーするために「Large」「Medium」「Small」のバリエーションも必要です。

作成した小さなコンポーネントは、大きなコンポーネントの一部になります。

小さなコンポーネントは、大きいコンポーネントの一部になる

ボタンは、カードコンポーネントの一部

ボタンコンポーネントで行ったように、それらがより大きなコンポーネント(例えば、カード、モーダルなど)の一部になることを知っていたので、先に進み、アバターなどの他の小さなコンポーネントを作成します。

他の小さなコンポーネント

アバター・レイティングバー

続いて、ドロップダウンメニューのアイテム。

他の小さなコンポーネント

ドロップダウンメニューのアイテム

他の小さなコンポーネント

プレースホルダー

他の小さなコンポーネント

プログレスバー・レンジスライダー

などがあります。
このようにすることで、大きなコンポーネントの中に小さなコンポーネントを入れ子にして構築することができました。

また逆に、大きなコンポーネントを最初に全体的に作成してから、それを構成するすべての要素を小さなコンポーネントに分離するやり方を好む人もいます。

私個人としては、最初に小さなコンポーネントを設計し、それをすべて用意しておくのを好みます。そうすれば、大きなコンポーネントを作成する際に、最終的に満足のいくものができるまで用意されているものの中からすぐに選ぶことができます。

皆さんの貴重な時間をあまり使いたくありません。ここでは、私が自分のシステムに追加したコンポーネントの一部を紹介します。

  • Avatars
  • Button Groups
  • Calendars
  • Cards
  • Charts
  • Comments
  • Map
  • Media Controls (Video & Audio)
  • Modals
  • Notifications
  • Pagination
  • Placeholders
  • Tooltips

よく使用するUI要素を用意して、十分なユースケースをカバーすることを覚えておけば、最初の構築には問題ないでしょう。

終わりに

前にも言いましたが 独自のデザインシステムを構築するには時間がかかりますが(私の場合は3ヵ月かかりました)、構築した後の満足感は計り知れません。

一度、自分のデザインシステムを構築してしまえば、真っ白なキャンバスを前にしてデザインプロジェクトを開始する心配は二度とありません。
ここまで記事を読んでくれてありがとうございます。

sponsors

top of page

©2021 coliss