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

「とりあえず仮で入れておく」はあるあるですが、だからといって「サンプルテキストサンプルテキスト」では実際に原稿が入ったときに、文字数が違ってデザインを大きく調整する羽目になります。
画像に関しても、placeholder.jpなどのダミー画像生成サービスを使う手もありますが、サンプル用にいろんな画像を当てておいた方が気づくこもあります。
しかしダミーデータを考えたり、ダミー画像を探して配置するのはそれなりに時間がかかってしまいます。
Figmaにはサンプルデータやサンプル画像を簡単に追加できるプラグインが数多く存在するので、そういうのに頼ってしまうのも1つの手です。
Content Reel:自分で汎用的なサンプルデータを用意しておく

Content Reelを使えば、あらかじめ保存しておいたテキストや画像のコレクションをあとから一気に適用できます。
こうしたサンプルデータにありがちな「名前やテキストも英語で、写真も日本っぽくないのでサンプルとしても使えない」も、自分で用意しておけば問題なく使えます。
実際の利用状況に近い画面にもなりますし、最初に手間はかかりますがオススメです。
メニューバーの[Plugins]→[Content Reel]でパネルが表示されて、オブジェクトを選択した状態で適用したいデータを選択すると、すぐ適用されます。

データの追加はパネルの「Add」から追加できます。
Unsplash:高品質な写真素材をインポート

高品質なフリー画像サイトのUnsplashの画像を簡単にインポートできるプラグインです。
メニューバーの[Plugins]→[Unsplash]をクリックするとパネルが表示されます。

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

ダミーのアバター画像が1000種類近く用意されています。
似たプラグインに「User Profile」というものもありますが、こういったプラグインは1つあれば十分なので、気に入った方を使いましょう。
メニューバーの[Plugins]→[UI Faces]をクリックするとパネルが表示されます。
オブジェクトを選択した状態で、項目を設定後、「Apply avatars」をクリックすると一気に顔写真が設定されます。

Map Maker:Google Mapsの画像生成

「Map Maker」を使うと、指定住所のGoogle Maps画像を生成してくれます。
デザインでGoogle Mapsを使うとき、「Google Mapsを開いて住所入力」→「共有ボタンから画像をコピー or スクショ」→「Figma上に貼りつける」だった手間がかなり削減されます。
メニューバーの[Plugins]→[Map Maker]をクリックするとパネルが表示されます。

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

Photoshopでファイルを開いたとき「予期せずにファイルの末尾に達しました。」と表示される場合の対処法
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
Figmaでデザインを作成するときの基本的な操作方法
Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
Sketchの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Figmaで画像からカラーパレットを生成するプラグイン「Image Palette」
Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
Sketchのライブラリアップデートの方法
ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
AlfredでFigmaのチーム・プロジェクト・ファイルを素早くの検索ができる「Alfred Figma Workflow」
CSS Nite in Kobe, vol.56「プラグマティックペルソナとマイクロカスタマージャーニーを作ってみよう」に参加してきました
Alfredで「自分のブログ内検索」を行う簡易的なWorkflowの作り方
MacDownでシンタックスハイライト機能を使う方法と設定
Alfred 4で使えるシステムコマンドのまとめ
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
npm-scriptsでSCSSをコンパイルする環境を構築する方法
撮影したスクリーンショットを、Hazleを使って自動的にImageOptimで画像圧縮する方法
Local by FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がる