·

Tiếng Việt: What Is Figma MCP

What Is Figma MCP

Nếu bạn từng ngồi cắt pixel từ file Figma sang code — đo khoảng cách bằng tay, đoán màu hex, copy giá trị font-size từ inspector panel — bạn sẽ hiểu ngay giá trị của Figma MCP. Đây là server MCP (Model Context Protocol — giao thức mở giúp AI agent kết nối với các nguồn dữ liệu và công cụ bên ngoài) chính thức do Figma phát hành, cho phép các AI coding agent như Claude Code, Cursor, hay Gemini CLI "nhìn thấy" và "hiểu" trực tiếp cấu trúc design trong Figma, thay vì phải đoán mò qua ảnh chụp màn hình hay mô tả bằng lời.

Trước khi có Figma MCP, quy trình phổ biến là: designer làm xong file Figma, đưa link cho dev, dev tự inspect từng layer, tự suy luận spacing/màu sắc/typography rồi gõ code. AI agent tham gia vào quy trình này thường chỉ nhận được ảnh chụp màn hình — tức là mất hết context về cấu trúc thực (component nào lồng trong component nào, variable nào đang được dùng, layer nào là auto-layout). Figma MCP giải quyết đúng vấn đề đó: nó expose (đưa ra) design context ở dạng dữ liệu có cấu trúc, để LLM (large language model) sinh code chính xác hơn nhiều so với việc "đoán" từ hình ảnh.

Bài này là điểm khởi đầu của cả module Figma MCP. Bạn sẽ hiểu rõ Figma MCP gồm những tool nào, cách xác thực, nó thực sự giúp được gì trong pipeline design-to-code, và cách đọc hiểu output nó trả về — trước khi đi vào các bài setup cụ thể cho từng client (Claude Code CLI, VS Code, OpenCode, Gemini CLI, Cursor) ở các bài tiếp theo.

Core Figma MCP Tools: Design Context, Screenshots, Code Connect, and Variables

Figma MCP Server (chính thức gọi là Figma Dev Mode MCP Server) không phải một tool đơn lẻ, mà là một tập hợp tool nhỏ, mỗi tool phục vụ một mục đích rất cụ thể trong workflow lấy thông tin từ design sang code. Nếu bạn từng làm việc với MCP server khác (như Postgres MCP hay filesystem MCP), bạn sẽ quen với ý tưởng: mỗi tool là một "hàm" mà AI agent có thể gọi, với input/output rõ ràng.

Các tool cốt lõi bạn cần biết:

  • get_code — tool quan trọng nhất. Nhận vào một node (frame, component, hay layer bất kỳ) và sinh ra code tương ứng. Đây không phải code generic — nếu bạn đã thiết lập Code Connect (nói ở dưới), code sinh ra sẽ dùng đúng component thật trong codebase của bạn thay vì tạo mới từ đầu.
  • get_variable_defs — lấy danh sách design token/variable (biến thiết kế — màu, spacing, font-size, radius...) đang được áp dụng cho node đó. Đây là tool giúp AI không hardcode giá trị #3B82F6 mà biết đó là variable color/primary/500.
  • get_code_connect_map — trả về bản đồ ánh xạ (mapping) giữa component Figma và component thật trong source code của bạn, dựa trên cấu hình Code Connect. Nhờ tool này, agent biết "cái Button này trong Figma tương ứng với <Button /> ở đường dẫn src/components/Button.tsx".
  • get_screenshot — chụp ảnh tham chiếu trực quan của node được chọn. Vẫn hữu ích dù có dữ liệu cấu trúc, vì đôi khi AI cần "nhìn" tổng thể bố cục để verify lại logic layout.
  • get_metadata / get_design_context — lấy thông tin cấu trúc (structure) của node: cây layer, kích thước, constraint, auto-layout properties, tên layer...
  • create_design_system_rules — tool khá mới, giúp sinh ra bộ rule mô tả design system của bạn (naming convention, cách map token, quy tắc component) để agent tuân theo nhất quán qua nhiều lần generate.

