一貫性が鍵 - Figmaデザインシステムの構築方法

この記事はToptalからの翻訳転載です。配信元または著者の許可を得て配信しています。
Consistency Is Key – How to Build a Figma Design System

優れたデザインシステムが、世に送り出すプロダクトの品質や開発のペースに大きな影響を与えることは、デザイナーの間では常識となっています。GoogleやGitHub、IBMなどの企業がより良いプロダクトをより良いペースで生み出すためにデザインシステムを活用していることから、包括的なデザインシステムを作るべきだということが何度も明らかになっているように、「なぜデザインシステムが必要なのか？」から「どうすれば素晴らしいデザインシステムを作ることができるのか？」へと疑問が進化してきました。

では、デザインシステムとは具体的にどのようなものなのでしょうか？ウィル・ファンガイは、それを「明確な基準に基づいた再利用可能なコンポーネントの集合体であり、それを組み立てることで、いくらでも応用性を構築することができる」と定義しています。デザインシステムには、UIコンポーネントライブラリやパターンライブラリだけでなく、スタイルガイド、ベストプラクティス、コードなども含まれます。建築家の青図のように、デザインシステムはプロダクトを作る際に、プロダクトチームの「信頼できる唯一の情報源（single source of truth）」としての役割を果たすだけではなく、一貫性の維持にも役立ちます。

GitHub は、Figma ベースのデザインシステムの素晴らしい例である、Figmaコンポーネントライブラリを共有しています。StorybookやComponent-Driven Developmentのようなより広範なツールも、デザインシステムの実装やドキュメンテーションに非常に有用なリソースです。

デザインシステムは、デザインの一貫性を維持し、プロダクト開発に関わるすべての人にとって有益なものでなければなりません。デザインシステムは、デザイナーが新しいスクリーン、フロー、プロトタイプを迅速に作成するのに役立つツールキットです。優れたデザインシステムは、開発者がデザインの決定の背後にあるロジックを理解するのに役立ち、よりまとまりのあるプロダクトを創造するのに役立ちます。デザインプロセスをスピードアップし、デザイナーが実験を行う時間を増やすことができます。

Figma を使用しているデザイナーのために、Figma でコンポーネントライブラリを作成することが、包括的なデザインシステムの重要な一部になることを見てみましょう。

IBMのCarbon Design System。

コンポーネントライブラリの力

時々、デザインシステムを作るためにあまりにも早く投資するのは、逆効果になることもあります。プロダクトデザインの初期段階では、プロセスはまだ流動的です。例えば、２つの主要なナビゲーションバーを実験的にテストしている場合、両方をコンポーネントライブラリに追加することは、チーム全員を混乱させることになるので意味がありません。できれば、プロダクトデザインのテストが行われ、ある程度完成するまで待つ方が良いでしょう。

プロダクトが成熟したもので、既存のコンポーネントライブラリを持たない場合、デザインシステムはすでに現在の実装で決定されているはずです。しかし、まだ体系化されていません。この時点では、共通のUXパターンを定義し、プロダクト全体で定期的に使用されるコンポーネントのセットにまとめるのが都合が良いでしょう。さらに、コンポーネントのライブラリは、誰もが簡単にアクセスできる場所に保管されているのが理想的です。

Salesforceのコンポーネントライブラリは、同社のSalesforce Lightning Design Systemの一部です。

デザインシステムは本来、ツールキット

ツールキットのようにデザインシステムを使ってみることは、その有効性を測る素晴らしいテストになります。デザインシステムを、複数のデザイナーがプロセスを高速化するために定期的に使用している場合、順調であることを示しています。開発者が色や書体を参照したり、デザイナーからの少ないインプットで作業を行うことができれば、それもまた良いサインです。

一般的に、非常に複雑なコンポーネントや、プロダクトの中で一度や二度しか使用されない可能性のある部品を含めることは、有益ではありません。再利用可能なものであればあるほど、デザインシステムにふさわしいです。

Figmaは最近、組織向けのデザインシステムアナリティックスをリリースしました。これにより、チームはデザインシステムの異なる部分がどのように効果的であるかを確認でき、最適化に役立てることができます。

