ダミーデータ・ダミー画像を登録・生成してくれるFigmaプラグインまとめ

「とりあえず仮で入れておく」はあるあるですが、だからといって「サンプルテキストサンプルテキスト」では実際に原稿が入ったときに、文字数が違ってデザインを大きく調整する羽目になります。

画像に関しても、placeholder.jpなどのダミー画像生成サービスを使う手もありますが、サンプル用にいろんな画像を当てておいた方が気づくこもあります。

しかしダミーデータを考えたり、ダミー画像を探して配置するのはそれなりに時間がかかってしまいます。
Figmaにはサンプルデータやサンプル画像を簡単に追加できるプラグインが数多く存在するので、そういうのに頼ってしまうのも1つの手です。

Content Reel：自分で汎用的なサンプルデータを用意しておく

Figma

Figma

https://www.figma.com/community/plugin/731627216655469013/Content-Reel

Figma Community plugin — Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!Content:Browse or search content to find published collections of text strings, imag...

Content Reelを使えば、あらかじめ保存しておいたテキストや画像のコレクションをあとから一気に適用できます。

こうしたサンプルデータにありがちな「名前やテキストも英語で、写真も日本っぽくないのでサンプルとしても使えない」も、自分で用意しておけば問題なく使えます。
実際の利用状況に近い画面にもなりますし、最初に手間はかかりますがオススメです。

メニューバーの［Plugins］→［Content Reel］でパネルが表示されて、オブジェクトを選択した状態で適用したいデータを選択すると、すぐ適用されます。

データの追加はパネルの「Add」から追加できます。

Unsplash：高品質な写真素材をインポート

Figma

Figma

https://www.figma.com/community/plugin/738454987945972471/Unsplash

Figma Community plugin — Insert beautiful images from Unsplash straight into your designs.The Unsplash License allows images to be used freely for both commercial and personal projects.Learn more about Unsplash at https://unsplash.com/about

高品質なフリー画像サイトのUnsplashの画像を簡単にインポートできるプラグインです。

メニューバーの［Plugins］→［Unsplash］をクリックするとパネルが表示されます。

普通に画像をクリックすると選択画像がアートボード上に配置され、オブジェクトを選択した状態で画像をクリックすると、そのオブジェクトにマスクとして設定されます。

UI Faces

Figma

Figma

https://www.figma.com/community/plugin/769664006254845172/UI-Faces

Figma Community plugin — UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars. The avatars are aggregated from various sources. You can filter by age, gender, emotion, etc.Check source license before you decide to use avatar in a live pr...

ダミーのアバター画像が1000種類近く用意されています。
似たプラグインに「User Profile」というものもありますが、こういったプラグインは1つあれば十分なので、気に入った方を使いましょう。

メニューバーの［Plugins］→［UI Faces］をクリックするとパネルが表示されます。

オブジェクトを選択した状態で、項目を設定後、「Apply avatars」をクリックすると一気に顔写真が設定されます。

Map Maker：Google Mapsの画像生成

Figma

Figma

https://www.figma.com/community/plugin/731312569747199418/Map-Maker

Figma Community plugin — Map Maker allows you to make a customized map blazing fast.It currently supports Google Maps.We are planing to support other map hosting service as well.■ Easy To UseSelect any layer including Rectangle, Ellipse or even Polygon, and run Map Maker.■ Fully CustomizableThese are the optio...

「Map Maker」を使うと、指定住所のGoogle Maps画像を生成してくれます。

デザインでGoogle Mapsを使うとき、「Google Mapsを開いて住所入力」→「共有ボタンから画像をコピー or スクショ」→「Figma上に貼りつける」だった手間がかなり削減されます。

メニューバーの［Plugins］→［Map Maker］をクリックするとパネルが表示されます。

あとは住所やその他設定項目を入浴して、「Make Map」をクリックするとアートボードに貼り付けられます。