UXPinでは、ワンクリックでJSON、CSV、Google Sheetsから実際のデータを要素に埋め込むことができます。アバター、名前、住所など、さまざまなサンプルデータを使用することもできます。要素を選択し、トップバーで Fill with Data(データを入力)を選択して、要素を埋めるカテゴリを選びます。

https://images.prismic.io/uxpincommunity/ece789be6c3bac9bdd720949cb03ac975ad16892_fillwithdata.png?auto=compress,format

<aside> 💡 ヒント コンテンツが更新された要素を手早く複製するには、要素または要素グループを選択し、Altをドラッグしながら右下のハンドルをドラッグします。

</aside>

Unsplashの画像を使う

Unsplashから画像を追加する手順は以下になります:

  1. 要素を選択します。
  2. 上部のバーで Fill with Data(データを入力)をクリックします。
  3. Photo(写真)を選択し、カテゴリを選択します。

挿入する画像の検索例としては、「Nature(自然)」ではなく「Trees(木)」で検索すると、より具体的な写真を検索することができます。

レイヤー名によるコンテンツの一致

キャンバスのさまざまな要素グループにコンテンツを作成するには、レイヤー名として一致オプションを使用します。 これにより、各レイヤーの名前に基づいてコンテンツが作成されます。

  1. まず、更新するデータの種類を表すキーワードを使用して、各レイヤーの名前を指定します。
  2. 次に、更新する要素を選択し、ドロップダウンからMatch by Layer Name(レイヤ名に一致)を選択します。 キーワードに一致する名前を持つすべての要素に、選択したコンテンツタイプのデータが自動的に入力されます。

ほとんどの場合、キーワードはデータ型の実際の名前ですが、追加の変数が含まれています。 唯一の例外は、d=daym=monthy=year表記を使用する日付です。 (例: 2018/05/25 形式のキーワードは mm/dd/yyyy、25.5.2018 は dd.m.yyyy)

また、Imageカテゴリの特定のテーマグループキーワードには、image-city / imagecityなど、常にimageという接頭辞が付きます。

その他のキーワードとしては電話はtel、アバターはphoto、2018-05-25はdate、24時間はtime 24h、12時間(AM/PM)は time、CC(クレジットカード)の有効期限はexp dateまたはvalid、ユーザー名にはloginなどがあります。