---
url: "/ja/emailify/design/library.md"
description: "FigmaライブラリのEmailifyコンポーネントを読み込み、整理し、検索します。"
---

# 再利用できるコンポーネントライブラリを作成する

> FigmaライブラリのEmailifyコンポーネントを読み込み、整理し、検索します。

EmailifyプラグインからFigmaに追加した要素は、すべて自動的にFigmaのネイティブコンポーネントとして追加され、スタイルやコンテンツをカスタマイズできます。また、現在のFigmaファイル内にあるEmailifyコンポーネントには、ヘッダーのタブ行にある**Library**アイコンボタンをクリックして、プラグインから直接アクセスできます。

## Emailifyは現在のFigmaファイルからのみコンポーネントを読み込みますか？ {#does-emailify-load-components-from-the-current-figma-file-only}

はい。**Library**タブは、Figmaで現在開いているFigmaファイルからEmailifyコンポーネントを読み込みます。

チームメンバーが別のファイルを開いた場合、Emailifyにはそのファイルにすでに存在するEmailifyコンポーネントだけが表示されます。現在のファイルでコンポーネントを追加・更新したら、**Load all Emailify Components from this Figma file**をクリックするか、**Refresh**を使ってファイルを再スキャンしてください。

## コンポーネントライブラリのタブからコンポーネントを追加する {#adding-components-from-your-component-library-tab}

### 動画チュートリアル：FigmaでHTMLメールデザイン用のコンポーネントライブラリを作成する

この動画では、EmailifyのFigmaプラグインを使って、HTMLメール用のFigmaコンポーネントライブラリをデザインする方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/lQb9-_9maxs)

[Video](/assets/videos/emailify/load-component-library.mp4)

**Load all Emailify Components from this Figma file**をクリックすると、ファイル内のEmailifyのFigmaコンポーネントが検出され、プレビューが読み込まれます。プラグイン内のコンポーネントをクリックすると、ほかのカテゴリと同じように、選択中のEmailifyフレームに自動的に追加されます。

最初にコンポーネントを読み込んだあとでFigmaファイルに新しいコンポーネントを追加した場合は、プラグインの**Refresh**アイコンボタンをクリックすると、FigmaファイルのEmailifyコンポーネントが再確認され、一覧に追加されます。

## カスタムカテゴリでコンポーネントライブラリを整理する {#organizing-your-component-library-with-custom-categories}

### 動画チュートリアル：Figmaのメールコンポーネントにカスタムカテゴリを追加する

この動画では、EmailifyのFigmaプラグインを使って、Figmaのメールコンポーネントにカスタムカテゴリを追加する方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/M6p5AY2-g54)

[Video](/assets/videos/emailify/create-custom-categories.mp4)

デフォルトでは、すべてのFigmaコンポーネントは*Uncategorized*になっていますが、コンポーネントライブラリのサブヘッダーのタブ行にある**Pencil**アイコンボタンをクリックして、独自のカスタムカテゴリを作成することもできます。

新しいカスタムカテゴリを作成し、既存のカテゴリにあるコンポーネントを、追加した別のカテゴリへ移動できます。

カスタムカテゴリはいつでも削除できます。削除してもFigmaコンポーネントは削除されず、そのカテゴリにあったコンポーネントは自動的に*Uncategorized*カテゴリに戻ります。

### コンポーネントライブラリの検索と並べ替え {#searching-and-sorting-your-component-library}

[Video](/assets/videos/emailify/search-and-sort-components.mp4)

コンポーネントライブラリのタブでカスタムのFigmaコンポーネントをすばやく見つけるには、**Search**入力欄を使って、Figmaコンポーネントのレイヤー名でコンポーネントの一覧を絞り込みます。

コンポーネントの一覧は、次のいずれかのオプションで並べ替えることもできます。

**Sort by Figma Layer Age**
- Newest to Oldest ↓
- Oldest to Newest ↑

**Sort by Figma Layer Name**
- Figma Layer Name ↓
- Figma Layer Name ↑

**Sort by Figma Layer Order**
- Figma Layer Order ↓
- Figma Layer Order ↑

**Sort Visually (Rows)**
- Visually Top to Bottom ↓
- Visually Bottom to Top ↑

**Sort Visually (Columns)**
- Visually Left to Right →
- Visually Right to Left ←

見た目による並べ替えでは、位置がわずかにずれているコンポーネントも同じ行または列としてまとめられます。レイヤー名による並べ替えは数値を考慮するため、`Hero 2`のような名前は`Hero 10`より前に表示されます。

### Figmaコンポーネントにメタデータを追加する {#adding-metadata-to-your-figma-components}

[Video](/assets/videos/emailify/figma-component-metadata.mp4)

Figmaでコンポーネントレイヤーをクリックし、Figmaの右側のカラムでコンポーネント名の横にある**Component configuration**アイコンボタンをクリックすると、Figmaコンポーネントにメタデータを追加できます。ここで、コンポーネントの使い方を説明するテキスト（**How to use this component**）と、ドキュメントへのリンクとなるURL（**Link to documentation**）を入力できます。

Emailifyコンポーネントにこれらが設定されている場合、コンポーネントライブラリのタブに表示されるコンポーネントのラベルは自動的にドキュメントのURLにリンクされ、サムネイルにカーソルを合わせると、コンポーネントの使い方の説明がツールチップに表示されます。