UXPin Merge Patterns（パターン）の使い方・チュートリアル

製品とそのデザインシステムは、常に進化し続けるプロジェクトです。製品の規模が大きくなるにつれ、デザイナーはユーザビリティの課題を解決しながら、ビジネス目標やユーザーニーズを満たすために、新しい UI パターンやコンポーネントを作成しないといけません。

デザイナーは新しいパターンを普及させる前に、まずはそれを作らないといけないんです！さらに、大抵の組織では、デザインシステムのガバナンスの手順に従っているため、新しいパターンがライブラリで利用できるようになるまでに時間がかかる可能性があります。

UXPinのPatterns（パターン）では、デザインチームが「既存のMergeコンポーネント」と「標準的なUI 要素」を組み合わせて新しいUIパターンを作成し、UXPinライブラリに保存することができます。

そこで本記事では、UXPin のPatterns（パターン）機能の使い方などをご紹介し、製品やデザインシステムをスケールアップするためどのように活用することができるかをみていきます。

UXPin Merge で完全に統合されたデザインシステムを構築し、製品開発チームに「信頼できる唯一の情報源（Singl source of truth）」を提供しませんか。この革新的なコードベースのデザインテクノロジーの詳細とリクエスト方法については、ぜひ Mergeのページをご覧ください。

UXPin Mergeとは、その仕組み

Merge によって、Gitレポジトリ、Storybook、npmパッケージでホストされているコンポーネントライブラリの要素を UXPin のデザインエディターにインポートして、チーム全体が同じデザインシステムを使えるようになります。そして、デザイナーはその要素を使って、最終製品と完全に一致するプロトタイプを作成することができます。

UXPin Merge Patterns（パターン）の使い方・チュートリアル - UXPin Mergeって？

従来、多くのデザインシステムでは、以下の２つの UI ライブラリが搭載されています：

デザインチームは静的なUIキットを使用
エンジニアはコード化されたコンポーネントライブラリを使用

多くの組織は、この二重のシステムが「信頼できる唯一の情報源（Single source of truth）」であると主張していますが、その実現には多くの時間とリソースが必要です。

UXPin Merge は、コンポーネントライブラリが１つしかないため、純粋にそれが「信頼できる唯一の情報源」になり、デザイナーとエンジニアは、同じレポジトリから同じ UI 要素やパターンを使います。

また、Vue、Ember、Web Components、Angularなど、他の一般的なフロントエンド技術については、Merge for Git や UXPin の Storybook 統合を使ってReactコンポーネントを同期することができます。

さらに、デザイナーは Merge の npm 統合を通じて、MUI、Bootstrap、Ant Design、Lightning などのオープンソースのコンポーネントライブラリの npm パッケージをインポートして、完全に機能するプロトタイプまたは最小実行製品（MVP）を構築することもできます。

UXPin パターン（Patterns）とは

パターンとは、デザインチームが Merge コンポーネントと標準的な UXPin UI 要素を組み合わせて、より複雑な UI パターンを構築することができる Merge 独自の機能です。

ブラッド・フロスト氏の「アトミックデザイン」のコンテクストでは、デザイナーはパターンによって、基礎となる UI 要素やコンポーネントである原子や分子を使って、カード、フォーム、ナビゲーション、ヘッダー、フッターなど、有機体やテンプレートなどの大規模で複雑なデザインを構築できます。

UXPin パターンの代表的な使用例として、以下のようなものがあります：

現在のライブラリにはない高度なコンポーネントの作成
よく使うコンポーネントのバリアントのプロパティの保存
グループ化と保存要素の大きなUIパターンへの統合
一貫性を上げるための新しい UI パターンのデザインチームとの共有
エンジニアがコンポーネントライブラリに追加するための新しいパターンの推進

デザイナーは、複数のコンポーネントライブラリや UXPin の基本的なコンポーネントの UI 要素を組み合わせて、新しいパターンを作成することができます。この柔軟性は、新しい UI パターンに必要なパーツがデザインシステムにない場合に有益です。

例えば、ドロップダウンメニューを使ったヘッダーナビゲーションを構築したいけど、現在のデザインシステムにはドロップダウンメニューがないとします。その場合は UXPin の npm 統合を使って、MUI（または他のオープンソースライブラリ）からドロップダウンメニューをインポートし、それを使って新しいナビゲーションのパターンを構築することができます。エンジニアは、MUIのドキュメントを読み、JSXコードを見ることで、新しいパターンのコーディング方法がわかり、それをデザインシステムに追加することができます。

UXPin Patterns（パターン）の３つのメリット

パターンは製品開発およびデザインシステムチームに対して主に３つの利点があり、この３つは、Merge レポジトリに必要なものがない場合に、パターンが同等の代替手段を提供してくれる点が共通しています。

