パターンはUXPin Merge限定で提供される機能です。Merge UI要素を新しいコンポーネントに組み合わせてライブラリに追加することができます。 通常、デザインライブラリを増やすことは簡単なことではなく、デザインチームとエンジニアリングチームで時間と労力がかかる作業です。パターンを使うことで、新しいコンポーネントを簡単にMergeライブラリの新しいセクションに追加することができます。

パターンを使うと次のことができます。

• コンポーネントの変数を再利用できる。 これにより、コンポーネントに同じプロパティを設定する時間の節約になる。
• 自分のデザインライブラリにない高度なコンポーネントも使えて簡単にデザインできる。
• デザインシステムへの新しいコンポーネントの追加を簡素化 - Merge と基本要素を組み合わせ、新しいコンポーネントをPatternsライブラリに保存し、開発者に渡します。

<aside> 🖇️ 備考

各Merge要素のコードはまだ見ることができますが、今のところ、新しいコンポーネントまたはグループ全体のコードは表示されません。

</aside>

有効性

パターンはデザインライブラリの新しいタブとして提供されます。この新しいカテゴリーはMergeが提供されるプランのみで利用可能で、Git、Storybook、および NPMで動作します。トライアル期間中でもMUIとStorybook Material UIライブラリは利用可能です。

<aside> 🖇️ 備考

現在、Storybook 以外のすべての Merge 統合でネストされた要素を使用してパターンを作成できます。

</aside>

Patternsの活用方法

次のような場合、Patternsは非常に便利です。

1. コード化されたコンポーネントを使ってデザインしたいが、UIライブラリはコードに必要なプロパティがない基本的な要素に限られている。
2. UXPin Mergeにロバストなコンポーネントのインポートに苦戦している。
3. 多くの場合、同じコンポーネントに同じプロパティを設定しなければならない。
4. 新しいコード化されたコンポーネントを作成し、開発するプロセスのステップを欠いている。
5. Storybookの要素をグループ化して、より大きなコンポーネントに保存したい。

Docs_Patterns_HowToUsePatterns (2).mp4

Patternsの使い方

1. キャンバス上に要素やコンポーネントを追加します。
2. 必要なプロパティを設定します。