Figma MCP và Claude Code: lấy token và component ra code

Figma MCP server là cầu nối để Claude Code đọc trực tiếp file Figma: variable, component, bố cục và ảnh chụp của vùng bạn chọn. Cài bằng lệnh claude plugin install figma@claude-plugins-official, đăng nhập Figma qua /mcp, rồi dán link một frame vào Claude Code. Claude dùng dữ liệu đó để viết token và component theo quy ước dự án.

Bài này thuộc cụm Claude Code cho designer. Các lệnh và giới hạn dưới đây tôi kiểm lại trên tài liệu chính thức của Figma và Anthropic ngày 04/10/2026. Phần ví dụ về token lấy từ repo của chính site này.

Figma MCP server là gì?

MCP (Model Context Protocol) là chuẩn mở để công cụ AI gọi dữ liệu và thao tác từ bên ngoài. Figma MCP server là bản cài đặt chuẩn đó của Figma. Khi nối vào Claude Code, Claude có thêm một bộ công cụ để làm việc với file Figma của bạn.

Figma có hai loại server:

• Server từ xa (remote). Kết nối tới máy chủ của Figma, không cần mở ứng dụng desktop. Figma khuyên dùng loại này vì có nhiều tính năng nhất.
• Server desktop. Chạy trên máy bạn qua ứng dụng Figma desktop. Theo trung tâm trợ giúp Figma, loại này cần seat Dev hoặc Full trên gói trả phí.

Ba công cụ đọc tôi dùng nhiều nhất cho việc design sang code:

Danh sách đầy đủ còn có công cụ ghi ngược vào Figma, công cụ cho Code Connect và một prompt tên create_design_system_rules. Tôi để link ở mục nguồn.

Cài Figma MCP vào Claude Code thế nào?

Nếu chưa có Claude Code, đọc bài cài đặt Claude Code trước. Sau đó:

1. Cài plugin Figma từ chợ plugin chính thức của Anthropic. Plugin có sẵn cấu hình MCP server và các Agent Skills cho những việc hay làm.

   Sao chép

   claude plugin install figma@claude-plugins-official

2. Mở lại Claude Code nếu nó đang chạy.

3. Đăng nhập Figma. Gõ /mcp, chọn figma, chọn Authenticate. Trình duyệt mở ra, bấm Allow Access.

4. Kiểm tra kết nối. Gõ lại /mcp, server figma hiện trạng thái đã kết nối là xong.

Muốn cài thủ công không qua plugin, tài liệu Figma đưa lệnh này:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Thêm --scope user nếu bạn muốn server có mặt ở mọi dự án thay vì chỉ thư mục hiện tại.

Gói Figma nào dùng được và bị giới hạn bao nhiêu lượt?

Giới hạn chỉ tính cho các công cụ đọc dữ liệu từ Figma. Bảng dưới chép từ trang Rate limits của Figma ngày 04/10/2026. Figma ghi rõ họ có thể đổi con số này.

Với 20 lượt một tháng, bạn chỉ đủ thử vài frame. Muốn dùng hằng ngày thì cần seat Dev hoặc Full trên gói trả phí.

Lấy token từ Figma ra code như thế nào?

Copy link của frame: chuột phải vào frame hoặc layer, chọn Copy link to selection. Dán link vào Claude Code kèm yêu cầu rõ ràng. Ví dụ:

Đọc các variable dùng trong frame này bằng get_variable_defs.
Liệt kê tên và giá trị, rồi đối chiếu với token trong app/globals.css.
Variable nào đã có token tương ứng thì chỉ báo lại, đừng tạo token mới.
Variable nào chưa có thì đề xuất tên theo ba lớp raw, alias, semantic.

Câu cuối là phần quan trọng. Nếu không nói gì, Claude rất dễ chép giá trị hex thẳng vào component. Tài liệu Figma cũng nhắc: khi nhận về code thô thay vì token, hãy yêu cầu rõ tên và giá trị variable.

Ở site này, token chảy theo ba lớp. Đây là một nhánh có thật trong app/globals.css:

--gray-600: #717171;                     /* raw: chỉ có giá trị */
--neutral-600: var(--gray-600);          /* alias: gắn vai trò */
--subtle-foreground: var(--neutral-600); /* semantic: component dùng lớp này */

Khi Claude đọc variable từ Figma, việc của nó là tìm xem giá trị đó đã thuộc lớp nào. Component chỉ được chạm lớp semantic. Vì sao phải tách ba lớp thì bài design token là gì giải thích kỹ hơn.

Lấy component ra code như thế nào?

get_design_context trả về cấu trúc của vùng chọn dưới dạng React và Tailwind. Figma gọi đây là điểm khởi đầu: AI cần dịch nó sang framework, component và token của dự án bạn. Cách tôi làm:

1. Chọn nhỏ. Một thẻ, một header, một hàng bộ lọc. Hướng dẫn của Figma cảnh báo vùng chọn lớn làm công cụ chậm, dễ lỗi và trả kết quả thiếu.
2. Nói rõ đích đến. Tên file, component nào được dùng lại. Ví dụ: "Dùng Button ở components/ui-shadcn/button.tsx, đặt component mới ở components/work/."
3. Lấy cả ảnh chụp. Gọi get_screenshot để Claude có ảnh so sánh, rồi tự kiểm lại kết quả với ảnh đó.
4. Đọc diff. Tìm mã hex, giá trị px lẻ, shadow- hay bất cứ thứ gì trái luật hệ thống.

Nếu đội bạn có gói Organization hoặc Enterprise, Code Connect nối component trong Figma với component thật trong code. Figma gọi đây là cách số một để AI dùng lại đúng component thay vì viết mới.

Nên viết quy tắc gì cho Claude trước khi gọi Figma?

Figma khuyên đặt một bộ quy tắc ở cấp dự án, như ghi chú nhập môn cho một dev mới. Với Claude Code, chỗ đó là CLAUDE.md. Prompt create_design_system_rules của Figma có thể sinh bản nháp đầu.

Đây là bộ tôi sẽ thêm cho repo này, dựa trên luật đã có trong AGENTS.md:

## Figma MCP
- Gọi get_design_context cho đúng node được yêu cầu, rồi get_screenshot.
- Coi React và Tailwind trả về là bản mô tả thiết kế, không phải code cuối.
- Màu chỉ dùng token semantic: background, foreground, muted, border...
- Không thêm box-shadow. Độ nổi chỉ bằng viền 1px hoặc nền bg-muted.
- Chữ chỉ dùng weight 400 hoặc 500, phân cấp bằng cỡ, màu và tracking.
- Dùng lại component ở components/ui-shadcn trước khi tạo cái mới.

Phần lớn những dòng này đã nằm trong AGENTS.md và DESIGN.md của site. Đoạn trên chỉ gom chúng lại theo thứ tự Claude cần khi làm việc với Figma.

Hay gặp lỗi gì và sửa ra sao?

Cách tôi dựng hệ thống hơn 50 component cho phiên bản đầu của Joyme có trong case study Joyme. Bạn muốn trao đổi về design system hay quy trình design sang code, phần giới thiệu về tôi có cách liên hệ.

Nguồn

• Figma, Remote server installation
• Figma, Tools and prompts
• Figma, Rate limits and access
• Figma, Structure your Figma file for better code
• Figma, Guide to the Figma MCP server
• Figma, Code Connect: ai dùng được
• Figma, mcp-server-guide trên GitHub
• Anthropic, Discover plugins

Lệnh cài đặt, tên công cụ và giới hạn lượt gọi được kiểm theo các trang trên ngày 04/10/2026.