プロダクト開発を効率化、繰り返されるデザインとコードの引き渡しをスムーズにする「Figma Dev Mode」とは？

【23-B-2】多くの開発者が知らないFigmaのポテンシャル〜Figma APIやDev Modeを活用したフロントエンド開発

デザインとコードをスムーズに繋ぐために

「Connect」（繋げる）

　「Connect」とは、「デザインとコードを繋げる」ことだ。デザイナーが作るデザインと、開発者が実装するコードを効率良く連携するための機能がいくつかある。

　開発現場でありがちなのが、デザイン設計中にコンポーネントのデザイン定義は確認できても、その中身となるコードの存在が分からず、あるいは探せず、再開発してしまうことだ。その解決策となるのがDev ModeのCode Connect。FigmaのInspectでコンポーネントを確認する時に、コードも直接参照できるようになる。例えばFigmaから「カートに追加」ボタンを選択すると、それに対応するコードが画面右に表示されるようになる。

　Code Connectを有効にするには、まず設定ファイルやアクセストークンなどを用意する。そしてFigma CLIから「$ figma connect create」などのコマンドを実行して、Figmaのコンポーネントとコードベースを接続するといった流れだ。現状ではReact、SwiftUI、Composeに対応している。

Code Connectを有効化する

　他にもAPIでデザインとコードの反映を自動化することもできる。FigmaにはFigmaの情報にアクセスするためのAPIがいくつかある。多くが情報の参照（read）だが、一部書き込む（write）ものもある。

　先述したFigmaのVariablesなら、これに対応するVariables APIがある。例えば「red-300」として定義した赤を「少しピンクに」と変更する時、GitHub Actionsと連携してFigmaのVariablesの変更をGitHubのコードに反映する。逆にGitHubにおけるコードの変更をFigmaのVariablesに反映することもできる。

　さらにPlugin APIを使うことでワークフローをカスタマイズすることもできる。ある企業はプロダクトで使うアイコン（画像）のセットの更新作業をPlugin APIとGitHub Actionsのワークフローを組み合わせることで自動化した。

　これまではアイコンをエクスポートして開発者に渡し、開発者はコードベースに組み込み、プルリクを作成し、このコードのレビューやマージなどをしていた。しかしFigma Plugin APIを使うことで、書き出すアイコンを指定するとGitHubのプルリクまでできるようにした。完全自動化とまではいかないまでも、作業を大幅に簡略化できた。

　おまけとして、谷氏は「Figma for VS Code」という拡張機能を紹介した。VS Codeのエディタから直接Figmaを開くことができる。これを使うと、エディタから離れることなく、デザインデータを参照するなどFigmaの機能を使うことができる。

　最後に谷氏は「プロダクト開発の現実は複雑なプロセスで行われています。デザイナーと開発者との連携をなめらかにするためにFigma Dev Modeを役立てていただければ幸いです」と述べて講演を締めた。