Figmaは、Figmaでデザインシステムを最適化するためのデザインシステムアナリティックスツールを提供しています。

Figma がコンポーネント・ライブラリの作成に最適な理由

Figma は、多くの優れた機能を備えた強力なデザインツールですが、複雑なプロダクトをデザインする際に特に便利になる要素のサブセットがあります。それは、スタイル、コンポーネント、ライブラリファイルです。これらの機能は、デザインシステムを最新の状態に保ち、デザインの一貫性を維持し、複数のデザインを一箇所から更新するためのショートカットを提供します。

・スタイルとは、色や書体（フォント、サイズ、重さなど）が一箇所に定義されているもので、多くのオブジェクトに適用することができます。
・コンポーネントとは、ボタンやチャットバブルのようなもので、スタイル、図形やテキストなどのオブジェクト、その他のコンポーネントから作ることができます。
・ライブラリファイルでは、複数のファイル間で、スタイルやコンポーネントをチームや組織で共有することができます。

Figmaは、コラボレーションと共有を核にしています。デザインファイルは、ブラウザ上で誰でも自由に編集と共有ができ、複数のユーザーが同時に編集できるため、リアルタイムで更新されます。これにより、デザイナー間だけでなく、開発者などのステークホルダーとのより効率的なコラボレーションが可能になります。

ライブラリのファイル作成

Figmaでは、事実上デザインシステムのはじまりとなるライブラリファイルを作成することができます。ここでは、スタイルやコンポーネントを定義して、チームや組織全体で共有し、複数のデザインで使用することができます。スタイルやコンポーネントは一箇所で更新することができ、これらの変更をすべての個々のデザインファイルに自動的に取り込むことができます。

これにはいくつかの重要な利点があります。

・スピード。デザイナーが何百ものデザインを手動で修正する必要がないため、時間を節約できます。コンポーネントを１つのライブラリファイルで管理することで、１箇所でカラーを更新すると、数回クリックするだけで、コンポーネントライブラリを使用して作成されたすべてのデザインに色が反映されます。
・一貫性。タスクを自動化することで、エラーの可能性を減らすことができます。

組織

Figma でデザインシステムを構築する際には、ツールとセオリーの間に類似点を引き出すことが有益です。例えば、Figma のスタイルは最も基本的なレベルであり、ブラッド・フロストのアトミックデザインモデルの原子（Atom）よりもさらに基本的なレベルであると考えられます。これらは、色やフォントのようなもので、プロダクトの美観を作り上げるのに役立ちます。

シンプルな Figmaコンポーネントは、アトミックデザインモデルでは原子（Atoms）とみなされます。より複雑な Figmaコンポーネントは、分子（Molecule）や有機体（Organism）とみなされ、テンプレートやページを構築するために使用されます。

Figmaのデザインシステムは、アトミックデザインに似ています。

コンポーネントライブラリにあると便利なものには、以下のようなものがあります。

・カラー
・フォント
・ブランドアセット、ロゴなど
・ナビゲーション
・ボタン
・通知機能に関するコンポーネント
・モーダルウィンドウ
・Form要素とvalidation

Figma でデザインシステムを構築 - 入門

今回の例では、簡単なサインインフォームを作成し、使われると推測できるコンポーネントとスタイルを説明します。

まずは、このフォームから再利用できそうなコンポーネントとスタイルを考えてみましょう。ロゴ、フォームフィールド、ボタンが入ったカードがあります。また、役に立ちそうな３つのフォントスタイルと数種類の色やエフェクトもあります。

上記のようにライブラリに含めるスタイルとコンポーネントが特定できたら、いよいよライブラリファイルを作成して追加を開始します。

ライブラリのファイル作成

新しいファイルを作成し、ライブラリとして公開します。新しいファイルを作成したら、Assets タブをクリックして、Libraryアイコンをクリックし、Publish をクリックします。これにより、ライブラリファイル内のスタイルとコンポーネントが公開され、他のファイルで使用できるようになります。

