一貫性が鍵– FigmaDesignSystemを構築する方法

優れた設計システムは、出荷する製品の品質と開発のペースに大きな影響を与える可能性があることは、設計者の間でよく知られています。 グーグル、GitHub、IBMなどの企業がより良い製品をより速いペースで作成するためにそれらを使用するなど、包括的な設計システムを作成するケースが何度も明らかにされているため、質問は「なぜ設計が必要なのか」からシフトしています。システム？" 「どうすれば優れた設計システムを作成できますか？」

では、設計システムとは正確には何ですか？ Will Fanguyは、これを「明確な標準に基づいて、任意の数のアプリケーションを構築するために組み立てることができる、再利用可能なコンポーネントのコレクション」と定義しています。 デザインシステムには、UIコンポーネントライブラリとパターンライブラリだけでなく、スタイルガイド、ベストプラクティス、コードなどが含まれる場合があります。 建築家の建物の青写真と同じように、設計システムは、製品を構築する際の製品チームの「信頼できる唯一の情報源」としても機能し、一貫性を維持するのに役立ちます。

GitHubは、Figmaベースの設計システムの優れた例であるFigmaコンポーネントライブラリを共有するところまで行っています。 StorybookやComponent-DrivenDevelopmentなどのより広範なツールも、設計システムの実装と文書化に非常に役立つリソースです。

設計システムは設計の一貫性を維持し、製品の作成に携わるすべての人に役立つはずです。 これは、設計者が新しい画面、フロー、およびプロトタイプをより高速に作成するのに役立つツールキットです。 優れた設計システムは、開発者が設計決定の背後にある論理を理解するのに役立ち、よりまとまりのある製品を作成するのに役立ちます。 これにより、設計プロセスがスピードアップし、設計者は実験により多くの時間を費やすことができます。

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

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

場合によっては、設計システムの作成に投資するのが早すぎると逆効果になることがあります。 製品設計の初期段階では、プロセスはまだ流動的です。 たとえば、2つの主要なナビゲーションバーを試している場合、両方をコンポーネントライブラリに追加しても、チームの全員が混乱するため、意味がありません。 製品の設計が落ち着くまで待つことをお勧めします。できれば、テストしてある程度完成させることをお勧めします。

製品が成熟したものであり、既存のコンポーネントライブラリがない場合、設計システムは現在の実装によってすでに決定されているはずです。 しかし、それはまだ成文化されていません。 この時点で、一般的なUXパターンを定義し、製品全体で定期的に使用されるコンポーネントのセットに製品を抽出すると有利です。 さらに、コンポーネントのライブラリが、すべての人が簡単にアクセスできる中央の場所に保管されていると理想的です。

設計システムは主にツールキットです

ツールキットのような設計システムを使おうとすることは、その有効性についての優れたリトマス試験です。 複数の設計者がプロセスをスピードアップするために定期的に使用する場合、それは良い仕事をしています。 開発者が色やタイプスタイルについて参照したり、デザイナーからの入力を減らして作業したりできるのであれば、それも良い兆候です。

一般に、非常に複雑なコンポーネントや、製品に1回または2回しか使用できないコンポーネントを含めることは役に立ちません。 再利用可能なものが多いほど、それは設計システムに属します。

Figmaは最近、組織向けの設計システム分析をリリースしました。チームは、設計システムのさまざまな部分がどれほど効果的であるかを確認し、それを最適化するのに役立ちます。

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

Figmaは多くの優れた機能を備えた強力な設計ツールですが、複雑な製品を設計するときに特に役立つ要素のサブセットがあります。スタイル、コンポーネント、ライブラリファイルです。 これらの機能は、設計システムを最新の状態に保ち、設計間の一貫性を維持し、中央の場所から複数の設計を更新するためのショートカットを提供するのに役立ちます。

• スタイルは、1つの場所で定義され、多くのオブジェクトに適用できる色とタイプスタイル（フォント、サイズ、太さなど）です。
• コンポーネントはボタンやチャットバブルのようなものであり、スタイル、図形やテキストなどのオブジェクト、およびその他のコンポーネントから構築できます。
• ライブラリファイルを使用すると、スタイルとコンポーネントを複数のファイル間で、チームまたは組織と共有できます。

Figmaは、コラボレーションと共有を中核としています。 デザインファイルはブラウザ内の誰でも編集でき、自由に共有でき、複数のユーザーが同時に編集できるため、リアルタイムで更新されます。 これにより、設計システムは、設計者間だけでなく、開発者やその他の利害関係者とのより効率的なコラボレーションにつながります。

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

Figmaでは、多かれ少なかれ設計システムの開始点となるライブラリファイルを作成できます。 ここでは、チームまたは組織全体で共有され、複数の設計で使用されるスタイルとコンポーネントを定義できます。 スタイルとコンポーネントを1か所で更新でき、これらの変更をすべての個別のデザインファイルに自動的に取り込むことができます。

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

1. スピード。 設計者が数百もの設計を手動で更新する必要がなくなるため、時間を節約できます。 コンポーネントを単一のライブラリファイルで管理することにより、1つの場所で色を更新することで、数回クリックするだけで、コンポーネントライブラリを使用して作成されたすべてのデザインに伝播できます。
2. 一貫性。 タスクを自動化することにより、エラーの可能性を減らします。