１．UI 要素を入れ子にして複雑なコンポーネントを構築できる

包括的なデザインシステムがあっても、デザイナーは製品の進化に伴って新しいコンポーネントやパターンを作らないといけないことがよくありますが、多くの場合、そのパターンはデザインシステムには存在しないため、デザイナーは毎回ゼロから構築しないといけません。

特にグラフやデータテーブルのようなものを作る場合、ゼロからデザインすると、貴重な時間がその作業に費やされることになります。その代わりに、このような複雑なパターンを一度作成し、UXPin のパターンライブラリに保存しておくといいでしょう。また、このパターンを他のデザイナーと共有することで、チームで作業が被ったり、矛盾が生じたりすることがなくなります。

多くのデザインツールがこの機能を提供していますが、コードコンポーネントを操作して組み合わせることができるものはありません。これがパターンだと、デザイナーはデザイナーとエンジニアのハイブリッドな役割を担い、１行のコードも書かずに、完全に機能する複雑なUIを構築することができます。

２．同じコンポーネントのプロパティを再利用できる

デザイナーは Merge によって、プロトタイプを画像ベースのデザインツールよりずっと速く構築できますが、より効率的に作成する余地は常に存在します。

例えば、デフォルト、エラー、警告、成功など、さまざまな Merge フォームの入力やボタンの状態についてパターンを保存したいと思うかもしれません。パターンだと、それを一度設定してパターンライブラリに保存し、次の UI（ユーザーインターフェース）のためにドラッグ＆ドロップする準備ができます。

このような構築済みのパターンは、デザインスプリントや、ステークホルダーとのミーティングやユーザーテスト中でのちょっとした変更がしたい場合に特に便利です。UXPin のプロパティパネルでプロパティを操作する代わりに、目的のパターンをキャンバスにドラッグするだけですぐに使えますよ！

３．新しいデザインシステムの UI 要素の推進とテストができる

新しい UI 要素は、デザインシステムで魔法のように現れるわけではなく、DSチームは、リリース前にこのパターンを構築してテストする必要があります。UXPin パターンを使えば、DSチームは既存のコンポーネントを基本的な UXPin やオープンソースのライブラリと組み合わせて、より高い忠実度と機能性でテストおよびイテレーションを行うことができます。

また、UXPin Mergeとパターンを使ったコンポーネント駆動型のプロトタイプによって、デザイナーはエンジニアからのより少ないインプットでイテレーションを行い、エンジニアは最終コンポーネントの開発とデザインシステムのテクニカルバックログの処理に集中することができます。

パターンがあれば、デザインチームはエンジニアが新しいコンポーネントを開発するのを待つ必要がなく、DSチームが作成したプロトタイプのパターンを使うことで、忠実性や機能性を損なうことなく、デザインとテストのプロセスを継続できるのです。

UXPin パターンは、１回こっきりの UI コンポーネントやほとんど使われない UI コンポーネントを作成するのに素晴らしいツールです。このようなパターンは、デザインシステムに昇格するほどには使われていませんが、デザインチームはまだそこへのアクセスが必要な時がありますからね。

それを UXPin パターンライブラリに保存すると、デザインシステムのレポジトリに追加されることなく、完全に機能する Merge コンポーネントの利点を得られ、エンジニアは、そのコンポーネントを別のレポジトリに保存して、必要なときに使えます。

UXPin Merge Patterns（パターン）の使い方

では、UXPinで新しいMerge パターンを作成するのがいかに簡単であるかをみてみましょう。MUI npm のチュートリアルでインポートしたものと同じコンポーネントを使用しているので、そちらもぜひご覧ください。

以下のパターンは、Merge の npm 統合を使ってインポートした MUI コンポーネント３つと、UXPin の基本的なテキスト要素２つが使われています（デザイン賞はもらえないでしょうけど！）

UXPin Merge Patterns（パターン）の使い方・チュートリアル - キャンバス

でもこのようなシンプルなパターンでも設定が必要なので、再利用可能なパターンを作ることで、その繰り返しの作業をなくすことができたらいいですね。

ステップ１

パターンに必要なコンポーネントを追加して配置します。複数のコンポーネントライブラリや UXPin の基本的な要素を組み合わせることができることを忘れずに。

ステップ２

Merge コンポーネントのプロパティを設定します。

アクセシビリティのために、プレースホルダーとヘルプテキストを備えたメール入力フィールドを作成しました。また、ユーザーが入力しないといけないことがわかるように、このフィールドは「必須項目」としました。
次に、MUIチェックボックスを追加しました。これはユーザーが当社からのメールを受信するためにチェックする必要があります。
最後に、ユーザーがメールフィールドとチェックボックスを完了した後にクリックしなければならない場所が明確になるように、MUIボタンを選択し、プライマリに設定しました。

以下は、メールコンポーネントのプロパティパネルの例です。