Figmaでの設計システムの構築とスケーリング：ケーススタディ

多国籍企業の設計システムを構築する方法を決定することは、すべてのコンポーネントとパターンを細心の注意を払ってカタログ化することを意味します。 これは、全体像と詳細への焦点の両方を必要とする大規模な事業です。 これが、ある設計システムチームリーダーがそれを達成した方法です。

スイスに本拠を置く持ち株会社ABBが設計システムの作成に着手したときの目標は、何百ものソフトウェア製品の一貫したルックアンドフィールを組み合わせることでした。 。 世界中に約20のビジネスユニットと約15万人の従業員を抱える企業にとって、それは簡単な作業ではありませんでした。 ABBの10人の設計システムチームでリードプロダクトデザイナーを務めたAbdulSialにとって、コンポーネントとパターンのライブラリのスケーリングは、広範なドキュメントに重点を置いて、オープン性と透明性を維持することに依存していました。

設計システム設計者の役割

ますます、ABBのような大企業は、設計システムの作成と保守に専念するチームを持っています。 「設計システムにより、一貫性が保たれ、公正な時期に市場に投入され、生産が価値を構築していないカスタマイズにとらわれることがなくなります」と、マドリードを拠点とするデザイナーのアレハンドロヴェラスコは言います。 または、ポルトガルのリスボンのデザイナーであるAlexandre Brito氏は、次のように説明しています。 みんなが同じ言語を持っているようなものです。」

従来のスタイルガイドがデザインの基本（フォントや色など）をカバーしている場合、デザインシステムの範囲はさらに広がります。 「デザインシステムは、スタイルガイドに加えて、デザインコンポーネント、デザインパターン、コードコンポーネント、さらにはドキュメントを組み合わせたものです」とSial氏は言います。 彼がABBの設計システムに取り組んだとき、約120人の設計者が定期的にそれを使用していました。 この取り組みはシステムのバージョン4.8を表しており、チームはそれを「デザインエボリューション」と呼んでいます。

設計システムの設計者は、個々の製品のみに焦点を当てる設計者とは異なる役割を果たします。 「会社が使用しているさまざまな製品すべてを一目で確認できます」とSial氏は言います。

設計業務で働くには、会社全体の利害関係者とのコミュニケーションも必要です。 「設計システムの設計者は社交的でなければなりません」とVelascoは言います。 「設計システムの設計者は、組織内でさまざまな役割を持つ人々と仕事をしたり話したりするのが本当に好きでなければなりません。 彼らは、会社のニーズに合わせて設計システムを構築するために、どのフィードバックを含めるかを区別できなければなりません。」

コンポーネントのライフサイクル

ABBの設計システムに取り組んでいるSialは、「ドキュメンテーション、ドキュメンテーション、ドキュメンテーション」という1つの包括的な哲学に導かれました。 Sialは、ABBのウェブサイト、モバイル画面、または大型のスタンドアロン画面で再利用可能なすべての要素について、コンポーネントのライフサイクルと呼んでいるものを示したいと考えていました。 これは、ほんの数例を挙げると、パンくずリスト、ヘッダー、入力、ボタンなど、すべてのコンポーネントとパターンの広範な記録管理を意味しました。 「それが通過した旅は何ですか？ どのような決定が行われましたか？ そうすれば、常にすべてを再現しているわけではありません。 何かを試す前に、誰かがすでにそれをテストしていることを読んで確認することができます」とSial氏は言います。

彼の経験では、この哲学はドキュメンテーションへの典型的なアプローチからの逸脱です。 たとえば、ペースの速い製品開発の世界では、ドキュメントはプロジェクトの最後に書かれたり、完全に放棄されたりすることがよくあります。 しかし、設計システムの場合、ドキュメントは後付け以上のものでなければならないとSial氏は言います。 「設計システムは決して完成しません。 継続的な改善が必要です」と彼は言います。 「設計システムの作成者と消費者は、それを改善し続けるために、思考プロセスと決定を理解したいと考えています。」

ドキュメントは、ABBのような大規模な設計システムにとって特に重要です。 「このような大規模なチームでは、拡張できる必要があります」と彼は言います。 「チームに参加するすべての人がすぐに任意のコンポーネントにアクセスして、コンポーネントがどのように開始され、どのように編集され、どのバージョンを使用しているかを理解できるようにするにはどうすればよいですか？」

適切なツールを見つける

Figma、Sketch、Adobe XDなど、デザインシステムを構築するためのツールはたくさんあります。 Sialは、ドキュメント用の十分なスペースを提供するFigmaに落ち着く前に、いくつかのツールを試し、設計ツールとプロジェクト管理ツールを組み合わせて試しました。