組織

Figmaで設計システムを構築するときは、ツールと理論の間に類似点を描くと便利です。 たとえば、FigmaのStylesは最も基本的なレベルと見なすことができ、BradFrostのAtomicDesignモデルのAtomsよりもさらに基本的なレベルです。 これらは、製品の美学を構成するのに役立つ色やフォントのようなものです。

単純なFigmaコンポーネントは、ボタンなどのAtomicDesignモデルのアトムと見なされます。 より複雑なFigmaコンポーネントは、分子または有機体と見なされ、テンプレートやページを作成するために使用されます。

コンポーネントライブラリにある最も便利なもののいくつかは次のとおりです。

• 色
• フォント
• ブランド資産、ロゴなど。
• ナビゲーション
• ボタン
• 通知
• モーダル
• フォーム要素と検証

Figmaでの設計システムの構築–はじめに

この例では、簡単なサインインフォームを作成し、推測して使用できるコンポーネントとスタイルについて説明します。

まず、このフォームから再利用できる可能性が高いコンポーネントとスタイルについて考えてみましょう。 ロゴ、フォームフィールド、ボタンを含むカードがあります。 3つのフォントスタイルと、便利ないくつかの異なる色と効果もあります。

含まれるスタイルとコンポーネントが上記のようにライブラリで識別されたら、ライブラリファイルを作成してデータの入力を開始します。

Figmaライブラリファイルを作成する

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

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

Figmaスタイルを作成する方法

スタイルの作成は、以下の手順で概説されているように、ライブラリファイルでも他のファイルと同じです。

• スタイルを作成するオブジェクトを選択します。 スタイルには、色、テキストプロパティ、効果、およびレイアウトグリッドを使用できます。
• 新しいスタイルで使用するプロパティの横にある[スタイル]ボタン（正方形の4つのドット）をクリックしてから、ポップオーバーのプラスボタンをクリックして新しいスタイルを作成します。

• これにより、スタイルに名前を付けるためのモーダルが表示されます。 多くの場合、表示名ではなく意味名を使用すると便利です。たとえば、「緑」ではなく「原色」を使用すると、スタイルの使用目的が明確になります。
• 画面の右下に表示されるポップアップを使用してスタイルをチームライブラリに公開するか、最初にライブラリを公開するために実行した手順を繰り返します。

これは、スタイルを作成する方法に関するFigmaのチュートリアルです。

Figmaコンポーネントを作成する方法

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

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

これは、コンポーネントの作成方法に関するFigmaのチュートリアルです。

いくつかのスタイルとコンポーネントが作成されると、ライブラリファイルをチームと共有でき、スタイルとコンポーネントを任意の数のファイルで使用できます。

Figmaライブラリの使用

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

これで、コンポーネントライブラリを使用する準備が整いました。 コンポーネントは、画面左側の[アセット]タブからデザインファイルにドラッグすることで配置できます。 ライブラリスタイルは、テキストスタイル、塗りつぶしの色、線、効果、およびレイアウトグリッドを変更するときに、ローカルスタイルと同じように使用できます。

ライブラリでコンポーネントとスタイルが更新されると、それらを使用するファイルは変更を受け入れる必要があります。 図は、ライブラリファイルで更新が行われると通知を表示し、それらを公開するオプションを提供します。 公開されると、コンポーネントとスタイルを使用するファイルは、同様の通知またはアセットタブを介して変更を受け入れ、コンポーネントとスタイルを更新する必要があります。 これにより、変更が予期せず公開および更新されるのを防ぎます。

Figmaでコンポーネントライブラリを構築するだけでなく

Figmaは、本格的な設計システムのコンポーネントライブラリ部分のみをカバーしています。 完全に完成したデザインシステムの場合、ブランドガイドライン、コンテンツスタイルガイド、開発者向けドキュメントなど、組み込むことができる他の部分を検討する価値があります。

Mailchimpのコンテンツスタイルガイドは優れた例であり、コンテンツを通じて声のトーンとブランディングを詳しく説明しています。 GitHubには、コンポーネントライブラリがコードでどのように機能するかについての優れたドキュメントがいくつかあります。また、Googleのマテリアルデザインシステムには、デザインシステムの背後にあるロジックをドキュメント化する優れた例がいくつかあります。

デザインツールとして、Figmaはかなり成熟しており、新しい機能が絶えず追加されています。 組織全体がアクセスできる分析機能が組み込まれたFigma設計システムの追加は、大きな前進です。 これらの機能の追加は、Figmaが本格的で包括的な設計ツールになることを目指しており、それを達成するために順調に進んでいることを示しています。

•••

Toptal Designブログでさらに読む：

• デザインツールとしてのFigmaの力
• Figmaとのコラボレーションデザインを合理化
• ミニチュートリアル–設計プロセス全体にFigmaの機能を活用する
• ミニチュートリアル–Figmaボタンコンポーネントの操作
• これらのトップUXツールであなたの技術をマスターする