独自のカスタムコンポーネントを作成する

コンポーネントビルダーで、Emailifyのカスタムコンポーネントを作成・編集・管理します。

動画チュートリアル：HTMLメールのエクスポート用にカスタムコンポーネントを作成する

この動画では、メールデザインにカスタムコンポーネントを追加し、Emailifyプラグインを使ってFigmaから本番用のレスポンシブHTMLメールをエクスポートする方法を紹介します。

Emailifyに付属している基本コンポーネントで目的に合うものがない場合は、組み込みのコンポーネントビルダー機能を使って独自のカスタムコンポーネントを作成できます。

コンポーネントカテゴリのヘッダーでCustomタブをクリックし、Build New Custom Component + ボタンをクリックすると、コンポーネントビルダーが開きます。ここで、独自のコンポーネントのレイアウトとコンテンツ要素をカスタマイズできます。

構成が決まったら、Create & Insert New Componentボタンをクリックします。コンポーネントがFigmaのメールデザインに追加され、今後使えるようにCustomカテゴリにも保存されます。

保存したカスタムコンポーネントの編集とフォーク ​

保存したカスタムコンポーネントを編集するには、コンポーネントカテゴリのCustomタブに表示されている任意のコンポーネントの横にあるSettingsアイコンボタンをクリックします。

Update Saved Componentボタンをクリックすると、更新したコンポーネントを元のコンポーネントに上書き保存できます。保存済みのコンポーネントは更新されますが、デザイン内ですでに使われている箇所のコンポーネントには影響せず、変更もされません。

または、Create & Insert New Componentボタンをクリックして、元のコンポーネントをフォークし、新しいカスタムコンポーネントとして「別名で保存」することもできます。元の保存済みコンポーネントを上書きせずに、新しいカスタムコンポーネントとしてリストに保存されます。

保存したカスタムコンポーネントの削除 ​

Trashアイコンボタンをクリックすると、保存したカスタムコンポーネントを削除することもできます。保存済みのコンポーネントはCustomカテゴリとFavouritesカテゴリから削除されますが、デザイン内ですでに使われている箇所のコンポーネントは削除・変更されません。