FigmaとUXPin【 デザインシステム 徹底比較】

デザインシステムは、製品のデザインプロセスを効率化し、チーム間の一貫性と拡張性を確保します。

Figma と UXPin には、それぞれさまざまなニーズに合わせた独自の機能を備えた、強固なソリューションがあります。

そこで本記事では、Figmaのチームライブラリやとその利点、そして潜在的な欠点についてお話します。

また、UXPinのデザインシステムとMergeの技術を使った、チームライブラリの代替案もご紹介します。

主なポイント：

• Figmaのチームライブラリで、デザインシステムの作成と共有がしやすくなり、それによって一貫性が保証される。

• Figmaのデザインシステムは先進的ではあるが、デザイナーとデベロッパー間のギャップを埋めるという点では課題がある。

• UXPin Mergeは、一元管理、究極の一貫性、複数のフロントエンド開発をサポートし、デザインと開発プロセスを統一するという点において、Figmaのプロトタイプ ・ チームライブラリを上回る。

UXPin の Merge技術で、組織・プロトタイプ全体 で「信頼できる唯一の情報源（Single source of truth）」を作成し、製品開発プロセスをシンプルにしませんか。詳しくはUXPin Merge をぜひご覧ください。

Figma でデザインシステムを作成できるのか

チームライブラリ機能により、デザイナーは Figma でデザインシステムを作成することができます。

さまざまなファイルやプロジェクト間で、UIコンポーネントやスタイルを公開し、共有することができます。

デザインの要素が更新されると、その要素が使われている各デザインファイルに一貫性と最新性が保たれ、それによって組織全体は最新リリースが同期された状態が保たれます。

アトミックデザインとは ‐ Figma のデザインシステムに適用するために

Figma は、ブラッド・フロスト氏の「アトミックデザインの原則」に基づき、チームライブラリを設計しました。

アトミックデザインは、UI （ユーザーインターフェース）を以下のように分解します：

• 原子： カラースタイル、ラベル、テキストスタイル、スペーシングなど、Web ページの基本的な構成要素。

• 分子： 例えばボタン、フォーム入力、チェックボックスなど、色のように原子をいくつか組み合わせ、ラベルと形をつけると分子になる。

• 有機体：複数の分子を結合させると有機体になる。サイドバーやヘッダーなど、より複雑な UI 要素になることもある。

• テンプレート： さまざまな生物を組み合わせると、ページ全体のレイアウトを形成するテンプレートができあがる。

Figma のアトミックユニット：コンポーネントとスタイル

コンポーネントとスタイルは、Figma のデザインシステムの原子単位です：

• コンポーネント： ボタンやアイコンのような再利用可能なデザイン要素

• スタイル： 色やタイポグラフィなどのデザイン仕様

この要素は、デザインシステムのチームが作成したオリジナルのファイルに存在しています。

さまざまなファイル間でアクセスできるようにするには、ファイルの所有者がチームライブラリに公開するといいでしょう。

Figma のチームライブラリにアクセスするには？

コンポーネントとスタイルを公開すると、Figma のチームライブラリで見つけることができます：

• デザインファイルを作成するか、開く

• Assets のタブから［Team Library（チームライブラリ）］をクリックして開く

• 目的のチームライブラリを検索または参照する

• ライブラリを有効にして、そのコンポーネントをアセットパネルで利用できるようにする

チームライブラリを有効にすると、デザイナーはそのコンポーネントのインスタンスをデザインファイルに簡単にドラッグ＆ドロップでき、それによってデザインの一貫性が確保されます。

Figma のデザインシステムの主な特徴

• スタイル： コンポーネントの色、文字、エフェクト、レイアウトグリッドを確定する

• 変数（ベータ）： 色値、数値、文字などの再利用可能な値を保存して、コンポーネントを半インタラクティブにしたり、明暗モードを切り替えたりできる

• バリアント： コンポーネントとパターンのバリアントとステートを作成する

• デザイントークン： デザインシステムチームが複数のデザインファイルで共有できる動的なスタイルで、変更と更新を一元管理する

• Storybook：デザイナーは、Figma のデザインをStorybookコンポーネントに埋め込むことができ、関連する Figma コンポーネントとともにストーリーをインポートして参照することができる

• ライブラリー分析： デザインシステムのチームがパターンやコンポーネントの使用状況や採用を監視できるようにする

• バージョン履歴： Figma ファイルのバージョン履歴を表示し、古いバージョンを復元する

Figma のチームライブラリを使うデメリット

Figma のデザインシステムは、デザインをシンプルにするために進化してきましたが、デザイナーとエンジニア間のギャップを埋めることはできません。

