【FigmaとUXPin】 コンポーネントライブラリにおける違い

Figma と UXPin の コンポーネントライブラリ - どちらがいいか？

Figma のコンポーネントライブラリは、再利用可能な UI要素を作成してチームメンバーと共有できる素晴らしい方法です。

デザイナーは、Figmaでコンポーネントを使ってUIやプロトタイプを作成することができ、プロジェクト間の一貫性を維持することができます。

ただ、Figmaのコンポーネントライブラリには、インタラクティブなプロトタイプを作成できないなどの制限がいくつかあります。

一方 、UXPin MergeはFigmaと異なり、実物に近くて完全にインタラクティブなプロトタイプを作成することができます。

主なポイント：

  • Figmaコンポーネントライブラリは、再利用可能な UI要素を作成してそれを共有するための素晴らしい方法である。
  • UXPin Mergeは、Figma のコンポーネントライブラリに代わるもので、完全にインタラクティブなプロトタイプを作成できる。
  • Figmaのコンポーネントライブラリには、インタラクティブなプロトタイプを作成できないという制限がある。
  • MergeはUI コンポーネントをレポジトリからデザインプロセスにインポートすることで、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成する。
  • Merge では、デザインプロセスでコードコンポーネントを使って完全にインタラクティブなプロトタイプを作成し、テストを改善することができる。

Figmaでの基本的なプロトタイプから、UXPinでの高度なプロトタイプに切り替えてみませんか？こちらから UXPin Merge をぜひご覧ください。

Figma のコンポーネントライブラリとは

Figma のコンポーネントライブラリでは、Figma のコンポーネントとスタイルを作成し、そのファイルを公開することによって、チームメンバーと共有することができます。

そしてチームメンバーは、この共有ファイルにアクセスし、コンポーネントやスタイルをデザインシステムとして使うことができます。

デザインチームは、このようなコンポーネントやスタイルを変更し、それをライブラリにプッシュすることができます。

また、権限を作成して、権限を与えられたチーム メンバーだけがコンポーネントライブラリを変更できるようにもできます。

Figma のコンポーネントとコンポーネントインスタンスとは

Figma のコンポーネントは、コンポーネントライブラリの一部を構成する、単一の再利用可能な UI 要素であり、Figma のドキュメントによると、コンポーネントライブラリには、以下のような様々なものを保存することができます：

このようなマスターコンポーネントは、プライマリコンポーネントファイルか、左サイドバーの［assets（アセット）］のタブで見ることができます。

コンポーネントインスタンスは、UI やプロトタイプの作成に使われるライブラリコンポーネントのコピーです。例えば、ライブラリに２０画面に表示されるアプリバーのコンポーネントがあるとします。

この２０個のアプリバーは、ライブラリコンポーネントのインスタンスになります。

ライブラリコンポーネントを更新すると、そのインスタンスもすべて変更されます。Figma では、コンポーネントが更新されるたびにそれがデザイナーに通知され、いつ最新バージョンを受け入れるかを選択できます。

Figma の「スタイル」とは

「スタイル」によって、チームやプロジェクト間で一貫性が保たれ、誰もが同じプロパティや値を使えるようになります。

Figmaでは、色、タイポグラフィ、サイズ、間隔、ボーダー半径など、再利用可能なスタイルプロパティを保存でき、これは CSS の変数に相当します。

そして、HEXコードやフォントサイズの値を入力する代わりに、例えば、プライマリーブルーや見出し１などの定義済みのスタイルを選択します。

Figma でコンポーネントライブラリを見つける方法

Figma のコンポーネントライブラリを探すには、以下のような方法があります：

  • デザインライブラリのファイルの中で作業している場合は、コンポーネントを右クリックし、［Go to main component（メインコンポーネントに移動）］を選択する。また、右サイドバーのコンポーネント名の横にある［Figma Component（Figmaのコンポーネント）］のアイコンをクリックすることもできる。
  • メインのファイルにアクセスできない場合、Figma のコンポーネントライブラリにアクセスすることはできないが、左サイドバーの「Assets（アセット）」タブで、のコンポーネントをすべて見ることができる。

Figma のコンポーネントライブラリのコンポーネントの使い方

  • 左サイドバーの「Assets（アセット）」タブをクリックする。
  • 検索フィールドを使ってアセットを検索するか、下のドロップダウンから「ライブラリ」を選択する。
  • 「Assets」タブからコンポーネントをクリックするか、キャンバス上にドラッグする。
  • 左サイドバーの「Design」タブでコンポーネントのプロパティと変数を調整する。

インスタンスを切り離すことで、コンポーネントを再デザインできます。

そして、切り離したインスタンスに加えた編集は、以前のコンポーネントやインスタンスには影響せず、変更が完了したら、これを新しいコンポーネントとして保存し、「Assets」のフォルダに表示されます。

Figma のコンポーネントライブラリの限界と課題

Figma のコンポーネントライブラリで、UI 要素の再利用や共有がしやすくなりますが、それを使ってできることには、以下のような制限があります：

  • Figma のコンポーネントは、美しい UI デザインを作成するが、インタラクティブなプロトタイプを作成する機能がないため、デザイナーが達成できる範囲は限られる。
  • デザインチームは、Figmaのコンポーネントをよりインタラクティブにするには追加のツールやプラグインが必要であり、コストとワークフローの複雑さが増す。
  • コンポーネントで、デザインチームは Figma で UI や基本的なプロトタイプを構築することができるが、デベロッパーにとって使いやすいものではなく、コードのUIコンポーネントとずれる可能性がある。
  • インスタンスを切り離すのは、新しいコンポーネントを作成するのに便利だが、デザインチームが UI要素を許可なく編集や操作をできるということになる。
  • Figmaのコンポーネントライブラリをデザインシステムに使う場合、DS チームは、「Figma用」と「コード用」の２つのバージョンを管理しないといけない。