Điểm then chốt cần nắm: các tool này được thiết kế để bổ sung cho nhau, không phải dùng độc lập. Một prompt "generate code cho frame này" tốt thường khiến agent tự động gọi get_code kèm get_variable_defs và get_code_connect_map trong cùng một lượt, để code sinh ra vừa đúng cấu trúc, vừa đúng token, vừa dùng đúng component sẵn có.

Ví dụ thực tế: bạn chọn một frame tên "Pricing Card" trong Figma, copy link (link này chứa node-id), rồi prompt cho agent:

Hãy dùng Figma MCP để lấy design context của node này:
https://www.figma.com/design/abc123XYZ/My-Project?node-id=4820-1923

Sinh code React + Tailwind cho component PricingCard, đặt tại
src/components/pricing/PricingCard.tsx. Ưu tiên dùng lại component
sẵn có trong codebase nếu Code Connect map được, và dùng CSS variable
thay vì hardcode màu/spacing.

Agent sẽ tự gọi chuỗi tool get_metadata → get_code_connect_map → get_variable_defs → get_code, rồi tổng hợp ra file code.

Mẹo: Đừng chỉ paste link Figma trần trụi vào prompt rồi hy vọng agent hiểu ý bạn muốn gì. Luôn nói rõ bạn muốn output ở dạng nào (React/Vue, Tailwind/CSS Modules, đặt file ở đâu) — vì get_code mặc định có thể sinh ra markup generic không khớp convention của bạn nếu không được hướng dẫn cụ thể.

Figma MCP Authentication: OAuth via the Official Remote Endpoint

Khác với nhiều MCP server bạn tự chạy local bằng API key, Figma MCP Server chính thức hoạt động chủ yếu ở dạng remote server — nghĩa là bạn không cần tự host hay chạy process nào cả, mà client (Claude Code, Cursor...) kết nối trực tiếp tới endpoint do Figma vận hành, thường có dạng https://mcp.figma.com/mcp.

Cơ chế xác thực dùng OAuth — chuẩn ủy quyền phổ biến bạn hay thấy khi "Login with Google". Lần đầu bạn thêm Figma MCP vào client, một luồng OAuth sẽ được kích hoạt: trình duyệt tự mở ra, bạn đăng nhập tài khoản Figma (hoặc đã đăng nhập sẵn), rồi bấm "Allow"/"Consent" để cấp quyền cho client đọc dữ liệu design của bạn. Sau bước này, client lưu lại token và tự dùng cho các lần gọi tool sau, không cần đăng nhập lại mỗi lần.

Điều này khác biệt quan trọng so với việc tự tạo Personal Access Token thủ công (cách làm cũ hơn, vẫn còn tồn tại ở một số tool bên thứ ba không chính thức) — với remote OAuth endpoint, bạn không cần lo quản lý secret key trong file config, không cần revoke token thủ công khi rời dự án, mọi thứ nằm trong phạm vi quản lý tài khoản Figma của bạn.

Về mặt cấu hình, tùy client bạn dùng mà cách khai báo remote server này khác nhau đôi chút, nhưng ý tưởng chung giống nhau — khai báo một MCP server type "http"/"sse" trỏ vào URL của Figma, ví dụ dạng rút gọn:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Hoặc qua CLI, ví dụ với Claude Code:

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

Chạy lệnh này xong, Claude Code sẽ tự trigger luồng OAuth ở lần gọi tool Figma đầu tiên (hoặc ngay khi bạn xác nhận thêm server, tùy version).

