Figma + Visual Studio CodeでWebアプリ実装
ステップ・バイ・ステップガイド
この資料は?
2025年7月29日に法政大学 Affective Design Labで実施したワークショップのスライドです．
デザイン系の学生が，Figmaで作ったデザインをもとに実際に動作するウェブアプリをAIで実装するスキルを身につけることを目的としています．
AIエージェントが勝手にアプリを作るのではなく，デザインは自分の手で作り，それにできるだけ忠実にAIが実装し，さらに修正を繰り返す試行錯誤ができることを目指して，開発環境とガイドを作成しました．
目次
- 今日使うツールの説明
- まずVive Codingを体験
- Demoアプリの紹介
- 環境構築
- 一緒にサンプルページを作ってみる
- プロンプト集・コンポーネント集
Vive Codingを体験
- https://v0.dev
- まずはv0を体験してみよう
v0への指示の例
- 日本語のタイピング練習アプリを作って
- 英単語を覚えるための単語帳アプリを作って
- affectivedesignlab.com のホームページをリニューアルします．このホームページにアクセスして，現状を取得します．そして，イメージを刷新して，クールな感じに作り替えてください
今日使うツール
-
Figma MCP
- 画面を作る．そして，その情報をVisual Studio CodeのAIに渡すことができる．
- どんなツールかはみんな知ってるので説明省略．
-
Visual Studio Code (VSCode)
- AIコードエディタ
MCPとは?
Model Context Protocol (MCP) は，AIが他のいろんなツールと繋ぐための規格．「AIのためのUSB-C」とよく言われる [1]．
Figmaもこれに対応してて，Figmaの中のデザインをAIが読み取れるようにしてる．
今回は，プログラミングするAIにFigmaのデザインを参照させるために使う．
Visual Studio Codeとは?
AIコードエディタ．
主要機能
- エージェント (chat)：Chatで指示を出すとプログラミングをしてくれる
- 提案 (suggestion)：コーディングしてる間に，AIが補完してくれる
なぜこの組み合わせ?
AIプログラミング (vibe codingとも言われる) は大流行中．大量のツールが次々に作られている．
Figma + VSCode + n8nを選んだ理由
- Figmaにみんな慣れてる
- VSCodeは汎用的なAIコードエディタなので応用しやすい．設定もカスタマイズ性が高い．
- 学生無料！
- Cursorは日本の学生は無料じゃなくなっちゃった...
ツール選択の背景
- 様々なプロジェクトに転用しやすい
- 今回のworkshop向けにカスタマイズできる
環境構築
- FigmaでMCPを使えるようにする
- VSCodeをインストール
- プログラム実行環境（NodeJS）をインストール
Figma デスクトップ版のインストール
MCPを使うには，デスクトップ版のFigmaが必要です．以下のリンクからダウンロード．
※Figmaの有料版が必要です．既存のチームを使う場合は教育プランにアップグレードが必要
FigmaでMCPを有効化
Dev Mode MCPサーバーを有効にする を選択する．
※詳しくは Dev Mode MCPサーバー利用ガイド
Figma MCPの画像サーバー設定
画像設定は「ローカル画像サーバーを使用」を選択
VSCode
- ここからダウンロード: https://code.visualstudio.com/
- gitをインストールするか聞かれたらインストールする
- 学生版のアカウントでログイン（無料で使うポイント！）
Gitのインストール
- Windowsの人： https://git-scm.com/downloads
VSCodeの設定
プロファイルを設定
全て figma webappから読み込むように設定
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
Web アプリを作る
- GitHub を開く
- 右上のメニューからNew Repository
テンプレートを選択
Discussion