アプリの文字列管理がつらかったのでFigmaへの文字列反映を楽にするプラグインを作ってみた

アプリ開発中につらみを感じたためtsvファイルを食わせるとPage上で合致したTextNodeの文字列を自動で置換するプラグインを作りました。

百聞は一見に如かずということでまずはデモをご覧ください。

作った経緯

業務で作っているアプリでは、デザインツールとしてFigmaを使っています。

また、デザインデータとは別に文字列の管理には下図のようなスプレッドシートを使い、OS間の文言に差異が生まれないようにしています。

その結果として

エンジニア：デザインはFigma、文字列はスプレッドシートをそれぞれ正として行き来しながら実装を行い、文字列反映漏れの差し戻しを修正する

デザイナー：手作業でスプレッドシートの内容をFigmaに漏れないように反映し、更新があった場合にはそれに追従する

PO：本質的なチェックのほか、文字列適用の不備を目grepで間違い探しのように探して指摘していく

という、三者三様につらみがある状況が発生していました😇

もちろんすべてがFigmaに統合され、それを唯一神として見れば良い状態が理想の状態かとは思います。

しかし、海外対応のための翻訳管理もあるのでスプレッドシートを使わないという選択もまた難しい状況でした。

そんなときFigmaにはプラグインがあると聞き（とにかく楽をしたい一心で）この状況を打破するべく行動しました。

既存プラグインの調査

作らないで済むならばそれに越したことはないので、スプレッドシートをFigmaに反映するプラグインを探し、見つけたのが Google Sheets Syncというプラグインでした。

Google Sheets Sync | Figma Community

初めて見たときはこれを使えば課題を解決できるのではと思ったのですが、よくよく見てみたところ

・リアリティを出すためにリストなどにダミーデータを流し込む用途っぽい
・取り込めるスプレッドシートはpublicなものでないといけない

という2つの問題がありました。

前者はスプレッドシートの行と列を逆にすればクリアできそうでしたが、問題は後者のシートの読み取り権限でした。
例え文言とはいえど、スプレッドシートはGSuiteで社内に閉じた状態で運用しなければならなかったからです。

結局既存のものでは難しそうだったので、Kindle Unlimitedで無料になっていたTypeScript入門本に目を通しながら自前でプラグインを作ってみることにしました。

出来上がったもの

残念ながら認証周りを解決する時間と技術力が無かったので、スプレッドシートからの直接読み込みは断念しました🙅‍♂️

しかし「直接が駄目ならファイルに書き出して食わせればいいじゃない」という方針により、冒頭にご覧いただいたようなtsvファイルを食わせるとPage上で合致したTextNodeの文字列を自動で置換するプラグインが出来上がりました。

前提条件として、プラグインの実行前に下記の2つが必要になります。

・1行ごとにkeyとvalueで構成されているtsvファイル
・置き換えたいTextNodeのnameを、tsvファイルのkeyと揃えたFigmaのPage

このプラグインにより

エンジニア：Figmaを唯一神として実装を行え、文字列反映漏れでの差し戻しも減る🙆‍♂️

デザイナー：キーを一度設定すれば、後から何度でも自動で文字列を同期できる🙆

PO：間違い探しではなく本質的なチェックに集中できる🙆‍♂️

と、みんなが幸せになれることを目指しています。

使い方

Manage Pluginsからは入れることが出来ないので手順を書いておきます🙏

tsvファイルの準備

下記のようなkey-value形式のtsvファイルが必要です。

text_ok	OK
text_cancel	キャンセル
text_register	登録する
text_delete	削除する

1列目にkey, 2列目にvalueが入力されているスプレッドシートであれば

[ファイル] → [ダウンロード] → [タブ区切りの値]によって吐き出すことが出来ます。

Figma側の準備

key-valueで置換したいテキストのnameを予め対応するkey名に書き換えておいてください。

git clone

公式プラグインからは入れられないためリポジトリをクローンしてきます。
ターミナル上で下記コマンドを実行してください。

git clone git@github.com:masaibar/TextReplacer.git

Figmaにプラグインを読み込ませる

[Plugins] → [Development] → [New Plugin]

[Link existing plugin] → [Click to choose a manifest.json file]をクリックして

cloneしたリポジトリのmanifest.jsonファイルを読み込ませると

[Plugins] → [Development] に [Text Replacer]というプラグインが追加されるのでクリックしてください。

Figma上でプラグインを実行する

このような簡素なダイアログが表示されるので[ファイルを選択]からtsvファイルを選択すると

開いているPage配下のすべてのTextNodeを走査し、適用対象があればテキストを置換します。

エラーハンドリングとかはちゃんと出来てないのでご注意ください。
例えば実行するマシン上にフォントがダウンロードされていない場合などにはうまく実行できません。

おわりに

普段はAndroid開発をしており、TypeScriptはおろかWebフロントエンドの技術は8年前に受けた新卒研修以来ろくに触っていない状態で不安でしたが

・Figmaの用意してくれていたチュートリアルがかなり親切だった
・TypeScriptが比較的Kotlinに近い感覚で触れる言語だった
・幸運にも社内にFigmaプラグイン作成経験者がおり直接質問できた

により心理的、技術的なハードルを下げることができたのがラッキーでした。

どのくらい需要があるのか分かりませんが、さすがに片手間にメンテンナンスを続けるのは大変なので、現時点でFigmaのプラグインストアに上げるところまで持っていく予定はありません🙇‍♂️

ソースコードは公開しておきますので使いたい方は自己責任でお使いください。もしくはPRお待ちしております👀

https://github.com/masaibar/TextReplacer