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

Emailifyは現在のFigmaファイルからのみコンポーネントを読み込みますか？

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

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

コンポーネントライブラリのタブからコンポーネントを追加する

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

この動画では、EmailifyのFigmaプラグインを使って、HTMLメール用のFigmaコンポーネントライブラリをデザインする方法を解説します。

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

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

カスタムカテゴリでコンポーネントライブラリを整理する

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

この動画では、EmailifyのFigmaプラグインを使って、Figmaのメールコンポーネントにカスタムカテゴリを追加する方法を解説します。

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

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

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

コンポーネントライブラリの検索と並べ替え

コンポーネントライブラリのタブでカスタムの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コンポーネントにメタデータを追加する

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

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