ファイルをライブラリとして更新します。「Assets」→「 Library」→「Publish」の順にクリックして、ファイルをライブラリファイルに変換します。

スタイルやコンポーネントをライブラリファイルで作成し、他のファイルで使用したり、メインのライブラリファイルから更新したりできるようになりました。

スタイルの作り方

スタイルの作成方法は、以下の手順で説明するように、ライブラリファイルでも他のファイルと同じです。

・スタイルを作成するオブジェクトを選択します。スタイルは、色、テキスト プロパティ、エフェクト、およびレイアウトグリッドが含まれるでしょう。
・新しいスタイルに使用されるプロパティの横にあるStylesボタン（四角い四つのドット）をクリックしてから、ポップオーバーのプラスボタンをクリックして新しいスタイルを作成します。

・こちらは、スタイルに名前を付けるためのモーダルを表示しています。例えば、"Green" ではなく "Primary Color" といったように、表象的な名前ではなく意味的な名前を使用した方が、そのスタイルが何に使用されるよう意図されているのかが明確になります。
・画面右下に表示されるポップアップを使用してスタイルをチームライブラリに公開するか、最初のインスタンスでライブラリを公開するための手順を繰り返します。

こちらが、Figmaによるスタイルの作り方のチュートリアルです。

コンポーネントの作成方法

コンポーネントの作成も非常に簡単です。コンポーネントを作成したいオブジェクトを選択し、右クリックして "Create Component "を選択するだけです。

コンポーネントは、スタイルと同じようにチームライブラリに公開されます。

こちらが、Figmaによるコンポーネントを作成する方法のチュートリアルです。

いくつかのスタイルとコンポーネントを作成したら、ライブラリファイルをチームで共有することができ、スタイルとコンポーネントをどのファイルでも使うことができます。

ライブラリの使用

これらのスタイルとコンポーネントを別のファイルで使用するには、新しいスタイルとコンポーネントを使用したい既存のデザインファイルに、ライブラリファイルをリンクする必要があります。Librariesモーダル（Assets、Libraryアイコン）を再度開き、使用するライブラリファイルのトグルスイッチをオンにしてください。

「Assets」→「 Library」をクリックして、このファイルで利用できるライブラリを切り替えます。

これでコンポーネントライブラリが使えるようになりました。コンポーネントは、画面左のAssetsタブからデザインファイルにドラッグして配置することができます。ライブラリのスタイルは、テキストスタイル、塗り色、ストローク、エフェクト、レイアウトグリッドを変更する際に、ローカルスタイルと同じように使用できます。

コンポーネントやスタイルがライブラリで更新されると、それらを使用しているファイルは変更を受け入れる必要があります。Figma は、ライブラリのファイルで更新が行われると通知を表示し、それらを公開するオプションを表示します。公開されると、コンポーネントとスタイルを使用しているファイルは、同様の通知を表示するか、Assetsタブでコンポーネントとスタイルを更新することで、変更を受け入れる必要があります。これにより、変更が公開されて不意に更新されることを防ぐことができます。

コンポーネントライブラリの構築を超えて

Figma は、本格的なデザインシステムのコンポーネントライブラリ部分のみをカバーしています。本格的なデザインシステムを構築するためには、ブランドガイドライン、コンテンツスタイルガイド、開発者向けのドキュメントなど、他の部分を取り入れることを検討する価値があります。

Mailchimpのコンテンツスタイルガイドは優れた例で、コンテンツを通じたトーン・オブ・ボイスやブランディングについて詳しく説明しています。GitHubには、同社のコンポーネントライブラリがコードでどのように機能するかについての素晴らしいドキュメントがありますし、GoogleのMaterial Design Systemには、デザインシステムの背後にあるロジックをドキュメンテーションした優れた例もあります。

デザインツールとしてのFigmaは大きく成熟し、常に新機能が追加されています。組織全体がアクセス可能なアナリティクスを内蔵したFigmaデザインシステムの追加は、大きな前進です。これらの機能が追加されたことは、Figma が本格的で包括的なデザインツールになることを目指していることを示しており、その達成に向けて順調にすすんでいることを示しています。