Adobe XDでスタック機能を利用したテーブル(表)の作り方

XDで、新着情報や沿革などの表(テーブル)をデザインする時に、複数行対応や、後からの内容追加や削除に対応しやすくする方法です。
テキストの高さの自動調整・スタック機能を利用して、背景色の伸びにも対応します。

XDで手軽に表を作ろうと思うと、まず思いつくのリピートグリッドを利用した方法だと思います。
thとtdの背景にあたる矩形を描き、テキストを載せ、行ごとリピートグリッドをかければ、簡単な表は出来上がります。
しかし、その方法の場合、tdが複数行に渡った場合や、あとから間に一行追加したい、などの要望に応えるのは手がかかります。

そこで、スタック機能を利用することで、複数行及び編集に強い表(テーブル)を作ってみました。

Adobe XDのスタック機能とは?
複数のオブジェクトをスタック化しておくと、その中のオブジェクトを移動したり、拡大縮小したりしても、互いの間隔を保ちながら、新しいデザインに自動的に適応します。また、オブジェクトを追加したり削除したりしても、適応してくれます。
詳しくは、yukaさんのこちらの記事をご覧ください。→【Adobe XD】スタックを使った動的なレイアウト

目次

完成形の表(テーブル)の確認

完成形の表(テーブル)

※今回は、新着情報や沿革などの表を想定しているため、thが短めで一行、tdは長めで複数行に渡ることもある、という前提でデザインします。また、trごとに罫線を引きます。

表(テーブル)の作成

STEP
th・tdの背景用オブジェクトを作る

長方形ツールを使って、th・tdそれぞれの背景を描きます。

表の背景
STEP
罫線を作る

th・tdの背景用オブジェクトを両方選択し、右側のプロパティインスペクターでシャドウ(内側)でYを1にし、罫線を作ります。XとBは0にしておきます。

(現在のところ、XDではオブジェクトの一部のみに枠線を引くことができないようなので、シャドウで表現します。※コーダーを別の方に依頼する場合は、そのことが分かるように伝えてください)

表の罫線を作る

罫線(シャドウ(内側))の色・透明度を設定します。

罫線の色・透明度の設定
STEP
thの余白を調整する

thのテキストを入力し、セルの余白(パディング)を調整します。

thの余白調整
STEP
tdのテキストに、高さの自動調整を設定する

tdのテキストを入力し、プロパティインスペクターの「高さの自動調整」アイコンをクリックします。

高さの自動調整
STEP
tdの余白を調整する

tdのエリア内テキストのバウンディングボックスの右端を、右の余白が必要な部分までドラッグし、セルの余白(パティング)を調整します。

tdの余白を調整する
tdの余白の調整完了
STEP
th、tdの背景オブジェクトをグループ化する

th、tdの背景オブジェクトをグループ化します。(thのテキストもtdのテキストも入らないように)

th・tdの背景をグループ化
STEP
th・tdの背景とtdのテキストをグループ化

STEP6でグループ化した背景オブジェクトと、tdのテキストのみ(thのテキストは入らないように)をグループ化します。

th・tdの背景とtdのテキストをグループ化

thのテキストが後ろに隠れてしまうので、グループ化したオブジェクトを背面にもっていきます。

背景とtdのテキストを背面へ
STEP
背景とtdのテキストをスタック

STEP7でグループ化したオブジェクトを選択し、プロパティインスペクターの「スタック」にチェックを入れてください。(ここは水平方向でも垂直方向でもOKです)

STEP
背景とtdのテキストがスタックできたことを確認

この時点で、tdのテキストを増やしたり、途中で改行を入れたりして、自動でthの背景もtdの背景も伸びるかどうか確認します。

STEP
背景&tdのテキストと、thのテキストをグループ化し、複製し、さらにグループ化

STEP8でスタックをかけたオブジェクト(背景&tdのテキスト)と、thのテキスト(=これまで作ったすべてのオブジェクト)をグループ化し、複製し、真下にピッタリ配置し、まとめてグループ化します。

STEP
2行をスタック化

STEP10でグループ化したオブジェクトを選択し、プロパティインスペクターの「スタック」にチェックを入れ、「垂直方向にスタック」をクリックします。

STEP
必要な分だけ行を複製し、原稿に合わせて内容を書き換える

ダブルクリックで一行分が選択できるので、選択した状態でコピー&ペーストすると、行を増やすことができます。
Ctrlキー(Macでは⌘)を押しながら編集したいテキスト部分でクリックして選択し、さらにダブルクリックすると、編集可能となります。
必要なだけ行を複製し、内容を書き換えてください。
tdのテキストが複数行になっても、thとtdの背景が自動的に伸び、それに合わせてその下の行が自動的に下がっていくことが確認できます。
行を選択し、上下にドラッグ&ドロップすると、位置の入れ替えが可能です。
行を削除したい時は、行が選択された状態でDeleteキーを押します。途中の行が削除されると、その下の行が自動的に上がってきます。

一行分をコンポーネント化したい場合

一行分をコンポーネント化したい場合は、STEP10で、背景&tdのテキストと、thのテキストをグループ化した段階でコンポーネント化してください。

よかったらシェアしてね!

この記事を書いた人

岡山市の友野印刷(株)で働くウェブデザイナーです。
毎朝NHKの朝ドラを見ています。

目次
閉じる