Figma MCP (AI Agents & Next.js) • Figma & Web Dev 教學
這集我們來看一下Figma MCP的使用方式。
我們會先看一下MCP的大概背景，跟看一下VS Code / Cursor / Claude / Figma Make 的Figma MCP使用方式。其中也會用到不同的AI Agent，像是Claude Code等等。
我們也會用挺好用的Next.js來寫我們網頁的架構，並利用GitHub來儲存跟管理檔案，最後再連上Vercel，把我們的網站發佈出去，可以說是一整套基本網頁製作的流程。
____________________________________________________
【參考連結】
程式背景安裝: https://youtu.be/vwhJtTd5LbI
Figma MPC: https://developers.figma.com/docs/figma-mcp-server/
VS Code: https://code.visualstudio.com/
Cursor: https://cursor.com/download
Claude Code: https://code.claude.com/docs/en/overview
Next.js: https://nextjs.org/docs
Vercel: https://vercel.com/
____________________________________________________
【章節】
00:00 MCP介紹
03:40 Figma MCP價格&權限
04:02 可連上的程式編輯工具
04:13 Figma MCP連結方式
04:53 設計檔的準備
05:08 使用Components
05:15 使用Variables
05:44 Code Syntax編寫
05:57 Scope使用
06:07 圖層命名 & Auto layout
06:33 利用註解或測量輔助
07:09 網頁版Figma MCP
07:47 本地Figma MCP
08:32 VS Code
08:44 VS Code: 建立Next.js App
09:26 VS Code: GitHub帳號登入
09:58 VS Code: GitHub Copilot
10:27 VS Code: 安裝 Remote Server
11:43 VS Code: 安裝 Desktop Server
12:15 VS Code: 開啟Desktop MCP
12:32 VS Code: 「桌上型」選擇設計
13:12 VS Code: Server命名問題
13:28 VS Code: 「桌上型」選擇設計 (續)
14:36 VS Code: 轉換成「連結式」選擇
15:13 VS Code: 切換成Claude模型
15:58 VS Code: CSS使用Figma Variables
16:29 VS Code: 設計對比吻合
17:27 VS Code: 圖片位置 (本地&雲端暫存)
18:24 VS Code: 上傳到GitHub
20:01 Cursor
20:07 Cursor: 連結Figma MCP
21:26 Cursor: 「連結式」選擇設計
22:51 Cursor: Code檢查
23:34 Claude
23:39 Claude: 關於Claude Code
24:40 Claude: 連結Figma MCP
25:40 Claude: 「連結式」選擇設計
26:47 Claude: 圖片位置
27:47 Claude: Code檢查
28:20 Claude: 設計對比吻合
28:28 Claude: 把UI介面傳送到Figma
28:35 Claude: Claude生成設計
29:06 Claude: 開啟「傳送UI」介面
29:55 Claude: Figma裡更新設計到Code
30:50 Claude: 「傳送UI」的不同功能
32:00 Figma Make
32:06 Make: 連結的差別跟選擇
32:59 Make: Claude Code建立Make設計
33:45 Make: 工作檔跟網頁連結的差別
34:35 Vercel
34:40 Vercel: GitHub帳號的吻合
36:11 Vercel: Vercel裡連上GitHub
37:07 Vercel: 成功發佈的網站連結
38:00 Vercel: GitHub更新到Vercel網站
40:52 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#FigmaMCP #nextjs #aiagents
我們會先看一下MCP的大概背景，跟看一下VS Code / Cursor / Claude / Figma Make 的Figma MCP使用方式。其中也會用到不同的AI Agent，像是Claude Code等等。
我們也會用挺好用的Next.js來寫我們網頁的架構，並利用GitHub來儲存跟管理檔案，最後再連上Vercel，把我們的網站發佈出去，可以說是一整套基本網頁製作的流程。
____________________________________________________
【參考連結】
程式背景安裝: https://youtu.be/vwhJtTd5LbI
Figma MPC: https://developers.figma.com/docs/figma-mcp-server/
VS Code: https://code.visualstudio.com/
Cursor: https://cursor.com/download
Claude Code: https://code.claude.com/docs/en/overview
Next.js: https://nextjs.org/docs
Vercel: https://vercel.com/
____________________________________________________
【章節】
00:00 MCP介紹
03:40 Figma MCP價格&權限
04:02 可連上的程式編輯工具
04:13 Figma MCP連結方式
04:53 設計檔的準備
05:08 使用Components
05:15 使用Variables
05:44 Code Syntax編寫
05:57 Scope使用
06:07 圖層命名 & Auto layout
06:33 利用註解或測量輔助
07:09 網頁版Figma MCP
07:47 本地Figma MCP
08:32 VS Code
08:44 VS Code: 建立Next.js App
09:26 VS Code: GitHub帳號登入
09:58 VS Code: GitHub Copilot
10:27 VS Code: 安裝 Remote Server
11:43 VS Code: 安裝 Desktop Server
12:15 VS Code: 開啟Desktop MCP
12:32 VS Code: 「桌上型」選擇設計
13:12 VS Code: Server命名問題
13:28 VS Code: 「桌上型」選擇設計 (續)
14:36 VS Code: 轉換成「連結式」選擇
15:13 VS Code: 切換成Claude模型
15:58 VS Code: CSS使用Figma Variables
16:29 VS Code: 設計對比吻合
17:27 VS Code: 圖片位置 (本地&雲端暫存)
18:24 VS Code: 上傳到GitHub
20:01 Cursor
20:07 Cursor: 連結Figma MCP
21:26 Cursor: 「連結式」選擇設計
22:51 Cursor: Code檢查
23:34 Claude
23:39 Claude: 關於Claude Code
24:40 Claude: 連結Figma MCP
25:40 Claude: 「連結式」選擇設計
26:47 Claude: 圖片位置
27:47 Claude: Code檢查
28:20 Claude: 設計對比吻合
28:28 Claude: 把UI介面傳送到Figma
28:35 Claude: Claude生成設計
29:06 Claude: 開啟「傳送UI」介面
29:55 Claude: Figma裡更新設計到Code
30:50 Claude: 「傳送UI」的不同功能
32:00 Figma Make
32:06 Make: 連結的差別跟選擇
32:59 Make: Claude Code建立Make設計
33:45 Make: 工作檔跟網頁連結的差別
34:35 Vercel
34:40 Vercel: GitHub帳號的吻合
36:11 Vercel: Vercel裡連上GitHub
37:07 Vercel: 成功發佈的網站連結
38:00 Vercel: GitHub更新到Vercel網站
40:52 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#FigmaMCP #nextjs #aiagents