デザインシステムチームは、Figma 用とコード用の２つのライブラリを管理が必要になります。

UXPinは、２０２３年に Whitespaceと共同出版し、そこでデザインシステムの課題とその克服方法について、世界的に有名な１９社にインタビューをしたレポートを発表しました。

インタビューを行った企業では、Figma や Sketch のような画像ベースのツール を使用して いました。

筆者たちは、各組織にとっての主要な目標が「信頼できる唯一の情報源（Single source of truth）」であることがわかりました。

企業はこの目標を達成するためにプラグインやカスタムソリューションに依存し、コストを増加させ、フローを複雑にしているのです。

以下に、デザインシステムに画像ベースのツールが使われる場合での、主な問題点を挙げてみましょう：

• デザイナーと開発者は別々のライブラリ (Figma用のUIキットとデベロッパー用のコードコンポーネント) を使用するため、組織が「信頼できる唯一の情報源（Single source of truth）」を得ることはできない。

• 変更の更新には、デザインシステムレポジトリ、Figma、プロトタイピングツール、関連ドキュメントなど、複数の場所の変更が必要。

• 単一のUIライブラリを一元管理しないと、さまざまなバージョンを使っているチーム間でエラーが発生する。

• ハンドオフでは、インタラクションを説明するための長いドキュメントが必要であり、２０２３年のリリースでも、コードに匹敵するインタラクティブ性を実現できない。

• デザイナーは、プロトタイプやテストのために追加のツールやプラグインを使わなければならず、それによってコストや運用の負担、ミスの可能性が増大する。

UXPinのデザインシステムと Figmaのチームライブラリの比較

UXPinは、デザインシステムの成熟度に応じて２つのソリューションを提供しています：

• デザインシステム： コンポーネント、アセット、タイポグラフィ、ドキュメントを含むデザインシステムを作成する。

• Merge技術： レポジトリから UXPin にコードコンポーネントライブラリをインポートして、プロトタイピングとテストを行う。

UXPin のデザインシステム

UXPinのデザインシステムは、Figmaのチームライブラリと同じように機能します。

組織は、デザインシステムを作成し、チームメンバーと共有することができ、デザインシステムチームは、権限のない変更を防ぎ、システムの完全性を確保するために、権限 を設定することができます。

UXPin のビルトインデザインライブラリの活用

組織は、iOS、マテリアルデザイン、Bootstrap、Foundation など、UXPinのビルトインデザインライブラリのいずれかを基盤として使うことで、デザインシステムをサッと構築して拡張することができます。

インタラクティブ性の向上

FigmaとSketchは画像ベースのデザインツールで、デザイナーは最小限の機能しか持たない静的なプロトタイプしか作成できません。

一方、UXPinはコードで動き、ベクターグラフィックスを生成する代わりに、キャンバスは HTML、CSS、Javascript を裏でレンダリングします。

つまり、UXPinのようなコードベースのプラットフォームを使うことは、デザイナーが、完全に機能する入力要素、状態管理、複雑な UI パターンなど、最終製品のコンポーネントを忠実に模倣したインタラクティブ性を実現できるということです。

以下に、UXPinが他のデザインツールと一線を画す４つの特徴を挙げましょう：

• ステート（状態）：デザイナーは、１つのUI要素に対して複数のステートを設定し、ドロップ ダウンメニュー、タブメニュー、ナビゲーショナルドロワー などの複雑なインタラクティブコンポーネントをデザインできる。

• バリアブル：ユーザーの入力からデータを取得し、アプリバーに名前やプロフィール画像に表示され るなど、個別化された動的なユーザー体験を作成する。

• Expression： Javascript のような関数で、複雑なコンポーネントや高度な機能を作成できる

• 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」と「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。

UXPinの高度なコードベース機能により、企業はプロトタイプやテストに外部ツールやプラグインを必要とせず、それによってコストや重複したワークフロー、運用タスクが削減されます。

UXPinのデザインシステムは、デザインシステム成熟の初期および中期段階を支援し、Merge の技術により、組織は最終段階である完全に統合された「信頼できる唯一の情報源（Single source of truth）」を達成することができます。

Merge の技術で「信頼できる唯一の情報源（Single source of truth）」を実現する方法

Mergeの技術は、デザイナーとデベロッパーがまったく同じコンポーネントライブラリで作業するという究極の成熟を実現します。

１回の更新で、ドキュメントを含むデザインとエンジニアリングの変更が同期されるのです。

真の 「信頼できる唯一の情報源（Single source of truth）」

Mergeを使うと、組織はレポジトリから UXPinにUIライブラリをインポートできます。

そのため、デザイナーはデザインプロセスで、エンジニアが最終製品を開発するのと同じデザインシステムコンポーネントを使うことができます。

