記事一覧やメニューなど、規則性のあるレイアウトの設定を容易にできるAdobe XDの機能「リピートグリッド」を使ってみます。
使い方
例として、以下のような画像とタイトル、説明文が1セットの記事一覧を作成したいとします。
画像とタイトル、説明文を選択して、右側にある「リピートグリッド」を選択します。
選択している要素の表示が切り替わりますので、まずは以下の部分を右側にドラッグして伸ばしてみます。
元々配置していた要素の右側に同じ要素が追加されました。
次に下側にドラッグして伸ばしてみます。
同様にした側に同じ要素が追加されました。
要素間のマージンもドラッグで各要素同じだけ変更できます。
現状は同じデータが並んでいるだけなので、それぞれの画像やテキストを変更してみます。
まず画像ですが、XD外のフォルダから差し替えたい画像を選択(今回の場合画像9枚を選択)し、ドラッグアンドドロップでXDの画像上に追加します。
各要素の画像をそれぞれの画像に置き換えることができました。
テキストの場合も同じように変更できます。
title.txtというファイルを用意して、以下のように記述します。
title.txt
チワワ 黒猫 スズメ 鳩 ウミガメ 猿 ワニ ペンギン イルカ
各要素で設定したいタイトルを改行で区切っています。
このtitle.txtをXDのタイトル部分にドラッグアンドドロップで移動します。
各要素のタイトルがまとめて差し変わりました。
説明文も同様にdescription.txtというファイルを用意します。
description.txt
チワワの画像です。 黒猫の画像です。 スズメの画像です。 鳩の画像です。 ウミガメの画像です。 猿の画像です。 ワニの画像です。 ペンギンの画像です。 イルカの画像です。
description.txtを説明文の部分にドラッグアンドドロップします。
説明文もまとめて差し変わりました。
スタイルの変更や要素を移動する場合も、まとめて変更することができます。
例えばタイトルのスタイルを変更したい場合、タイトルをダブルクリックします。
その後、スタイルを変更することで他の要素も同様でスタイルが変更されます。
例えば文字色を青くしてみます。
【参考サイト】
コメントが承認されるまで時間がかかります。