20250527_NEWT‐Tech-Talk_fukuda

Transcript

1. Figma MCP で フロント開発を爆速にする
2. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 フロントエンドチーム フロントエンド4年くらい 趣味 • ⾳楽 • ⿇雀 • 散歩 • カフェ巡り • パン作り $whoami Fukuda Akito 福⽥ 晃都
3. AGENDA
 CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 1. MCPサーバーとは？ 2. Figmaからコードを⽣成してみる 3. より使い⼼地を良くするには？
4. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 MCPサーバーとは？
5. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 MCP (Model Context Protocol) サーバーとは何？ アプリケーションがLLM にコンテキストを提供する方法を標準化するオープンなプロト コル → AI アプリケーションにとっての USBケーブル のようなもの
6. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 Figma MCPでできるようになること • 色やサイズなどの情報を正確に取得できる • Figma上のコメントを参照できる • Figma上の情報を元に、素早くコードを生成できる • …
7. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 Figma MCPでできるようになること • 色やサイズなどの情報を正確に取得できる • Figma上のコメントを参照できる • Figma上の情報を元に、素早くコードを生成できる • … → フロントエンド開発を高速化できるはず！
8. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
  Figmaから  コードを⽣成してみる
9. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 今回作るもの • 写真詳細を表示するモーダル • 今回はUI中心 　↓ Figmaに記載されている仕様
10. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 （事前準備）Figma MCPを登録する { "mcpServers": { "figma-developer-mcp": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--stdio"], "env": { "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY" } } } } ↓ mcp.jsonに以下の記述を追加
11. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 プロンプトを作成する # 実装要件 ## デザイン - 画面全体 : https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント : https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、 Figmaのデザインを確認すること
12. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 プロンプトを作成する # 実装要件 ## デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇 〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること モーダルを含んだ画面 全体のFigmaリンク
13. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 プロンプトを作成する # 実装要件 ## デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント : https://www.figma.com/design/〇〇?node-id=〇 〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること 今回実装するモーダル のFigmaリンク
14. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 プロンプトを作成する # 実装要件 ## デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇 〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること 今回実装するモーダル の仕様を記載した Figmaリンク
15. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 プロンプトを作成する # 実装要件 ## デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用 すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること コード生成上の制限
16. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 プロンプトを作成する # 実装要件 ## デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、 Figmaのデザインを確認する こと その他の指示
17. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 ⽣成してみた結果 生成したUI Figma
18. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 ⽣成してみた結果 生成したUI Figma → 微調整は必要そう
19. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
  より使い⼼地を良くするには？
20. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 Project Rulesを充実させる • どのライブラリを使っているか • どのようにライブラリを使っているか ◦ 基本 Mantine の props を使ってスタイリングして、他に⽅法がない時のみ Tailwind を使う ◦ Mantine の Image ではなく、 next/image を使う • アイコンなどの配置場所はどこか
21. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 まとめ • Figma MCPを使えば、実務レベルで開発速度をあげることは可能 • そのために、ある程度の整備をしておくと効率が上がる • とはいえ、微調整は必要 • 最初のプロンプトは結構⼤事
22. CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 フロントエンドエンジニア 絶賛募集中
23. Thank you!
 CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.