UXPin Mergeで npm 統合するには？
UIコードコンポーネントをUXPinのエディターにインポートするための、デザイナーに便利な方法が発表されました。エンジニアの積極的なサポートがないチームでも Mergeにアクセスできるようにするための、新しい “npm 統合” です。
UXPin Mergeでデザインプロセスに革命を起こす
UXPinとMergeテクノロジーにより、プロトタイプでの新しいレベルの忠実度とインタラクション性を生み出し、スムーズなデザインハンドオフ、デザイナーとデベロッパーの作業の信頼できる唯一の情報源（Single source of truth）での統合が可能になります。まさに、製品開発プロセスを効率化するものです。
静的なデザインから完全にインタラクティブなデザインへ
静的なプロトタイプの時代は終わり、今は特にデザイン成熟度が高い企業で、より効率的なプロトタイピングの方法を探しています。動きのないアートボードをリンクさせ、不完全なツールでデザインをコードに変換し、ニュアンスの異なるインタラクションを何度も文書化することは、仕事を増やし、成長の妨げにもなるのです。
そこでMergeの出番です。この技術があれば、真の機能を持つ要素を組み込んだプロトタイプの作成ができるのです。Mergeは、PayPalのチームが行ったように、デザインをスケールアップさせます。
デザインと開発間の連携の効率化
Mergeでは、デザインチームと開発チームが、制作プロセス全体を通して同じインタラクティブなコンポーネントを使用して作業します。デザイナーはUIコンポーネントを使用し、一方、開発者は全く同じデザインから作成されたコードをコピーします。
デザインからコードへの変換はもう完了です。信頼できる唯一の情報源（Singe source of truth）を最大限に活かすことで、デザインとエンジニアリングが一体となり、デザインのハンドオフ段階がシンプルになります。つまり、デザイナーもデベロッパーもハッピーで、行ったり来たりのやりとりで時間を無駄にすることもありません。
デザインの一貫性を保証する正確なUIコンポーネントの使用
デザインプロセスで使用されるコード化されたUIコンポーネントは、プロトタイプを最初から最後まで一貫したものにします。デザイナーが意図したとおりに製品が作られていくのです。何よりも、デザイナーがコードを扱う必要ないことが1番ですね。
その結果、Mergeの技術ない場合、デザインと最終製品の外観や感触の間にずれがないため、非常に時間とエネルギーを消耗する結果になります。
UXPin MergeへのUIコンポーネントの新たなインポート方法
コンポーネントを使ってデザインする前に、コンポーネントのライブラリへのインポートが必要ですが、今までコード化されたコンポーネントをUXPin Mergeに取り込むには、2つの方法がありました。
- Gitの統合：デベロッパーはソースコードとその履歴をホストするためにGitを使いますが、コードコンポーネントをUXPinにインポートするには技術的なサポートが必要です。
- Storybookの統合： Storybookには、UXPinに持ち込むことができる公私でのコンポーネントライブラリが保存されています。
今回、UIコンポーネントをインポートする3つめの方法として、デザイナーにとって自由度が高いnpm統合機能が追加されました。
Merge npm統合で得られるもの
デベロッパーからの積極的なサポートがない場合、多くのデザインチームが大変な思いをしてMerge Git 統合をすることになります。そこで、本来Mergeが持つ威力を発揮するために、UXPinにコンポーネントライブラリをインポートする、デザイナーにとっても使いやすく新しい方法がリリースされました。
npm統合の使い方って？
では、npmの統合をどのように使うか見てみましょう。まずは、その方法を以下で文章でご説明します。
npmコンポーネントをUXPinにインポートする
npmは、プロジェクトで使用するためにダウンロードできる既製の開発要素を持つ、パッケージのレジストリです。最も使われるオープンソースのデザインシステムの一部は、この方法で配布されています。
Adele (UXPin のデザインシステムレポジトリ) を使って、どのデザインシステムが npm パッケージに含まれているかを調べることができ、最終列までスクロールすると、配布方法が表示されます。 または、独自のReactベースのコンポーネント ライブラリをnpmにアップロードして、UXPinで使用することもできます。
npmデザインシステムをUXPinに取り込む手順は次のとおりです。
1. 新しいライブラリをUXPin Mergeに追加する
どの React ベースのデザイン システムを使用するかがわかったら、それを UXPin Merge と同期します。そして UXPin ダッシュボードの【Merge】タブに移動し、npm パッケージを介してライブラリを追加します。 npm パッケージ名と使用するバージョンを指定する必要があり、 ドキュメントで必要な場合は、「assets location（アセットの場所）」のフィールドにスタイルを追加します。
2. UI コンポーネントを構成する
Merge Component Managerを開き、インポートするコンポーネントを指定しますが、必要に応じてコンポーネントを分類できます。 コンポーネントを作成した後、そのプロパティを管理し、インポートするものを確定します。 ライブラリの文書にアクセスして、プロパティの名前とタイプを確認しましょう。
3. 完全にインタラクティブなプロトタイプの作成を開始
最初のデザインを作成する時が来ました。デザインエディタ（design editor）に移動し、コンポーネントをキャンバスに置きます。 使用するコンポーネントのプロパティを簡単に変更できることをご覧ください。コンポーネントのインタラクティブ性（動きなど）を確認するには、【Preview（プレビュー）】モードに移動します。
プロトタイプは完成しましたか？ これで、プロジェクトのリンクを仲間のデベロッパーに渡すだけで、デザインからコードをコピーしてスペックをチェックできるようになります。
それでは実際にやってみましょう！
1. 統合の使用方法を説明するビデオをご視聴ください。
Youtubeで統合の流れについて一通り説明してくれるビデオをご用意しました。 npmデザイン システムをUXPinにインポートする方法については、この動画をご覧ください。
2. npmコンポーネントをMUI からUXPinにインポートする
MUIをUXPinにインポートしますか? 以下のブログ記事では、一連のプロセスについて説明しています。
3. Ant DesignからUXPinにnpmコンポーネントをインポートする
Ant Designは、最も人気のあるライブラリの1つです。 UXPinにログインすると、npm を介してインポートした Ant Design コンポーネントの一部が表示されます。 すぐに使用できるので、 下の記事でUXPinへのインポート方法を確認してください。
中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド
npm統合 + Patternsを使う
必要なものをすべてインポートし、変更を保存したら、基本的なものからより複雑なコンポーネントを作ったり、同じ手順を何度も繰り返さないように、コンポーネントをプロパティで保存したりすることができます。つまり、パターンを作るのです。
詳しく読む： Patterns（パターン）の使い方
npm統合を試してみよう
npmの統合により、コード化されたUI要素をUXPinに取り込むのにデベロッパーの手助けは必要なく、デザイナーはUIコンポーネントをUXPinに取り込み、好きな方法で自分で管理することができます。
npmの統合でUIコンポーネントを導入しましょう。デザインチームと開発チームを信頼できる唯一の情報源（Single source of truth）でつなぎ、組織のサイロを解消しましょう。14日間のトライアルにサインアップして、ぜひ統合をテストしてみてください。
