Slide 1

Slide 1 text

Figma MCP で フロント開発を爆速にする

Slide 2

Slide 2 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 フロントエンドチーム フロントエンド4年くらい 趣味 ● ⾳楽 ● ⿇雀 ● 散歩 ● カフェ巡り ● パン作り $whoami Fukuda Akito 福⽥ 晃都

Slide 3

Slide 3 text

AGENDA
 CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 1. MCPサーバーとは? 2. Figmaからコードを⽣成してみる 3. より使い⼼地を良くするには?

Slide 4

Slide 4 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 MCPサーバーとは?

Slide 5

Slide 5 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 MCP (Model Context Protocol) サーバーとは何? アプリケーションがLLM にコンテキストを提供する方法を標準化するオープンなプロト コル → AI アプリケーションにとっての USBケーブル のようなもの

Slide 6

Slide 6 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 Figma MCPでできるようになること ● 色やサイズなどの情報を正確に取得できる ● Figma上のコメントを参照できる ● Figma上の情報を元に、素早くコードを生成できる ● …

Slide 7

Slide 7 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 Figma MCPでできるようになること ● 色やサイズなどの情報を正確に取得できる ● Figma上のコメントを参照できる ● Figma上の情報を元に、素早くコードを生成できる ● … → フロントエンド開発を高速化できるはず!

Slide 8

Slide 8 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
  Figmaから  コードを⽣成してみる

Slide 9

Slide 9 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 今回作るもの ● 写真詳細を表示するモーダル ● 今回はUI中心  ↓ Figmaに記載されている仕様

Slide 10

Slide 10 text

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に以下の記述を追加

Slide 11

Slide 11 text

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のデザインを確認すること

Slide 12

Slide 12 text

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リンク

Slide 13

Slide 13 text

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リンク

Slide 14

Slide 14 text

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リンク

Slide 15

Slide 15 text

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のデザインを確認すること コード生成上の制限

Slide 16

Slide 16 text

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のデザインを確認する こと その他の指示

Slide 17

Slide 17 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 ⽣成してみた結果 生成したUI Figma

Slide 18

Slide 18 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 ⽣成してみた結果 生成したUI Figma → 微調整は必要そう

Slide 19

Slide 19 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
  より使い⼼地を良くするには?

Slide 20

Slide 20 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 Project Rulesを充実させる ● どのライブラリを使っているか ● どのようにライブラリを使っているか ○ 基本 Mantine の props を使ってスタイリングして、他に⽅法がない時のみ Tailwind を使う ○ Mantine の Image ではなく、 next/image を使う ● アイコンなどの配置場所はどこか

Slide 21

Slide 21 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 まとめ ● Figma MCPを使えば、実務レベルで開発速度をあげることは可能 ● そのために、ある程度の整備をしておくと効率が上がる ● とはいえ、微調整は必要 ● 最初のプロンプトは結構⼤事

Slide 22

Slide 22 text

CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.
 フロントエンドエンジニア 絶賛募集中

Slide 23

Slide 23 text

Thank you!
 CONFIDENTIAL
 © 2024 Reiwa Travel, Inc.