はじめに
こんにちは。LINE+ ABC Studioでバックエンド開発を担当しているKim Min Seobです。今回の記事では、先日Papagoを利用してFigmaの翻訳プラグインを作成した経験を紹介したいと思います。プラグインをどのように作成するかについて詳しく案内したり、コードレベルで説明するつもりではありません。プラグインを作成する上で困ったことやその解決方法、またチームでの作成過程についてお話しします。
Figmaのプラグインを開発する際には、Figma Developersサイトを参照してください。HTMLやNode.js、Typescript関連の知識が必要で、複雑なプラグインを作成したい場合は、Vue.jsやReactのようなフロントエンドのフレームワークを使用すると良いです。
Figmaの翻訳プラグインが必要だと？
私は、バックエンド開発を担当しているのでFigmaをあまり使用していません。主に見るためだけに使っています。ある日、チームのSlackチャンネルにデザインを担当しているJeansさんからのメッセージが投稿されました。
グローバルサービスを提供するLINEは、社内に独立したPapagoサーバーを持ています。それを利用してSlackやConfluenceなどのコラボレーションツールに翻訳機能を提供しており、必要に応じてAPIを直接呼び出して活用することもできます。しかし、まだFigmaではそのような機能を活用していないため、使い慣れていて翻訳の品質も高いPapago翻訳を使用できず、他の翻訳機能を使用しなければならない不便な状況でした。
Figmaにプラグインがあるということを今回初めて知ったので、Jeansさんに教えてもらったプラグインドキュメントを参照し、大まかの内容を把握しました。簡単に言いますと、プラグインを作成する際にはNode.jsとTypescriptを使用し、完成したプラグインは以下のように動作する仕組みでした。
プラグイン開発者がTypescriptを利用して、ロジックを担当するcode.tsとUIを担当するui.htmlを作成すると、コンパイルされた結果がFigma内のプラグインで実行されます（ファイルの名前は重要ではありません）。
また、もう1つ知っておくべきことは、翻訳を担当する翻訳APIを使用する方法です。これについては、Slackでチームの同僚に協力してもらいました。
作成に必要な調査が終わった後、最後に最近流行りのもう一人の同僚（？！）にアドバイスをもらってから開発に入りました。
制約その1
あまり難しいことはないように見えましたが、思ったより問題は早く出てきました。開発していたプラグインで、APIの呼び出しが正常に行われない問題が発生しました。この問題については、Figma DevelopersサイトのMaking Network Requestsドキュメントの下部に説明がありますが、その内容は以下のとおりです。
FigmaやFigmaプラグインはブラウザ環境で実行されるため、Cross-Origin Resource Sharingポリシーが適用されます。
プラグインは、オリジン（
origin）がnullのiframe内部で実行されます。つまり、すべてのオリジンからのアクセスを許可するAPI（Access-Control-Allow-Origin: *）だけ呼び出すことができます。
つまり、プラグインの実行方法の技術的な制約のため、APIサーバーですべてのオリジンからのアクセスを許可する必要がありました。しかし、通常APIサーバーでは特殊な状況ではない限りそのように設定しなく、社内のPapago APIサーバーもやはり許可していませんでした。
この問題を解決するために、すべてのオリジンからのアクセスを許可するプロキシサーバーによってリクエストを中継する方法を使用しました。LINEには、AWSのLamdaのようなサーバーレス（serverless）コンピューティングサービス、Verda Functionsがあるため、このサービスを利用してプロキシサーバーを構築し、簡単に問題を解決できました。
初期開発完了
前述の問題を解決してからは、大した問題なく開発を完了しました。以下は初期の翻訳プラグインです。
Jeansさんの最初の依頼通り、頻繁に使われる2つの言語間の翻訳に焦点を当ててシンプルに機能を実装しました。まず、なるべくシンプルな形でプラグインを完成して登録し、その後の意見を反映してさらに改善させるつもりでした。ここまでは半日もかからなかったんですが、このような仕事はなぜ本業より楽しいのか、同僚と夕食を取って帰宅してからも作業を続けて完成しました。
ところで、プラグインを登録するにはさらに必要なものがありました。それは、プラグインのアイコンとカバーアートです。他は全部自分でできるとしてもデザインだけは自信がなかったため、チームのメンバーに助けを求め、Scottさんに協力してもらうことになりました。
Vue.jsの導入
3日後、Scottさんからアイコンとカバーアートデザインを完了したとの連絡がありました。ところで、ありがたいことにアイコンとカバーアートだけでなく、プラグイン画面全体のデザインを作業してもらいました。開発者が作った粗末な画面をデザイナーとして我慢できなかったのでしょうか。驚きです。
初期のプラグインは、HTMLとVanilla JSだけの画面構成となっていましたが、新しく作成するプラグインの画面にはさまざまな機能が追加されるため、Vanilla JSでは実装が難しいと考えてVue.jsを使用することにしました。
なぜVue.jsかと言いますと、私にできることがそれしかないためです。実は、Figma DevelopersサイトのドキュメントとプラグインサンプルはReactベースになっていますが、新しい技術を学ぶことに時間をかけたくなかったです。これはプロダクトを早くリリースするための選択で、もしReactができる場合はReactを使用したほうがより良いと思います。
制約その2
ここで第二の問題が発生しました。Vue.jsを使用して作成された.jsファイルと.cssファイルがプラグイン内で正常にロードされない問題でした。
この問題については、Figma DevelopersサイトのResource Linksドキュメントで説明しています。原因を見てみると、Figmaプラグインでは相対パスではなく、http://またはhttps://で始まる絶対パスのリソースのみ使用できました。つまり、ui.htmlとcode.js以外に画像のような他のファイルを一緒に含めて使用することはできませんでした。
この問題は、私が使用したVue.jsプロジェクトがバンドラーとしてwebpackを使用しており、以下の2つのwebpackプラグインを利用して.jsファイルと.cssファイルをHTMLに含む方法で解決しました（Reactについては公式サンプルを参照してください）。
Vue.jsでwebpackを設定する方法については、Vue CLIサイトのwebpackドキュメントに説明があります。このドキュメントを参照し、vue.config.jsファイルに以下のような内容を入力して設定を完了しました。
plugins: [
new HtmlInlineScriptPlugin({
htmlMatchPattern: [/ui.html$/],
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HTMLInlineCSSWebpackPlugin(),
]ちなみに、最新バージョンのVue.jsでは、Viteを使用してバンドルすることを推奨しており、Viteでは以下のプラグインを利用するとこの問題を解決できると思います。
ジャーン！リリース！
作成完了後、チーム内でテストのために、まずFigmaのLINE用のスペースにベータ版をアップしました。どうやって知ったのか他のチームで使ってみて、タイ語を追加してもらえないかの問い合わせもありました。そこで、正式バージョンのリリースにあたって対応言語を追加し、LINEでより幅広く使用できるように改善しました。ユーザーからのフィードバックを受けてプロダクトを進化させる素晴らしい経験でした。
製作したプラグインはFigmaで以下のように実行できます。
おわりに
今回の作業は、非常に短期間で複数の同僚から協力を得て、1つの小さなプロダクトを完成した楽しい経験でした。このように素晴らしい経験ができたのは、LINE社内のインフラ環境が整っているうえ、企画／開発／デザインがすべて1つのチームに属しており、迅速かつ自由にコミュニケーションできる文化を持つABC Studioだからこそ可能だったと思います。
最後に、Scottさんが作成したプラグインの動作をお見せして終わりにしたいと思います。
オープンソースとして公開！
数か月間の準備を経て、Vue.jsで作ったFigmaの翻訳プラグインのサンプルコードをオープンソースとして公開しました。
Apache License 2.0を適用して自由に活用、変更およびデプロイが可能ですので、FigmaのプラグインをVue.jsで作成したい場合は、このオープンソースを参考にするといいと思います。詳しくは、README.mdを参照してください。