Nếu bạn từng phải chụp màn hình Figma rồi gõ tay từng mã màu, từng con số khoảng cách để “mớm” cho AI hiểu thiết kế của mình, thì có cách đỡ mất công hơn nhiều. Bằng một công cụ mã nguồn mở tên figma-console-mcp, Claude có thể đọc thẳng file Figma thật của bạn — lấy token màu, spacing, typography, thậm chí tạo component ngay trong Figma. Cả quá trình cài chỉ mất khoảng 15 phút và chỉ cần làm một lần.
Trước khi vào chi tiết, có một điều nên biết: đây không phải sản phẩm chính thức do Figma hay Anthropic phát hành. Công cụ này do một nhóm tên southleft làm và duy trì trên GitHub, hoàn toàn miễn phí và mã nguồn mở. Cái tên gốc của nó là “Figma Console MCP” — ban đầu sinh ra để đọc log lỗi của plugin Figma, sau này được mở rộng thành công cụ đọc/ghi toàn bộ design system. Bạn cứ yên tâm dùng, chỉ là đừng nhầm nó với một tính năng “chính chủ” của Claude hay Figma.
Chuẩn bị những gì để kết nối Figma với Claude
Bạn cần ba thứ: một gói Claude Pro (20 đô/tháng, đã bao gồm Claude Code), một tài khoản Figma (bản miễn phí cũng dùng được), và một máy Mac hoặc Windows. Không cần biết code — mọi lệnh bên dưới đều dạng copy rồi dán.
Bước 1: Cài Node.js
Node.js là một chương trình chạy ngầm, bạn sẽ không bao giờ phải mở nó ra dùng trực tiếp. Nó giống như lớp nền mà Claude Code và công cụ kết nối Figma cần có để hoạt động — tương tự cách điện thoại cần iOS hay Android để chạy app.
Vào nodejs.org, bấm nút tải bản LTS (bản ổn định lâu dài), mở file vừa tải và bấm Continue/Agree liên tục tới khi cài xong. Xong bước này bạn không cần đụng gì thêm tới Node.js nữa.
Để kiểm tra đã cài đúng chưa: mở Terminal (trên Mac: Cmd + Space, gõ “Terminal”, Enter), gõ node --version. Thấy hiện bản như v20.18.0 hay cao hơn là ổn. Nếu báo “command not found”, thử tắt hẳn Terminal (Cmd + Q) rồi mở lại.
Bước 2: Cài Claude Code
Claude Code là công cụ chạy trong Terminal, khác với app Claude Desktop (icon màu cam, giao diện chat thông thường). Hai cái này liên quan nhưng tách biệt, và bạn cần Claude Code cho phần kết nối này.
Trong Terminal, gõ:
npm install -g @anthropic-ai/claude-codeĐợi chữ chạy xong, gõ claude để khởi động. Claude Code sẽ hỏi cách đăng nhập — chọn Claude account with subscription vì bạn có gói Pro. Một cửa sổ trình duyệt mở ra, đăng nhập bằng tài khoản Claude của bạn, xác nhận xong là xong. Gõ /exit để thoát ra Terminal thường.
Lưu ý: Lệnh ở bước sau chỉ chạy được trong Terminal thật, không phải trong cửa sổ chat của Claude Desktop. Hai giao diện nhìn có thể na ná nhau nên dễ nhầm.
Bước 3: Tạo Personal Access Token trên Figma
Đây là “mật khẩu” riêng để Claude nói chuyện được với tài khoản Figma của bạn. Figma sẽ không chia sẻ file cho ai khác chỉ vì bạn tạo token này.
Vào figma.com, bấm ảnh đại diện góc trái → Settings → kéo xuống mục Personal access tokens → Generate new token. Đặt tên gì cũng được, ví dụ Claude MCP. Ở phần quyền (scope), bật bốn mục:
- File content → Read
- File versions → Read
- Variables → Read
- Comments → Read and write
Bấm Generate token, bạn sẽ thấy một chuỗi ký tự bắt đầu bằng figd_. Copy ngay và lưu lại chỗ nào đó an toàn — Figma chỉ hiện token này một lần duy nhất, đóng cửa sổ là mất, phải tạo lại từ đầu.
Bước 4: Cho Claude Code biết đường tới Figma
Mở Terminal (nhớ /exit ra khỏi Claude Code nếu đang ở trong đó), rồi dán lệnh sau, thay figd_YOUR_TOKEN_HERE bằng token thật vừa lưu:
claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latestThấy thông báo xác nhận server đã được thêm là xong — bạn không cần chạy lại lệnh này nữa trừ khi đổi token Figma. Vì dùng cờ -s user, kết nối này áp dụng cho cả Claude Desktop lẫn Claude Code, chỉ cần khởi động lại app là nhận được.
Bước 5: Cài plugin Desktop Bridge trong Figma
Plugin này tạo kết nối sống giữa file Figma đang mở và Claude. Cần cài một lần, sau đó chỉ bật lên khi muốn Claude đọc file.
Trước tiên, mở Terminal, gõ claude để vào Claude Code, gõ câu lệnh Check Figma status. Claude sẽ báo Desktop Bridge chưa kết nối — đây là điều bình thường, mục đích của bước này chỉ là để các file plugin được tạo ra trên máy bạn. Gõ /exit để thoát.
Mở Figma Desktop (bản cài trên máy, không phải bản web), mở một file bất kỳ, vào Plugins → Development → Import plugin from manifest…. Bấm Cmd + Shift + G để mở hộp thoại “Go to folder”, dán đường dẫn:
~/.figma-console-mcp/plugin/Chọn file manifest.json và bấm Open. Nếu thành công, bạn sẽ thấy “Figma Desktop Bridge” xuất hiện trong menu Plugins → Development.
Mẹo nhỏ: Nếu không tìm thấy mục Development, kiểm tra lại bạn đang dùng Figma Desktop chứ không phải Figma trên trình duyệt — bản web không hỗ trợ plugin dạng development.
Bước 6: Thử kết nối
Mở file Figma cần dùng, chạy Plugins → Development → Figma Desktop Bridge, bảng trạng thái hiện “Connected” là ổn. Mở Terminal, gõ claude, gõ Check Figma status, chọn Yes khi được hỏi. Claude sẽ báo đã kết nối và cho biết đang thấy file nào.
Để test thật, dán link file Figma vào Claude Code và nhờ: “Lấy các biến thiết kế (design variables) từ file Figma này: [link]”. Nếu Claude trả về đúng màu sắc, spacing, typography của file — vậy là xong toàn bộ setup.
Dùng hàng ngày thế nào
Từ giờ về sau, mỗi lần muốn Claude đọc một file Figma, bạn chỉ cần hai việc: mở plugin Desktop Bridge trong file đó, và có Claude Code (hoặc Claude Desktop) đang chạy. Phần cài đặt ở trên chỉ làm một lần duy nhất.
Nếu gặp lỗi lạ, cách nhanh nhất là copy nguyên văn thông báo lỗi, dán vào Claude và mô tả bạn đang làm gì — Claude sẽ đọc lỗi và chỉ hướng xử lý cụ thể hơn nhiều so với dò tài liệu.
Để lại một bình luận