関連サイト
本書の関連ページが用意されています。
内容紹介
本書は、Figma MCPサーバーとAIを使いこなし、プロダクト開発の現場をアップデートするための実践的ガイドブックです。
Figma MCPサーバーの登場により、エンジニアとデザイナーの間にあった壁を取り払うことができるようになりました。
本書では、エンジニア向けにFigma MCPサーバーを使ったデザインとコードの連携を、デザイナー向けにはAIとの連携を見据えた成果物とコミュニケーション手段の活用方法を解説します。さらに、Figma AIと共創するプロトタイプ開発として、FigJamやFigma Makeを用いたアイデアを素早く形にする開発手法も紹介します。
エンジニアとデザイナーがそれぞれの強みを活かしながら、AIと共創する新しい時代のプロダクト開発を実践するための必読書です。
書誌情報
- 著者: 竹田 学, 天辰 一希, 高橋 秀明, 八木田 裕伍(著), FigmaJapan株式会社(協力)
- 発行日: 2026-02-24
- 最終更新日: 2026-02-24
- バージョン: 1.0.0
- ページ数: 192ページ(PDF換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
竹田 学
アクセンチュア Accenture Song / ゆめみ プロダクトデザイナー。クライアントのデジタルプロダクト事業のプロジェクト推進、UIデザイン、デザインシステム構築、新規事業開発などを支援。
天辰 一希
アクセンチュア Accenture Song / ゆめみ フロントエンドエンジニア。PM/PL、Web開発業務に従事の傍ら、社内にFigma MCP研究チームを立ち上げ、Figmaプラットフォームの推進に取り組む。
高橋 秀明
アクセンチュア Accenture Song / ゆめみ アプリエンジニア。フロントエンドエンジニアとしてVueやReactを用いたWebアプリケーション開発に従事。その後、Flutterエンジニアへ転向し、iOS・Android・Web 向けアプリの開発を担当。
八木田 裕伍
アクセンチュア Accenture Song / ゆめみ フロントエンドエンジニア。既存サイトのリニューアル案件に技術選定や設計から携わる傍ら、アクセシビリティの普及活動や監修を行う。その後テックリードチームへ参加し、案件の技術的なヘルプ対応や技術調査なども行う。
FigmaJapan株式会社
目次
はじめに
目次
Chapter1 Figmaプラットフォーム概要
- 01 コラボレーションツールとしてのFigma
- 02 移り変わるプロダクトの開発フロー
- まとめ AI時代：人とAIとツールの共創へ
Chapter2 Figma MCPサーバー活用ワークフロー
- 01 AIとMCPサーバーによる新しい開発フロー
- 02 環境構築と設定
- 03 デザインからHTMLとCSSのページを生成する
- 04 Reactコンポーネントを生成し、既存プロジェクトを拡張する
- 05 これからの開発のススメ
- まとめ
Chapter3 Figma MCPのためにデザイナーができること
- 01 AIがもたらす設計環境の変化とデザイナーの立ち位置
- 02 デザイナーにとってのFigma MCPとは
- 03 設計対象のスケールを広げる
- 04 情報を構造化する
- 05 理解を同期する
- 06 デザイナーがリードできる領域
- 07 Figma MCPを活用する上で重要な3つのデザイン能力
- まとめ これからのデザインと組織の関係を見通す
Chapter4 Figma AIと共創する新しい時代のプロトタイプ開発
- 01 ハンズオンで学ぶFigma AIとの共創
- 02 【アイデア整理】FigJam AIでECサイトの要件を整理する
- 03 【UIデザイン】Figma MakeでUIを生成する
- 04 【データベース連携】Supabaseと接続して機能的なプロトタイプを完成させる
- まとめ Figma AIと共創する新しい時代