メールデザインのレイアウトにパディングを追加する

Auto Layoutの「Padding」プロパティを更新して、Emailifyのレイアウトレイヤーの上下左右のパディングを調整できます。

レイアウトレイヤーにパディングを追加する ​

レイアウトレイヤーの高さを設定し、上下のスペースの大きさを指定するには、FigmaでAuto LayoutのVertical Paddingプロパティを調整します。

レイアウトレイヤー内のコンテンツの幅を設定し、左右のスペースの大きさを指定するには、FigmaでAuto LayoutのHorizontal Paddingプロパティを調整します。

RowやColumnレイヤーの高さは、常にPaddingで設定してください（レイヤーのAuto Layoutの高さのプロパティはHugに設定します）。HTMLでは要素の高さがコンテンツのサイズ（と上下のパディング）によって決まるため、Figmaで設定したFixedの高さは最終的なHTMLに反映されません。HTMLにエクスポートするメールを見た目どおりにデザインするには、Paddingを使うのが最も確実な方法です。

複数のRowレイヤーの周りに外側のパディングを追加する ​

複数のRowの周りにパディングを追加したい場合は、専用のWrapperレイアウトレイヤーをメールに追加できます。Emailifyフレームをクリックし、Quick AddドロップダウンメニューのオプションからRow Wrapperを選択して、Add + をクリックすると、新しいFigmaレイヤーとしてメールに挿入されます。

デザインにWrapperを追加したら、Rowを新しいWrapperレイヤーの中に移動し、FigmaでAuto LayoutのHorizontal PaddingとVertical Paddingプロパティを調整して、Wrapper内のRowレイヤーの周りに外側のパディングを作ります。

テキストレイヤーに内側のパディングを追加する ​

Settingsパネルを開いた状態でメール内のFigmaテキストレイヤーを選択し、Inner Paddingトグルを有効にして、選択したテキストレイヤーに適用したいパディングの値を入力すると、テキストの内側にパディングを追加できます。

これにより、HTMLにレンダリングされたときにテキストレイヤーの内側に「内側の」パディングが追加されます。ほかのレイヤーに影響を与えずに、Column内の特定のテキストレイヤーにパディングの値を指定できます。

Mobile Paddingトグルを有効にして、選択したテキストレイヤーに適用したいパディングの値を入力すれば、モバイルでのテキストレイヤーのパディングを上書きすることもできます。この値は、HTMLメールをモバイルで表示したときにのみ反映されます。

区切り線レイヤーに内側のパディングを追加する ​

Settingsパネルを開いた状態でメール内のEmailifyの区切り線レイヤーを選択し、Inner Paddingトグルを有効にして、選択した区切り線レイヤーに適用したいパディングの値を入力すると、区切り線に内側のパディングを追加できます。

これにより、HTMLにレンダリングされたときに区切り線レイヤーの内側に「内側の」パディングが追加されます。ほかのレイヤーに影響を与えずに、Column内の特定のテキストレイヤーにパディングの値を指定できます。

Mobile Paddingトグルを有効にして、選択した区切り線レイヤーに適用したいパディングの値を入力すれば、モバイルでのEmailifyの区切り線レイヤーのパディングを上書きすることもできます。この値は、HTMLメールをモバイルで表示したときにのみ反映されます。