UXPinのライブラリは、Colors、Text Styles、Assets、Componentsを保存し、異なるプロジェクトやチーム間で共有することができます。これにより、チーム間で一貫したデザインを作成するために活用します。

ライブラリの仕組み

  1. 最初に、プロトタイプで、ブランドのガイドラインに沿ったコンポーネント、テキストスタイルを作成します。 また、Assetsを追加し、指定のColorsを使用することで、再利用できます。
  2. ライブラリを作成します。こちらのライブラリチュートリアルチュートリアルをご確認ください。
  3. ComponentsやText Styleをライブラリに追加してチームで共有します。
  4. これにより、チームの全員がデザインで表示して使用できます。 すべてのComponents（コンポーネント）、Text styles、Assets、Colorsは左側のライブラリパネルにあります。

ライブラリにアクセスできる人なら誰でも編集、拡張、または反復できます。

ライブラリの権限についてさらに知りたい場合は、このチュートリアルをご確認ください。

ライブラリの追加

Editorの左下にある +New library（新しいライブラリ） をクリックすると、ライブラリを追加できます。

https://images.prismic.io/uxpincommunity/b7a748e1-32a8-4630-849b-64931e20da69_01_CreatingLibraries_752x500.png?auto=compress,format&rect=0,0,752,500&w=1504&h=1000

次に表示される画面で、ライブラリの名前・アクセス範囲を設定します。ライブラリは、自分、チーム、または特定のユーザーのみが利用できるようにすることができます。また、これらの権限はいつでも変更できます。

ライブラリの作成

UXPinでライブラリ作成はとても簡単にできます。キャンバス上でライブラリに追加したい要素を選択し、ライブラリパネルにある+Add（追加）をクリックして追加します。

https://uxpincommunity.cdn.prismic.io/uxpincommunity/1868415a-fc99-4e46-bb8a-17bfc97cfc17_02_BuildingLibraries_1504x1000.mp4

コンポーネントを追加する際は、Componentsをクリックします。これらの要素で使用する色をColorsセクションに追加することができます。コンポーネントになっていない要素も、コンポーネント化されます。また、キャンバス上の既存のテキスト要素や、Finder/Explorerから追加した画像やアイコンなどのアセットから、テキストスタイルを作成することもできます。

<aside> 🖇️ 備考 アイコンや画像などのAssetsは、Finder/Explorerから直接追加します。

</aside>

デザインの色を一括変更する