インタラクティブなプロトタイプでより良い結果を得ませんか。世界最先端の UX デザインテクノロジーである Merge をぜひお試し下さい。

UXPin Merge – Figmaのライブラリに代わるおすすめライブラリ

UXPin Merge のテクノロジーは、UIコンポーネントを Github や Bitbucket、GitLab などのレポジトリからデザインプロセスにインポートします。

そしてデザインチームは、この完全にインタラクティブなコードコンポーネントを使って、最終製品のように見えるプロトタイプを作成できます。

スタイリングとインタラクティブ機能

Merge のコンポーネントには、スタイリングやインタラクティブ性などのプロパティが「ベイクイン」されているため、デザインチームは正しい値の入力や、コードコンポーネントライブラリからのアニメーションのコピーを気にする必要はありません。

また、デザインシステムチームが、React props や Storybook Args を使ってプロパティを確定すると、UXPin のプロパティパネルにそれが表示されます。

例えば、ボタンのステート、テキストスタイル、色、サイズ、アイコン、インタラクションは、デザイナーがドロップダウンで選択できます。

さらに、Mergeでデザインドリフトがなくなり、UI要素への誤った修正を防ぐことができます。

デザイナーは Mergeコンポーネントを切り離して変更することはできず、デザインシステムチームのみが、UXPinに同期するレポジトリ内のコードコンポーネントを変更してデザイナーに更新を通知できます。

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

多くのデザインツールは、「信頼できる唯一の情報源（Single source of truth）」が提供されていると主張してますが、現実には、画像ベースのソリューションは、デザインツール、プロトタイピングツール、ドキュメンテーション、コード UI ライブラリなど、複数の分野でのアップデートが必要です。

そこで Mergeを使うと、製品開発チーム全体 （UX デザイナー、製品チーム、エンジニア）が同じレポジトリからコンポーネントを引っ張って来れます。

レポジトリへの変更はすべて UXPin に自動的に同期され、その更新がデザイナーに通知され、これが真の「信頼できる唯一の情報源」となります。

UI キット、コードコンポーネント、関連ドキュメントを更新する代わりに、デザインシステムチームは１つのリリースを全員に同時にプッシュするということです。

UXPin で Merge のコンポーネントライブラリを使う方法

デザインシステムチームがセットアップを完了すると、コンポーネントライブラリを UXPin で使えるようになります。

Merge のコンポーネントライブラリの使い方についてのステップバイステップのチュートリアルを以下で見てみましょう：

ステップ 1. デザインシステムのライブラリを開く

デザインシステムは、UXPin の左サイドバーのデザインシステムライブラリの下に全て表示されます。

カテゴリーは以下の２つです：

ステップ2. デザインシステムを選択する

作業したいデザインシステムを選択すると、コンポーネントライブラリが左サイドバーに開きます。

ライブラリの上には、［コンポーネント」と［Patterns（パターン）］のタブがあります（パターンについては後ほど…）。

コンポーネントにはコンポーネント ライブラリが含まれており、ドロップダウンにはボタン、スイッチ、カード、アイコンなど)の使用可能なカテゴリが表示されます。

ステップ3. コンポーネントライブラリの使用

コンポーネントをクリックしてキャンバスに追加します。

コンポーネントのプロパティを表示し、右側のプロパティパネルで調整します。

このプロセスを繰り返して、UI とプロトタイプを作ります。

ステップ4. UXPin – Pattern（パターン）の使い方

パターンを使うと、デザインシステムから複数の UI 要素を組み合わせて新しいコンポーネントやテンプレートを作成でき、複数のコンポーネントライブラリからコンポーネントを使って、新しいパターンをデザインシステムに昇格させる前にテストすることができます。

また、パターンでコンポーネントの複数の状態や変数を作成すこともできいます。

例えば、UI に「ライトモード」と「ダークモード」のバージョンが欲しいけどデザインシステムには「ライト」の変数しかない場合、UXPinでこの「ダークモード」の変数を作成し、それをパターンに保存して、チームメンバーと共有することもできます。

ステップ5. インタラクティブコンポーネントを使ったプロトタイピングとテスト

UXPin でプロトタイプをテストするには、以下の２つのオプションがあります：

Merge のプロトタイプで、デザインチームはエンジニアが開発に使うのと同じコンポーネントを使って複雑なプロトタイプを作成できるようになります。

ステークホルダーやユーザーは最終製品と同じように Merge プロトタイプを操作することができ、デザインチームは反復と改善のための有意義なフィードバックを得ることができます。

高品質のインタラクティブプロトタイプを使うのは、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決し、より良いビジネスチャンスを特定できるということです。

ステップ6. デザインハンドオフ

Merge ではデベロッパーとエンジニアが同じ UI ライブラリを使うため、デザインから開発への移行はシームレスです。

また、UXPin は本番環境で使用可能な JSX を生成するため、デベロッパーはコードを IDE （統合開発環境）にコピー/貼り付けて開発することができます。

世界最先端の製品デザインツールで、デザインと開発のギャップを埋めませんか。詳しくは Mergeページをぜひご覧ください。

Discover Merge
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you