Sialと彼のチームは、すべてのコンポーネントを独自のファイル内に配置する必要があると判断しました。 「ほとんどの場合、一度に1つのコンポーネントで作業しています。 すべてのコンポーネントを1つのファイルに入れると、Figmaの速度が低下します。 各コンポーネントに独自のファイルを与えることで、開くのが速くなり、すべての履歴とドキュメントを1か所にまとめることができます」と彼は言います。

階層の設定

Sialは、各コンポーネントとパターンのファイルが同じページになるようにABB設計システムを設定しました。 次の画像は、各ページの内容を詳しく説明しています。

カバー

Sialは、すべてのコンポーネントに簡単な表紙を設定することをお勧めします。 Figmaでは、これによりすべてのコンポーネントのサムネイルプレビューが可能になり、ファイルの閲覧性が向上します。 ABBセットアップでは、表紙にコンポーネント名とそのコンポーネントのフェーズ（設計、開発、またはリリース）が含まれます。 コンポーネントが進行すると、ステータスを簡単に更新できます。

インベントリ、ユースケース、およびリクエスト

このページには、コンポーネントが会社のデジタル製品に表示されるさまざまな方法の例が含まれています。 たとえば、テキストフィールドコンポーネントの場合、インベントリページには、Androidデバイスでの表示と比較したiPhoneでの表示と比較したabb.comでのテキストフィールドの表示が表示されます。 「在庫により、すでにそこにあるものを明確に理解することができます」とSial氏は言います。

このページには、コンポーネントが誤って使用されている方法も示されているはずです。 「これにより、製品を調べて、位置合わせと位置ずれがどこにあるかを確認できます」とSial氏は言います。 彼は、設​​計システムプロジェクトを立ち上げるチームに、既存のものをカタログ化することから始めるようにアドバイスしています。 「在庫から始めれば、デザインを作成する際のガイドになります」と彼は言います。

参照、ベストプラクティス、および競合分析

Sialは、ビジョンボードに似た各コンポーネントファイルのセクションを作成し、他の企業が同等の部品をどのように設計しているかを示すことをお勧めします。 「他のすべての場合と同様に、ベストプラクティスは、競合分析を実行し、他の人がそれをどのように行っているかを確認することです」と彼は言います。 「他の製品を観察し、それらの学習を確認してください。」

テストとデータ

テスト結果データページには、A / Bテストの結果やユーザーや利害関係者からのフィードバックなど、コンポーネントのテストに関連するすべてのデータが集約されています。 つまり、Sialは、「これはコンポーネントの全体像です」と述べています。 おそらく、設計チームは2年前に新しいバリエーションを試し、それが機能しないことに気づきましたか？ 「たぶん、私たちはそのバリエーションに取り組み、何らかの理由でそれを破棄しました」と彼は言います。 もしそうなら、この種の歴史は、設計者がそれを再試行しないことを確実にすることによってかなりの時間を節約することができます。

範囲

次のページでは、設計者が設計を実現できるように、コンポーネントのスコープを示します。 彼らがスコープページに到着するまでに、Sialは次のように述べています。 あなたはすべての製品の在庫を理解しています。 何を構築する必要があるか、そして要件を知っています。 今度はそれを書き留めて、簡単に説明します。」 彼は、スコープの作成は、製品の所有者、開発者、および設計者との共同プロセスでなければならないと付け加えています。

バージョン

コンポーネントの最終バージョンの画像がここにあり、最新のイテレーションが上に固定されています。 他の設計者は、それをレビューしてコメントできるはずです。

サンドボックス

サンドボックスを使用すると、設計者はFigmaで直接コンポーネントまたはパターンのさまざまな反復を試すことができます。 「面倒なことがあり、標準化はありません」とSial氏は言います。 「それは、デザイナーが何でも自由にできる遊び場にすぎません。」

Figmaコンポーネント

このファイルには、設計システム全体で簡単に繰り返すことができるUI要素であるFigmaコンポーネント自体のページも含まれています。 設計者はコンポーネントに変更を加えることができ、その変更は会社全体のそのコンポーネントのすべてのインスタンスに反映され、すべての一貫性が保たれます。 このページはFigmaデザインシステムライブラリにエクスポートされ、個々の設計者はFigmaコンポーネントを自分のデザインにドラッグアンドドロップできます。 設計システムチームがコンポーネントに変更を加える必要がある場合は、一度変更して会社全体に展開できます。

