モバイルでカラムを積み重ねるには？
Columnレイヤーを含むRowレイヤーを選択し、プラグインのヘッダーにあるSettingsボタンをクリックして、Stack Columns in this Rowをオンにします。初期設定では、これによりモバイルでRowのカラムが1列に積み重なります。
モバイルでカラムが積み重ならないのはなぜですか？
そのRowでStack Columns in this Rowがオフになっている場合や、モバイルで1行に複数のカラムを並べるようRowが設定されている場合は、カラムは積み重なりません。また、一部のプリセットコンポーネントでは、プリセットのデザインに合わせて、モバイルでの積み重ねが初期設定でオフになっていることがあります。
解決するには、Rowを選択してSettingsを開き、Stack Columns in this Rowを有効にします。各カラムを上下に並べて表示したい場合は、1 Column Per Row on Mobileを選択します。
初期設定では、デザイン内のColumnレイヤーはモバイルで積み重なるように設定されています（ただし、意図したデザインに合わせて、あらかじめこの設定がオフになっているプリセットコンポーネントを使っている場合は除きます）。
モバイルでのこの動作を変更するには、任意のRowレイヤーをクリックし、プラグインのヘッダーにあるSettingsレイヤーをクリックして、Stack Columns in this Rowトグルをオンまたはオフにします。
Row内で3つ以上のColumnレイヤーを使っている場合は、積み重ねる設定のままにしておくことを検討してください。そうしないと、画面の小さいモバイルデバイスでは、中のコンテンツが非常に細く小さくなってしまう可能性があります。
モバイルで積み重ねるカラム数を上書きする
初期設定では、Stack Columns in this Rowトグルを有効にすると、Row内のすべてのColumnレイヤーが1列に積み重なります。必要に応じて、プラグインでトグルの隣にあるドロップダウンから次のいずれかのオプションを選択すると、この設定を上書きできます。
- 1 Column Per Row on Mobile
- 2 Columns Per Row on Mobile
- 3 Columns Per Row on Mobile
- 4 Columns Per Row on Mobile
たとえば、メール内に4つのColumnを持つRowがある場合、2 Columns Per Row on Mobileオプションを選択すると、モバイルでその行を表示したときに、カラムが2列×2行に積み重なります（4つの「グリッド」として表示されます）。
ドロップダウンでは、カラムの数に合った値だけを選択するようにしてください。たとえば、デザイン上のRowにカラムが2つしかないのに、ドロップダウンのオプションを3 Columns Per Row on Mobileに設定すると、2つのカラムの幅がそれぞれ33%になります。モバイルで画面の幅いっぱいに表示されず、崩れたり不自然に見えたりする可能性があります。
モバイルのカラム行の縦方向の配置を上書きする
モバイルでもRowが複数のColumnレイヤーを横に並べたままにしている場合は、そのモバイル行でカラム同士を縦方向にどう揃えるかも上書きできます。それには、Rowレイヤーをクリックし、Mobile Column Vertical Alignmentトグルを有効にして、隣のドロップダウンからTop、Middle、Bottomのいずれかを選択します。
このモバイルでの縦方向の配置の上書きは、モバイルでもRowに複数のカラムがある場合にのみ有効になります。つまり、次のいずれかの場合です。
- Stack Columns In This Rowトグルがオフになっている
- トグルがオンで、ドロップダウンが1 Column Per Row on Mobileより多い値に設定されている
Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。