レポジトリへの変更は自動的にUXPinに同期され、最新バージョンがチームに通知されます。

この新しい UXPin Mergeのアプローチにより、より連携しやすく統合的なデザインプロセスが実現します。

デザイン、プロトタイプ、開発を分離するのではなく、UXPinを使うことで、プロセス全体を通してエンジニアリングチームと製品チームを関与させる統合フローを構築することができます。

そしてその結果、製品の最終品質は劇的に上がりました。

ー エリカ・ライダー氏、プロダクト、UX、DesignOps のソートリーダー。

バージョン管理でチームの同期を保つ

デザイナーは UXPinのバージョン管理を使って、最新リリースに切り替えるタイミングを選択し たり、必要に応じて古いバージョンに戻すことができます。デザイナーとエンジニアが同じバージョン管理で同期しているため、混乱や伝達ミスがなく、デザインシステム全体の変更履歴が１つで済みます。

Merge が Figma のチームライブラリより秀でている点

Figmaのチーム ライブラリを使う場合、組織は 2 つのバージョンのデザインシステムを維持する必要があります。

さらにプロトタイプとテストにさまざまなツールを使う場合は、さらに多くのバージョンを維持することもあります。

一方、それがMergeの場合、管理するのはデザインシステムのレポジトリのみです。

一元管理

デザインシステムチームは、デザインチームとエンジニアリングチームのためのレポジトリを一元で管理します。

この一元管理によって、チームはコンポーネントライブラリ、更新、ガバナンス、ドキュメント化、パターンの推進を完全にコントロールできるのです。

究極の一貫性

デザインシステムを一元管理することで、コンポーネントライブラリへの不正な変更を防ぐことができ、インタラクティブ性やスタイリングなどのプロパティは、コンポーネントやパターンに織り込まれます。

デザイナーがコンポーネントを取り外して調整できる Figma とは違って、Merge の要素とそのプロパティは固定されます。

デザイナーは、UXPin のプロパティパネルに表示される、デザインシステムのレポジトリで定義されたプロパティのみを扱うことができます。

デザインシステムチームは、React propsまたはStorybook Argsを使ってコンポーネントのプロパティを確定でき、デザイナーは、プロパティパネルで確認および調整をすることができます。

このような制約は、デザイナーとエンジニアが常に同じパラメータと制限の中で作業するということであり、リリースのたびにピクセルパーフェクトな一貫性がもたらされます。

MergeはUX負債と技術的負債を大幅に削減しながら、ドリフトを排除するのです。

複数のフロントエンド技術に対応

ほとんどの Javascript フロントエンド技術を 以下２つの統合機能を使って UXPin と同期させることができます：

• Git統合： Reactレポジトリに直接接続

• Storybook 統合： React、Vue、Ember、Angular など、あらゆる Storybook ライブラリを同期する

Figmaの Storybookプラグインは、componentとStoryを視覚化させるだけですが、UXPinのStorybook統合は、エディター内で完全にインタラクティブなプロトタイプを構築するためにコンポーネントライブラリをインポートします。

デザイン、プロトタイプ、テストを１つのツールで

Figmaではインタラクティブなエフェクトやアニメーションなどの制限もまだあるため、多くの企業はデザインとプロトタイプに複数のツールを使わないといけません。（例：プロトタイプに Zeplin の使用など）

一方、Mergeテクノロジーの場合、１つのツールだけで完結するので、ワークフローはシンプルになり、同時にコストも削減されるでしょう。

デザインプロセスでコードコンポーネントを使うことは、デザイナーが最終製品のような外観と感触のプロトタイプを作成できるということであり、プロトタイプの幅は広がるため、ステークホルダーやユーザーテスト参加者からのより良いフィードバックの取得に繋がります。

オープンソースのコンポーネントライブラリを使ってプロトタイプを作成して進化させる

UXPinには、Fluent UI、Ant Design、MUI、UXPin BoilerplateなどのMergeライブラリがあります。これらの使用によって、完全に機能する高忠実度なプロトタイプやテストのための MVP（実用最小限の製品）を作成することができます。

また、MergeのGit統合を使っているチームは、上記のライブラリからコンポーネントを組み合わせて、新しいパターンの構築や新しいパターンの検証できるのです。開発者のサポートなしでもデザインシステムの進化が促進されるのです。

UXPinのコードベースのソリューションを使用することで、ワンランク上の製品設計をしてみましょう。

Mergeテクノロジーを使って、「信頼できる唯一の情報源（Single source of truth）」でデザインと開発をつなげましょう。

詳細とアクセス権については、Merge のページをぜひご覧ください。