スタイルルール

次に、デザインシステムの設計者と開発者は、スタイルルールページを作成します。これは、「デザインに表示されない」要素のキャッチオールの一種です。 たとえば、ページを下にスクロールすると、コンポーネントはどのようにレンダリングされますか？ また、設計システムチームが未解決の質問や問題を追跡する場所でもあります。 彼は、このページがいかに重要であるかを知って驚いたと言います。「最初は、このページはそれほど重要ではないと思っていましたが、今ではほとんどの時間をここで過ごしていることに気づきました。」

引き渡す

ハンドオーバーノートは、コンポーネントのコードを作成するための開発者向けの指示です。 引き継ぎ文書は、コンポーネントの構造から始まり、そのバリエーションが含まれています。

ABBシステムの引き渡し文書には、設計トークンも含まれています。 ABBなどの大規模なデザインシステムでますます人気が高まっているデザイントークンは、色、書体、フォントサイズなどのUI要素に関するプラットフォームに依存しないスタイル情報の一部です。 デザイントークンを使用すると、デザイナーは値を変更できます（たとえば、召喚状ボタンを青ではなくオレンジにする必要があります）。その変更は、ウェブサイト、iOS、またはAndroidプラットフォーム。

Sialは、設計者がFigmaで作成できるトークンの範囲を拡大するために、Figmaトークンプラグインも作成しました。 「Figmaは、色、タイポグラフィ、影、グリッドスタイルをサポートしています」と彼は言います。 プラグインは、不透明度や境界線の幅など、より多くの変数のトークンを生成します。 また、標準化された命名規則が作成されるため、設計者はトークン名を手動で追跡する必要がありません。 「プラグインは、開発者と設計者の間のギャップを埋めます。 これにより、両方が設計の信頼できる唯一の情報源に取り組むことができます。 1つの場所で変更を加えると、その変更は設計とコードのあらゆる場所で有効になります」と彼は言います。

Sialは、彼のシステムでは、開発者がコンポーネントの作成全体を通じて積極的な役割を果たしていることを強調しています。 「早い段階で、開発者に見せるための準備ができたら、開発者を巻き込みました」と彼は言います。 「それから、それが機能していないことに気づきました。そして今、私たちは文字通り彼らとのキックオフセッションを開始します。」

ドキュメントのWebページ

各ファイルの最後のページには、コンポーネントが完成品としてどのように見えるかを示す、最終的なデザインのWebページが含まれています。 「実際の例がどのように見えるかを示すページを作成し、ユーザー（この場合はデザイナー）が実際のWebサイトで1日の終わりにどのように見えるかを確認できるようにします」とSial氏は言います。

コラボレーションが鍵

設計システム設計者の役割は多面的です。 アレハンドロ・ヴェラスコが言うように、「設計システムの設計には非常に多くの役割が含まれます。私がそれを主導しているのであれば、私はプロジェクトの接着剤です。」

これは膨大な作業であり、必ずしもすべての企業にとって正しい動きであるとは限りません。 たとえば、スタートアップは、GoogleMaterialDesignやIBMCarbonDesign Systemなどのすぐに使えるシステムから始める方が、作成に膨大なリソースを費やすよりも優れている場合があります。 それでも、それだけでは不十分な時期が来るかもしれません、とアレクサンドル・ブリトは言います。あなたが構築しているブランド。」

設計システムの構築には、作業と献身が必要です。 コラボレーションも必要です。 プロセス全体を通じてABBのシステムの開発にすべての利害関係者を関与させることが優先事項であるとSialは強調します。 「それは私のチーム全体との本当に反復的な作業でした。 それはすべて彼らの話を聞くことであり、私たちは時間をかけてそれを徹底的に学び、テストし、この構造を開発しました」と彼は言います。

歴史やベストプラクティスを含む広範なドキュメントを含む構造を持つことは、Figma設計システムの中核です。 「人々がすべてのドキュメントを1か所で読むことができるので、それは成功です」とSialは言います。 「彼らは、ユースケースから設計、引き渡し、最終コンポーネントのページに至るまで、すべてを見ることができます。 人々はコンポーネントのライフサイクル全体を見ることができます。」

Abdul SialのFigmaファイル全体をここで閲覧できます：コンポーネントテンプレート。

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

• 一貫性が鍵– FigmaDesignSystemを構築する方法
• 構造の力–システムモデルを設計するためのガイド
• デザインシステムとパターンを理解する
• デザインツールとしてのFigmaの力
• ミニチュートリアル–設計プロセス全体にFigmaの機能を活用する