Một điểm cần lưu ý: bên cạnh remote server nói trên, Figma cũng có tùy chọn local/desktop Dev Mode MCP Server chạy ngay trong app Figma desktop (bật trong Preferences → mở cổng local, thường là http://127.0.0.1:3845/mcp). Cách này phù hợp khi bạn cần server chạy cùng máy, không phụ thuộc mạng ra ngoài, hoặc dùng cho một số client chưa hỗ trợ remote OAuth tốt. Tuy nhiên với đa số setup phổ biến hiện nay (Claude Code, Cursor, Gemini CLI), remote endpoint kèm OAuth là cách được khuyến nghị vì đơn giản hơn, không cần mở app Figma desktop chạy nền liên tục.

Mẹo: Nếu OAuth flow không tự mở trình duyệt (hay gặp khi chạy trong môi trường remote/SSH/container), đừng cố tìm cách "hack" bằng token thủ công — hầu hết client có flag hoặc lệnh riêng để in ra URL xác thực, bạn copy URL đó mở thủ công trên máy có trình duyệt rồi quay lại terminal.

What Figma MCP Enables for Design-to-Code and Handoff Workflows

Đây là phần trả lời câu hỏi thực tế nhất: Figma MCP giúp được gì mà trước giờ bạn chưa làm được (hoặc làm rất chậm)?

Thứ nhất, code-gen từ design chính xác hơn hẳn so với chỉ dùng ảnh chụp màn hình. Khi bạn đưa screenshot cho AI, nó phải "đoán" spacing là 16px hay 20px, màu là màu nào trong design system, border-radius chính xác bao nhiêu. Với Figma MCP, agent lấy được số liệu thật từ get_metadata và get_variable_defs — không còn đoán mò. Trải nghiệm thực tế: code sinh ra từ MCP thường chỉ cần chỉnh sửa nhỏ (responsive breakpoint, animation, edge case), thay vì phải làm lại gần hết như khi generate từ ảnh.

Thứ hai, giảm khoảng cách giữa designer và developer trong giai đoạn handoff. Trước đây, designer phải ghi chú thủ công ("dùng token spacing-md", "font weight 600 không phải 700") vì sợ dev đọc sai. Với MCP, agent tự đọc được annotation, variable, và cấu trúc layer — designer đỡ tốn công viết note thừa, dev (hay agent thay dev) tự truy vấn được thông tin gốc.

Thứ ba, đồng bộ hóa component tái sử dụng qua Code Connect. Đây có lẽ là giá trị lớn nhất về lâu dài. Nếu team bạn có design system trong Figma (component Button, Input, Card...) và cũng có design system tương ứng trong code (<Button />, <Input />, <Card /> trong React/Vue), Code Connect cho phép khai báo mapping giữa hai bên. Khi agent gọi get_code cho một node dùng component Button, nó không tự bịa ra JSX mới — nó biết phải dùng <Button variant="primary" size="lg"> đúng với API thật của component trong repo bạn.

Thứ tư, hỗ trợ các workflow không chỉ là "code" — như QA review hay viết spec. Một BA hoặc QA có thể dùng agent với Figma MCP để lấy get_screenshot + get_metadata của một frame, rồi yêu cầu agent viết ra checklist test case theo đúng trạng thái UI (empty state, error state, loading state) xuất hiện trong file Figma — điều này hữu ích ngay cả khi không sinh code.

Một use case thực tế đáng nói: refactor UI cũ theo design mới. Bạn có component cũ src/components/Card.tsx, designer làm bản redesign trong Figma. Thay vì code lại từ đầu, bạn prompt:

So sánh component hiện tại tại src/components/Card.tsx với design mới
tại link Figma này: https://www.figma.com/design/abc123/Redesign?node-id=88-40

Liệt kê những khác biệt về spacing, màu sắc, và cấu trúc. Sau đó cập nhật
lại Card.tsx để khớp design mới, giữ nguyên props interface hiện có,
không đổi tên component.

Agent sẽ đọc code cũ (qua tool đọc file bình thường), đọc design mới (qua Figma MCP), rồi tự đối chiếu và sửa — đây chính là kiểu công việc từng tốn hàng giờ review qua lại giữa designer và dev.

Cần thành thật về giới hạn: Figma MCP không thay thế hoàn toàn tư duy engineering. Logic nghiệp vụ, animation phức tạp, responsive behavior tinh vi, hay accessibility (khả năng tiếp cận) vẫn cần review kỹ bởi con người. MCP giúp bạn tiết kiệm phần "translate design sang code cơ bản", không phải toàn bộ quy trình phát triển UI.

Mẹo: Với refactor component cũ, luôn yêu cầu agent liệt kê diff trước khi sửa file — đừng để nó tự động ghi đè luôn. Việc này giúp bạn (hoặc reviewer) bắt được các thay đổi không mong muốn về props/behavior trước khi merge.

Understanding Figma MCP Output: Components, Design Tokens, and Annotations

Hiểu output của Figma MCP trả về quan trọng không kém việc biết cách gọi tool — vì nếu bạn không biết đọc, bạn sẽ không biết khi nào nên nghi ngờ code agent sinh ra có sai lệch với design gốc hay không.

Về component: output từ get_code không đơn thuần là markup HTML/JSX phẳng. Nó cố gắng phản ánh cấu trúc phân cấp (hierarchy) giống với cây layer trong Figma — frame cha chứa các component con, giữ nguyên tên layer làm gợi ý đặt tên biến/class khi hợp lý. Nếu bạn thấy code sinh ra có tên class hoặc component lạ hoắc không liên quan gì đến naming convention của bạn, khả năng cao là get_code_connect_map không tìm thấy mapping tương ứng — tức là Code Connect chưa được cấu hình cho component đó, và agent đang tự "bịa" component mới thay vì tái sử dụng cái có sẵn.

Về design token: get_variable_defs trả về danh sách biến ở dạng tên + giá trị + nhóm (ví dụ color.background.primary = #0F172A, spacing.4 = 16px). Đây là điểm bạn cần chú ý nhất khi review code AI sinh ra: nếu bạn thấy code hardcode background-color: #0F172A thay vì dùng biến CSS như var(--color-background-primary) hoặc token tương ứng trong Tailwind config, đó là dấu hiệu cần yêu cầu agent sửa lại — vì mục tiêu của design token là để khi designer đổi màu theme, code tự động ăn theo, không phải rải hex code khắp nơi.

Ví dụ minh họa cách map đúng token sang CSS variable trong codebase:

:root {
  --color-background-primary: #0F172A;
  --spacing-4: 16px;
  --radius-card: 12px;
}

// PricingCard.tsx — dùng token thay vì hardcode
export function PricingCard({ title, price }: PricingCardProps) {
  return (
    <div
      style={{
        backgroundColor: "var(--color-background-primary)",
        padding: "var(--spacing-4)",
        borderRadius: "var(--radius-card)",
      }}
    >
      <h3>{title}</h3>
      <p>{price}</p>
    </div>
  );
}

Về annotation: nếu designer có ghi chú (annotation) trực tiếp trên frame trong Figma — ví dụ note "button này disable khi form invalid" hay "text truncate sau 2 dòng" — các annotation này thường được đưa vào get_design_context/get_metadata dưới dạng text đi kèm node. Đây là nguồn thông tin cực kỳ giá trị mà ảnh chụp màn hình không bao giờ truyền tải được. Khi review output, nếu bạn thấy behavior logic (không chỉ style) xuất hiện đúng trong code, nhiều khả năng agent đã đọc được annotation này.

Một thói quen tốt khi review: đừng chỉ nhìn kết quả cuối (code) mà bỏ qua bước trung gian. Hầu hết client hiện đại (Claude Code, Cursor) cho phép bạn xem lại các tool call agent đã thực hiện — bạn nên kiểm tra xem get_variable_defs có thực sự được gọi hay không, và giá trị trả về có khớp với những gì bạn thấy khi tự inspect trong Figma hay không. Nếu agent bỏ qua bước lấy token mà generate thẳng từ get_screenshot, code sẽ dễ sai lệch giá trị dù layout nhìn "giống giống".

Mẹo: Khi review code sinh từ Figma MCP, hãy tìm nhanh các giá trị hex/px "trần" (không qua biến) trong diff — đó gần như luôn là dấu hiệu agent generate từ ảnh chụp thay vì từ token thật, và cần yêu cầu nó chạy lại get_variable_defs rồi map lại cho đúng.

Tới đây bạn đã có bức tranh tổng quan: Figma MCP gồm bộ tool xoay quanh get_code, get_variable_defs, get_code_connect_map, xác thực qua OAuth với remote endpoint chính thức, mang lại giá trị thực trong việc rút ngắn khoảng cách design-to-code, và đòi hỏi bạn biết đọc hiểu output (component, token, annotation) để review đúng chỗ. Các bài tiếp theo trong module này sẽ đi vào setup cụ thể từng client — Claude Code CLI & VS Code, OpenCode, Gemini CLI, Cursor — và một case study workflow thực chiến từ đầu đến cuối.

Tiếp Tiếng Việt: Figma MCP With Claude Code Cli And Vs Code