メモリ不足に負けない、Figma のテキスト一括変更

Figma はそれなりに軽快に動かすことができますが、ページやオブジェクトが増えてくるとパフォーマンスが辛くなってきます。
複数オブジェクトや複数フレームのコピペで Figma の動作が停止してしまったり、メモリがいっぱいいっぱいのエラーが出たりします。

複数オブジェクトのコピー＆ペーストについては、要素を分けてコピー＆ペーストするしか対処方法はなさそうですが、テキストの一括変更や一括置換はちょっとよりよい方法を模索してみてきました。
対処パターンがなんとなくまとまってきたので、今回の記事にしてみます。

テキスト一括変更のメジャーな方法

レイヤー名のテキスト一括置換であれば、Figma の機能内（Rename Selection）で対応できます。
オブジェクト内のテキストとなると、プラグイン Find and Replace が検索と置換のメジャーなツールではないかと思います。

Find and Replace は、ページ内のテキストとレイヤー名の検索とテキストの一括置換ができます。
検索の仕方も「完全一致」「前方一致」「部分一致」「後方一致」などの設定ができます。

この Find and Replace なんですが、オブジェクトが増えてくると検索の処理中？（おそらく）によるフリーズやメモリーのエラーが起こりやすいようです。
オブジェクトが多い状況でテキスト一括変更をしたい場合は手早く一括置換を何らかのツールで行いたいので、痛いところではあります。

別のプラグインを使う

オブジェクトの多いファイルでテキスト一括置換がどうしても必要ということもあり、テキストの検索・置換ツールのプラグインをいちいろ試してみました。
結果、下記の2つがメモリーがいっぱいになりがちな状況でも作業しやすかったです。

Find in page

Find in page

Find in page はもしかしたら、 Find and Replace よりも高性能かもしれない検索・置換ツールです。
テキストとレイヤーが検索対象で、選択範囲、ページ、ファイル全体までを検索範囲にできます。レイヤーはフレームやコンポーネントなどのレイヤーの種類も選ぶ頃ができます。テキストは「完全一致」のパターンのみですが、検索する範囲は強力です。

検索したテキストはレイヤー一覧で表示されます。対象のレイヤーを選んでテキストの変換ができます。
それぞれのレイヤーはリストからのフォーカスと、表示/非表示の切り替えもできます。
機能がそこそこ強力でありながら、パフォーマンスの激落ちはしないので使いやすいツールかなと思います。

Text Edit

Text Edit

Text Edit は、シンプルな検索とテキスト変更のツールです。
テキストの検索・置換ツールとしては他のツールを少し使い方が違います。検索・置換ではなく検索・編集のツールのようなものです。

プラグインを開くとページ内のテキストが一覧で表示されます。
その一覧から含まれるテキスト絞り込んで検索できます。 編集は各テキストを選ぶと編集ができます。書き換えが必要なテキストにフォーカスするところまではツールで行い、書き換え自体は各自で編集することになります。
一括置換で一気に書き換えというより、文中のテキストを内容を確認しながら書き換えるのに向いているツールです。

プラグインの使いどころ

Figma はメモリーのパフォーマンス問題があるため、状況によってプラグインのツールも使用をするものを選んだほうがよさそうです。

デザインでは名称や表記が変わるものに対してテキスト置換をかけることが多いです。
ただし、対象のテキストをすべて確認せずに置換してしまうと、説明テキストなど文中に含まれるパターンでたまに不整合になることがあり、テキストを確認しながら置換（でも手作業よりは漏れがなく早い）は、Text Editを使うことが多くなりました。
単純な単語のテキストの対応を一気にやりたい、レイヤー名の書き換えを行痛い場合には、Find in page がいいかなと場合によって使い分けています。
どちらも Figma ではオススメのプラグインです。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。