音声書き起こし
1. オープニング
@potato4d
こんにちは UITのpotato4dです。
@potato4d
ユーザーインターフェースとテクノロジーを愛する開発者のためのポッドキャスト UIT INSIDE、今回も始めていこうと思います。
@potato4d
今回は、会社におけるFigma MCPの活用について、奥田方の居石さんと浦添さんをゲストにお迎えして話していきたいと思います。
@potato4d
よろしくお願いいたします
@vivil
よろしくお願いします
@surazoe
よろしくお願いします
@potato4d
では、今回お二方ゲストに来ていただいているので、自己紹介からしていこうかなと思います。
まず居石さん、お願いしてもいいですか？
@vivil
居石と申します。今回はCSR開発部という部の開発部門の代表として参加させていただいております。よろしくお願いします。
@surazoe
浦添と申します。CSR部のデザイン部のデザインチームリーダーを務めております。よろしくお願いします。
@potato4d
せっかくFigma MCPの回ということで、エンジニア視点・デザイナー視点みたいな話も伺えればと思っています。
@potato4d
では早速Figma MCPの話をしていきたいと思いますが、まず概要からお話しできればと思います。
今回、導入の主導をしていただいた居石さんから簡単に概要をお伝えいただけますか？
2. Figma Dev Mode MCP
@vivil
はい。正式名称はFigmaのDevMode MCPというもので、Figma社が出しているFigmaというサービスのアプリケーションからMCPサーバを立ち上げられるツールです。
DevSeat以上の権限を持っている方が利用でき、Figmaのデザインファイルからコードを生成するのが主な目的となっています。
現状はOpen Beta版での提供ですが、既に利用しており、社内でも使われているところがあるので今回紹介させていただきます。
@vivil
現在Figmaのアプリ上で選択したフレームから「この部分をコード生成してください」とか、デザインのカラーコードを抽出して表示する、などの使い方が主です。
@potato4d
なるほど、ありがとうございます。Figmaはエンジニアフレンドリーな要素もあり、コードに落とし込みやすい要素が多いですが、それがよりMCPサーバというインターフェースで使えるようになった、というツールですね。
@vivil
その認識で合っています。
@potato4d
最近は便利な反面、セキュリティなど導入が悩ましい面もありますが、LINEヤフーでは自由に使えるんでしたっけ？
@vivil
利用はOKですが、弊社ではセキュリティ意識を高めるためにも、Noraのものや自作のものはそのまま使えるわけではなく、必ず社内のセキュリティ部門で確認を受けてから許可が出る運用です。
今回のDevMode MCPについても、私が申請して内容を共有し、「これは大丈夫」と確認が取れて社内で利用できる状態になっています。
@potato4d
今は前社的に自由に使える形なんですね。
@vivil
はい、そうですね。
3. エンジニアから見る導入の意図
@potato4d
セキュリティも鑑みてしっかり管理しつつも、準備してでも使えるようにした理由や期待している役割はどのあたりでしょうか？
@vivil
弊社では多国籍で開発しているチームがあり、CSR開発部やデザイン部にも多国籍メンバーがいます。
その中で意図しないコミュニケーションエラーや、色コードのズレなどが起こることもありました。
そうした問題を省力化・高速化できればというのが期待です。
MCPサーバを立ててAIからコード生成を依頼することで、デザインに必要なコンポーネントをAIが作ってくれるので、素早く省力化・高速化できることを期待しています。
@potato4d
コミュニケーションが挟まることで良くなる部分もあれば、エラーが起きることもあるので、デザインデータをベースに実装するならAIに任せた方がミスも少なく効率的、ということですね。
@vivil
例えばカラーコードや変数名など、エンジニアによってこだわりがある部分もAIが一時的に決めてくれるので、「AIがそう言ったならそれでいいよね」と認識が揃うのも利点です。
@potato4d
決めの問題もAIベースだと公平なジャッジになって、必要以上のコストがかからないのも良いですね。
@potato4d
エンジニア観点でもう一つ、現場での導入状況はどうですか？
@vivil
先ほど申し上げた通り、DevSeat以上の権限が必要で、現状それを持っているエンジニアは多くありません。
デザイナーさんの方がDevSeat以上を持っていることが多いので、今後どう役割分担していくか整理が必要です。
今は一部のメンバーが権限を持って検証していて、効率化できると分かれば全体に展開しやすくなると思います。
@potato4d
絶賛試験運用中という認識ですね、ありがとうございます。
@potato4d
開発現場からの観点を聞いたので、今度はデザイナーから見た観点も浦添さんに伺えればと思います。
MCPサーバはエンジニアがエディターやターミナルから使うイメージですが、デザイナー視点で嬉しい場面はありますか？
4. デザイナーから見るFigma MCPの嬉しさ
@surazoe
私もこのMCP連携はFigma DevMode MCPで初めて実施しました。
一部チームでトライアル中ですが、社内ハッカソンで短期間集中してものづくりをした際に、Figma MCPを使ってデザインからそのままコード生成を試しました。
初めて自分の作ったデザインがMCPでコード化されていく様子を見て、かなり感動しました。
コーディング経験はありますが、自分の届けたいデザインが世に届く距離がシンプルに短くなったという嬉しさがありました。
@potato4d
デザインデータが必ずしもすぐに精度高く実装されるわけではなく、レビューやコースもあったところが、デザインデータを作ったらすぐモノになるのは革命的だったわけですね。
@surazoe
見た目上、目の前でコードが生成されていく様子がインパクト大きかったです。
コミュニケーションのズレや精度面でのギャップも、最低限のやりとりで済むようになり、今後精度が上がればさらに期待できると思っています。
@potato4d
まだ完全に正確ではないこともありますが、80点や90点でもすぐできるなら十分嬉しいですね。
@potato4d
最適なFigmaデザインの構成も重要になってきそうですね。
今までの構成だとうまく出力できなかった部分も、トライアンドエラーで知見が溜まってきているので、今後共有していきたいです。
@surazoe
オートレイアウトをあんまり使ってないところで、もうちょっと使えると精度良くなりそうだねってところは少し見えてきたりはするので、
そのあたりを今後トライアンドエラーで試していけるといいかなというところではありますね。
@potato4d
オートレイアウトなど、DevMode MCPフレンドリーな要素が重要になりそうですね。
5. 業務活用の展望
@potato4d
今まさに絶賛試験中ですが、今後どうなっていくと現場が良くなりそうか、Figma DevMode MCPによる変化の展望があれば聞かせてください。居石さんお願いします。
@vivil
Figma DevMode MCPは新しい技術なので、どんどん試行錯誤して試していける環境が大切だと思っています。
セキュリティへの配慮をしつつ、便利なものは使って省力化・高速化し、ユーザーに価値を届けられるようにしたいです。
既存ツールと組み合わせたり新しいツールも試しながら、より素早く価値提供できる形を模索したいです。
@potato4d
守りながら攻める、今は重要なフェーズですね。ありがとうございます。
@potato4d
浦添さんはいかがですか？
@surazoe
Figma MCP連携が前提になると、命名や整理の最適化も進み、Figmaやアプリ側の進化にも期待できます。
また、フロントエンド人材が潤沢でない課題も、こうした連携でカバーできるのではと期待しています。
@potato4d
確かに、フロントエンドエンジニアはコストもかかる中で、Figmaからシームレスに統合できると効率的ですね。
DevMode MCPの領域で効率化とノウハウ蓄積が進めば、課題もまとめて解消できそうです。
@potato4d
今お二人が絶賛検証中とのことなので、面白い事例があればまたUIT INSIDEでお聞かせください。
@potato4d
というわけで本日は居石さん、浦添さんのお二方にFigma DevMode MCPについてお伺いしました。
6. クロージング
@potato4d
LINEヤフーのフロントエンド組織では、このようなフロントエンドに関する議論や意見交換を日々行っています。
社内の企画から始まったUIT INSIDEのコンテンツも多く、今後も発信していければと思います。
@potato4d
ポッドキャストへのご意見ご感想は #UIT_INSIDE でお待ちしています。
スタッフで投稿を確認しますので、ぜひお気軽にお寄せください。
@potato4d
というわけで本日は居石さん、浦添さんとともにFigma DevMode MCPについて話していきました。ありがとうございました。
@vivil
ありがとうございました
@surazoe
ありがとうございました
