Figma MCPを使うとできること

Transcript

1. Figma MCPを使うとできること
2. 自己紹介 黛 礼雄 (まゆずみ れお) ・ファンタラクティブ エンジニア ・2023年8月に入社 ・フロントやバックエンド、DB周りを担当しています Figma MCPを使うとできること 1
3. 目次 Figma MCPとAI Agent使うことで業務にどう活かせるかを紹介します Figmaから実装 Figmaからタスク起票 Figma MCPを使うとできること 1
4. Figmaから実装 前準q h Framelink Figma MCP Server
 なぜ公式のMCPサーバーを使用しない理W h Figmaでのコンポーネントのインスタンス情報も取得でき h 階層構造の情報の取得が公式と比べやりやすい https://github.com/GLips/Figma-Context-MCP Figma MCPを使うとできること 1
5. Figmaから実装 Claude Codeへ渡す 基本的にはFigmaのデザインのURLを渡すだけです。 @src/components/Button ディレクトリを作成して、 そこで以下のButtonコンポーネントを作成してください。 [FigmaのコンポーネントURL] 例えば参考にしてほしい実装がある場合は以下のように指示します。 shadcn/uiのSelectコンポーネントをベースにして以下のデザインを作成してください。 [FigmaのコンポーネントURL] Figma MCPを使うとできること 1
6. Figmaから実装 実装時のコツ y Propsはあらかじめ用意しておくと期待値に近いものが出力でき… „ 複雑なコンポーネントはミニマムなものから作成していª „ 選択したフレーム内に不要な要素があるなら取り除ª „ 例）カードコンポーネントの中のnode-idがxxxのものは今回は無視して良€ y この指示2回目だな〜と思ったものはCLAUDE.mdに記載す… „ Tailwindのプレフィックスの有° „ 参照してほしいCSSがあるならそれも記載す… y オートレイアウトが使われていないデザインではFlexboxを使うように指示を出S „ 指定がないとabsoluteで頑張って実装されてしまうことも Figma MCPを使うとできること 1
7. Figmaからタスク起票 前準q h Framelink Figma MCP ServF h Notion MCP Framelink Figma MCP Serveの都合上、一つのFigmaの要素しか 受け取れないので、コンポーネントを束ねたフレームを用意する Figma MCPを使うとできること 1
8. Figmaからタスク起票 前準0 & Notionでタスクを入れるDBを用 & プロンプトを用意 Figma MCPを使うとできること 1
9. Figmaからタスク起票 x プロンプg x NotionのDBのURR x コンポーネントを含めたFigmaのフレームのURL をClaude Codeに渡します。 Claude Codeだとカスタムスラッシュコマンドにすると呼び出しやすいので オススメです。 /figma-to-task notion <NotionのURL> figma <FigmaのURL> プロンプトはこちら→ Figma MCPを使うとできること 1
10. Figmaからタスク起票 p 選択したコンポーネントがNotionのタスクDBに
 起票できてい@ p Figmaの各コンポーネントのURLも含めているので、 実際にタスクに取り組む際も便$ p タスクの内容はプロンプトを更新していくことで
 ブラッシュアップしていくことも可能 Figma MCPを使うとできること 1
11. まとめ Figma MCPを使うことで9 8 デザインを実装に落とし込む時の開発速度を高められC 8 他のMCPと連携することで、タスクの起票といった情報整理も行うことができる Figma MCPを使うとできること 1