Figma + CursorでWebアプリ実装
ステップ・バイ・ステップガイド
この資料は?
2025年7月22日に法政大学 Affective Design Labで実施したワークショップのスライドです．
デザイン系の学生が，Figmaで作ったデザインをもとに実際に動作するウェブアプリをAIで実装するスキルを身につけることを目的としています．
AIエージェントが勝手にアプリを作るのではなく，デザインは自分の手で作り，それにできるだけ忠実にAIが実装し，さらに修正を繰り返す試行錯誤ができることを目指して，開発環境とガイドを作成しました．
目次
- 今日使うツールの説明
- Demoアプリの紹介
- 環境構築
- 一緒にサンプルページを作ってみる
- プロンプト集・コンポーネント集
今日使うツール
MCPとは?
Model Context Protocol (MCP) は，AIが他のいろんなツールと繋ぐための規格．「AIのためのUSB-C」とよく言われる [1]．
Figmaもこれに対応してて，Figmaの中のデザインをAIが読み取れるようにしてる．
今回は，プログラミングするAIにFigmaのデザインを参照させるために使う．
Cursorとは?
AIコードエディタ．VS Codeベースで作られてるので，AI関連部分以外はVS Codeと基本的に同じ．
主要機能
- エージェント (chat)：Chatで指示を出すとプログラミングをしてくれる
- タブ (tab)：コーディングしてる間に，AIが補完してくれる
なぜこの組み合わせ?
AIプログラミング (vibe codingとも言われる) は大流行中．大量のツールが次々に作られている．
Figma + Cursor + n8nを選んだ理由
- Figmaにみんな慣れてる
- Cursorはエディタなので応用しやすい．設定もカスタマイズ性が高い．
- 学生無料！
ツール選択の背景
- 様々なプロジェクトに転用しやすい
- 今回のworkshop向けにカスタマイズできる
環境構築
- FigmaでMCPを使えるようにする
- Cursorをインストール
- プログラム実行環境（NodeJS）をインストール
Figma デスクトップ版のインストール
MCPを使うには，デスクトップ版のFigmaが必要です．以下のリンクからダウンロード．
※Figmaの有料版が必要です．既存のチームを使う場合は教育プランにアップグレードが必要
FigmaでMCPを有効化
Dev Mode MCPサーバーを有効にする を選択する．
※詳しくは Dev Mode MCPサーバー利用ガイド
Figma MCPの画像サーバー設定
画像設定は「ローカル画像サーバーを使用」を選択
Cursor
- ここからダウンロード: https://cursor.com/
- gitをインストールするか聞かれたらインストールする
- 学生版のアカウントでログイン（無料で使うポイント！）
- Cursorの日本語化
Cursorの設定
- VS Codeから設定をインポートする（普段使ってる人）
Cursorのprivacy mode
送信したデータが学習などに利用されないためには有効にする
Cursor chat設定
AIエージェントに関する設定．私の設定を全部貼っておくので必要に応じて真似してみて下さい．
Command allow listはスクショを生成AIに渡して「画像の中のコマンドを読み取って，スペース区切りのテキストにして」って頼めばコピペできるようになる．
Command Allowlist
pnpm, mkdir, pip, python, python3, node, cat, npm, yarn, pip3, poetry, bundle, composer, mvn, gradle, cargo, pyenv, nvm, rbenv, asdf, sdkman, ruby, go, rustc, tsc, webpack, vite, make, cmake, next, gatsby, git, git clone, git pull, git fetch, git status, git diff, git log, git show, git branch, git checkout, git add, ls, head, tail, grep, find, wc, cd, pwd, eslint, prettier, black, ruff, stylelint, jest, vitest, pytest, rspec, which, docker, echo, docker-compose, npx, ts-node, bash -n, curl
Command Denylist
rmdir, chmod, chown, sudo, shutdown, reboot, halt, git push, git reset, git rebase, git clean, fdisk, mkfs, dd, kill, pkill, mv, cp, alias
CursorにFigma MCPを設定する
Dev Mode MCPサーバー利用ガイド の「ステップ 2: MCPクライアントをセットアップする」のCursorに関するタブを参照して設定しよう．
※Figma MCPは不安定なので，エージェントがFigmaと通信できなくなったら，Cursor & Figmaを再起動する！
Cursorの拡張機能—Specstory
AIエージェントとの会話履歴を保存してくれる機能．自分がどんな会話をしたのか振り返れる．AIが話を覚えててくれるようにすることも可能．
今回は，研究のため保存させてください．
インストール
- 以下のリンク↓をクリック，そしてインストールする
- cursor:extension/SpecStory.specstory-vscode
Specstoryの確認
設定画面に入って，Auto-saveが有効になってることを確認
Cursorでターミナルを開く
NodeJSをインストール
Mac NodeJSインストール
Macの人（バージョンは作業日時点の "LTS" を選ぶ）
Windows NodeJSインストール
Windows10の人
Wingetをインストール．NodeJSのページで"Volta"を選択して，表示されるコマンドを実行
Windows11の人
NodeJSのページで"Volta"を選択して，表示されるコマンドを実行
※Wingetはデフォルトでインストール済み
Windows NodeJSインストール（続き）
-
winget install Volta.Voltaのあとに，Cursorを再起動する
NodeJS 確認
> node --version
v20.19.0
Discussion