UXPin Mergeとは?
Mergeは、GITリポジトリからUXPinエディターにコード化されたReact.jsコンポーネントをインポートし、同期させることができる画期的なテクノロジーです。インポートされたコンポーネントは、開発者が開発プロセスで使用したコンポーネントと100％同一です。つまり、コンポーネントは、エンドユーザーが体験する実際の製品(つまり最終製品)と同じような外観、操作性、機能（インタラクション、データ）を持つことになります。
Mergeのおかげで、デザイナーは以下のことができます:
- 追加作業やコーディングの専門知識を必要とせずに、コードリポジトリにすでに存在するコンポーネントを使用する。
- すでにコード化された要素の再描画をやめる。
- 製品コードで利用可能なインタラクションやデータを使用して、高度なユースケースをテストすることができる。
エンジニアは以下のことができます:
- デザイナーがすでにコード化されたコンポーネントを使用することを保証することで、ワークフローを高速化する。
- 実際に構成されたJSXを参照するすべてのデザインに対して、自動生成された仕様書を使用する。
- カスタムコンポーネントの作成、コードの反復、コンポーネントのデータソースへの接続により、高度なプロトタイピングプロセスに参加できる。
デザインオプス／デザインシステムチームは以下のことができます:
- コードで設定された信頼できる唯一の情報源（Single Source of Truth）から、デザイナーとエンジニアの両方にサービスを提供する統合デザインシステムを構築できる。
- React.jsコンポーネントのプロパティ（prop-types、フローまたはタイプスクリプトのタイプ、インターフェース）を制御することで、システム内のコンポーネントへの変更を制御する。
- デザインシステムのバージョンを管理し、デザイナーとエンジニアの両方に対してGitHubを通じてリリースを調整できる。
デザインとエンジニアリングのリーダーは以下のことができます:
- デザインとエンジニアリングのプロセスを接続し、同期させることができる。
- ウォーターフォールのハンドオフなしにアジャイルプロセスを実現できる。
- アイデアをテストし、新機能や製品を市場に投入するまでの時間を短縮することができる。
どのように機能するのか？
市場に出回っているデザインツールの大半（Photoshop、Sketch、InVision Studio、Figmaなど）は、イメージベースのデザインツールのパラダイムに基づいて構築されています。このパラダイムでは、ユーザーがキャンバスやアートボードに何かを描くと、ツールはベクターまたはラスターグラフィックスをレンダリングします。それらは、PNG、JPEG、SVGなどのフルページイメージのレンダリングに使用されます。これらのファイルフォーマットでは、インタラクティブなコンポーネントをインポートしたり、完全にインタラクティブなプロトタイプをエクスポートすることはできません。また、これらのファイルフォーマットは、開発者の作業方法とは全く関係がなく（サイロ化）、ブラウザ上でWeb技術を使って実現できるものとは全く異なるものになることが多く、デザイナーとエンジニアの間に大きな断絶が生じています。
コードベースのデザインツールのパラダイム（UXPin）では、ユーザーがキャンバスに何かを描くと、ツールがhtml/css/jsのコードを作成し、ブラウザのレンダリングエンジンの助けを借りて、視覚的にレンダリングします。
これにより、ブラウザがレンダリングできるあらゆるコードを、デザインエディタ内でレンダリングすることができます。この機能は、イメージベースのツールを置き去りにし、それらに対して技術的な優位性をもたらします。
目標を達成するために、Merge Technologyは複数のステップで動作します:
- Mergeはコード化されたコンポーネントが保存されているリポジトリを分析し、シリアライズします（リポジトリを表すデータ構造を作成します）。
- Mergeは提供されたwebpack設定を使用してすべてのコンポーネントを構築します。
- MergeはすべてのデータをUXPinに送信し、コード化されたコンポーネントをデザインシステムライブラリでレンダリングします。
UXPin Mergeへのアクセスをご希望の場合、下記よりリクエストしてください！
https://www.uxpin.com/merge/developers
デザインシステムは、複数のチームやオープンソースのデザインシステムでテストされています。これまでのところ、以下のシステムが Merge でのテストに成功しています:
CA Technologies Mineral UI
Pivotal Labs Pivotal U
Atlassian Atlaskit
Pinterest Gestalt
Zendesk Garden
Shopify Polaris
IBM Carbon
Instacart Snacks
Material UI
RMWC
Salesforce Lightning
Semantic UI
Shopify Polaris