Data Tableレイヤーを手動でデザインに追加する

Data Tableレイヤーを追加するには、デザイン内の任意のColumnレイヤーをクリックし、プラグイン下部のクイック追加メニューからData Tableオプションを選んでから、Addをクリックしてレイヤーをデザインに挿入します。

データテーブルの行や列を追加する。最初に作成されたテーブル行やテーブルデータセルのFigmaレイヤーをコピー＆ペーストすると、行や列をすばやく追加できます。

デフォルトでは、Data Tableはデスクトップとモバイルで同じようにレンダリングされます。テーブルの列を数列以上追加する場合は、テーブルの幅に注意してください。

アイコンとテキストのコンパクトなテーブルや、チェックリスト形式の行では、メインのData Tableレイヤーを選択してSettingsをクリックし、Mobile Alignmentを有効にしてCenterを選びます。これにより、アイコンとテキストの間隔を保ったまま、エクスポートしたテーブル自体がモバイルで中央に配置されます。左右のパディングを手動で追加して中央揃えに近づけるよりも、さまざまなモバイルクライアントで確実に表示できます。

モバイルでData Tableの画像を広げる

Data Table内の画像を選択してSettingsを開き、100% Width Image on Mobileを有効にします。デスクトップのデザインで幅が150pxを超える画像は、Columnの画像と同じ最小幅の基準に従い、モバイルでテーブルセルいっぱいに広がります。幅が150px以下の画像は、小さなアイコンが引き伸ばされないよう、そのままのサイズを保ちます。

幅の判定には、ネストされたメインコンポーネントの幅ではなく、画像レイヤーのレンダリング後の幅が使われます。モバイルの幅や高さを明示的に上書きしている場合は、そちらが優先されます。積み重ねた行いっぱいに画像を広げるには、Data Table Rowもモバイルでセルを積み重ねるように設定してください。

GoogleスプレッドシートのURLやCSV・ExcelファイルのデータからData Tableをインポートする

すでにGoogleスプレッドシートやCSV・Excelファイルにデータがある場合は、デザイン内の任意のColumnレイヤーをクリックし、プラグイン下部のクイック追加メニューからSpreadsheetオプションを選ぶと、スプレッドシートのデータを含む新しいData Tableを自動的に作成できます。

Spreadsheetオプションを選んだら、公開されているGoogleスプレッドシートのURLを貼り付けるか、CSV・Excelファイルをプラグインにドラッグ＆ドロップしてから、Addをクリックしてレイヤーをデザインに挿入します。

Emailifyには、スプレッドシートを読み取る権限が必要です。GoogleスプレッドシートでShareを選び、URLをコピーする前にRestrictedをAnyone with the linkに変更してください。

動的データでData Table Rowをループする

メール配信プラットフォームのデータを繰り返し処理するには、Data Table Rowを選択してSettingsを開きます。Opening Code Wrapper（例：{% for product in collection.products %}）とClosing Code Wrapper（例：{% endfor %}）にループの構文を追加します。Emailifyは、エクスポートしたHTMLで、その行の<tr></tr>要素の前後にタグを挿入します。

Data Table Rowレイヤーにラッパーのタグを追加したら、必要に応じて行内のレイヤーに動的なコンテンツを入れられます。

Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。