Conecta Claude a Figma con MCP có gì mới?

• Claude giờ có thể “nói chuyện” trực tiếp với Figma để đọc và tạo nội dung thiết kế.
• Người dùng có thể yêu cầu AI lấy token màu, tạo frame, hoặc dựng component mà không cần copy-paste.
• Tính năng này chạy nhờ MCP, một cách kết nối AI với công cụ bên ngoài.
• Có hai cách cài: dùng NPX cho người đã có Node.js, hoặc Cloud Mode nếu muốn ít cài đặt hơn.
• Đây là công cụ tốt để bắt đầu nhanh, nhưng bản thiết kế vẫn cần con người chỉnh lại cho chuẩn.

Bài viết gốc giới thiệu cách kết nối Claude với Figma bằng MCP để AI có thể làm việc trực tiếp trên file thiết kế. Nói đơn giản, thay vì bạn phải mở Figma, chép thông tin ra ngoài rồi dán vào Claude, giờ Claude có thể đọc dữ liệu từ Figma và thậm chí tạo một số thành phần ngay trong canvas.

Bạn có thể hỏi Claude lấy toàn bộ token màu trong một file, rồi so sánh Light mode và Dark mode cạnh nhau. Hoặc bạn yêu cầu tạo một card có ảnh đầu, tiêu đề và nút hành động, và Claude sẽ dựng nó trong Figma. Điều này giúp giảm khá nhiều thao tác lặt vặt khi làm thiết kế. Điểm cốt lõi ở đây là một công cụ tên là figma-console-mcp. Đây là một “server MCP”, tức là một lớp trung gian cho phép Claude dùng các công cụ của Figma. MCP là viết tắt của Model Context Protocol, có thể hiểu là một chuẩn kết nối giúp AI truy cập vào ứng dụng khác một cách có kiểm soát. Nếu nói theo cách đời thường, MCP giống như một chiếc cầu nối. Claude không tự tiện “chui” vào Figma, mà đi qua cầu nối này để đọc file, lấy biến thiết kế, tạo frame, hoặc kiểm tra sự khớp giữa thiết kế và code. Theo bài viết, figma-console-mcp là mã nguồn mở và có khá nhiều tính năng. Nó nối với hai phần quan trọng của Figma là Plugin API và REST API.

Bạn không cần nhớ hai khái niệm này quá sâu; chỉ cần hiểu rằng đó là những “cửa” để công cụ bên ngoài giao tiếp với Figma.

• Đọc design tokens, variables và các chế độ giao diện;
• Lấy dữ liệu từ component và style;
• Tạo frame, hình khối và chữ trong Figma;
• Quản lý bộ biến thiết kế;
• Chụp lại canvas;
• Hỗ trợ kiểm tra độ giống nhau giữa bản thiết kế và bản code.

Tuy vậy, Claude không phải lúc nào cũng tự làm tất cả đúng ngay. Nó chỉ là công cụ hỗ trợ, còn việc quyết định cuối cùng và chỉnh sửa tinh tế vẫn do con người đảm nhiệm. Bài viết chia cách thiết lập thành hai hướng. Nếu bạn có Node.js, bạn có thể dùng NPX. Nếu bạn muốn ít cài đặt hơn, có thể chọn Cloud Mode. Dù chọn cách nào, Figma Desktop vẫn là bắt buộc. Điều đó có nghĩa là bạn không thể dùng bản Figma trên web để thay thế. Tác giả nhấn mạnh việc này nhiều lần vì đây là nguyên nhân hay khiến người dùng tưởng đã cấu hình đúng nhưng vẫn không kết nối được. Để kết nối, người dùng cần tạo một token truy cập cá nhân trong Figma. Token này giống như một “chìa khóa” để Claude có quyền đọc dữ liệu từ tài khoản Figma của bạn. Bài viết lưu ý token thường bắt đầu bằng `figd_`. Sau đó, bạn thêm MCP vào Claude. Nếu dùng Claude Code, sẽ có lệnh cài trực tiếp. Nếu dùng Claude Desktop, sẽ thêm một đoạn cấu hình vào file của ứng dụng.

Nghe có vẻ kỹ thuật, nhưng ý chính là: Claude cần biết phải dùng công cụ nào, token nào, và cách gọi công cụ đó. Bài viết cũng yêu cầu cài một plugin trong Figma tên là Figma Desktop Bridge. Plugin này giúp tạo cầu nối thực sự giữa Claude và ứng dụng Figma đang mở trên máy. Nếu không bật plugin, Claude có thể kết nối rất chập chờn hoặc không đọc được dữ liệu. Một bước quan trọng khác là khởi động lại Claude sau khi cài xong. Đây là thao tác nhỏ nhưng dễ bị quên. Sau khi mọi thứ hoạt động, bạn có thể kiểm tra bằng cách yêu cầu Claude xem trạng thái Figma hoặc tạo một frame đơn giản nền xanh. Phần thú vị của bài viết là tác giả không chỉ nói về khả năng, mà còn nói khá thẳng về giới hạn. Claude giúp rất nhanh ở các khâu đầu như thu thập, trích xuất, hoặc dựng bản nháp. Nhưng để ra sản phẩm đẹp và chuẩn, người thiết kế vẫn cần điều chỉnh layout, khoảng cách, hệ thống thành phần và độ nhất quán.

Nói cách khác, đây không phải công cụ thay thế designer. Nó là công cụ tăng tốc cho designer và team sản phẩm. Một số lỗi phổ biến cũng được liệt kê khá rõ. Nếu không kết nối được, hãy kiểm tra xem bạn đang dùng Figma Desktop chưa. Nếu dữ liệu trả về trống, có thể plugin chưa chạy. Nếu token báo lỗi, khả năng cao là token đã hết hạn hoặc sai định dạng. Nếu gặp xung đột cổng kết nối, hệ thống thường tự xử lý.

Claude giờ có thể làm việc gần hơn với Figma hơn trước rất nhiều, và MCP là mảnh ghép giúp việc đó xảy ra.

• Claude có thể đọc và tạo dữ liệu Figma qua MCP.
• Có hai cách cài: NPX hoặc Cloud Mode.
• Figma Desktop là yêu cầu bắt buộc.
• Cần token truy cập cá nhân để kết nối an toàn.
• Plugin Figma Desktop Bridge là phần không thể thiếu.
• AI làm nhanh phần khởi đầu, nhưng con người vẫn cần kiểm tra và hoàn thiện.

Nếu nhìn từ góc độ công việc, lợi ích lớn nhất là tiết kiệm thời gian. Những việc như đọc token màu, kiểm tra biến thiết kế, dựng khung ban đầu của component hay audit sơ bộ một design system có thể làm nhanh hơn nhiều.

Thay vì bảo AI “giải thích Figma là gì”, giờ bạn có thể bảo AI “đi xem trực tiếp file Figma này và làm giúp tôi một số việc”. Sự khác biệt nằm ở chỗ AI không chỉ trả lời bằng lời, mà còn có thể tương tác với công cụ thật. Điều này đặc biệt hữu ích trong các nhóm làm sản phẩm, vì designer, developer và AI có thể phối hợp gần nhau hơn. Designer đỡ phải làm lại các thao tác lặp đi lặp lại. Developer đỡ phải ngồi dò từng token hoặc từng biến giao diện. Còn AI làm phần “quét nhanh” và dựng nháp. Tuy vậy, cũng nên hiểu đúng vai trò của công cụ. Đây là một trợ lý tăng tốc, không phải một hệ thống tự hoàn thiện thiết kế. Nếu dùng tốt, nó giúp rút ngắn đường từ ý tưởng đến bản mẫu. Nếu kỳ vọng quá mức, bạn sẽ dễ thất vọng vì vẫn phải chỉnh tay khá nhiều.

Trong bối cảnh các công cụ AI ngày càng được nối với phần mềm làm việc hằng ngày, ví dụ này cho thấy xu hướng rất rõ: AI không chỉ trả lời câu hỏi nữa, mà đang đi sâu vào quy trình thật. Với Figma, điều đó mở ra cách làm mới cho thiết kế giao diện, đặc biệt ở các việc mang tính lặp lại hoặc kiểm tra hệ thống.

Đọc bài gốc sẽ giúp bạn hiểu sâu hơn, nhưng không phải lúc nào bạn cũng có thời gian lướt hết một bài dài, nhất là khi bài có nhiều thuật ngữ như MCP, token, plugin hay API. Insight giúp bạn nắm ý chính trong vài phút, thay vì phải tự lọc thông tin giữa rất nhiều chi tiết kỹ thuật. Điểm mạnh lớn nhất của bản tóm tắt là tiết kiệm thời gian. Bạn không cần đọc từng đoạn hướng dẫn cài đặt nếu mục tiêu của bạn chỉ là hiểu công cụ này làm được gì, có phù hợp với công việc của mình không, và nó khác gì so với cách làm cũ. Ngoài ra, Insight giúp lọc nhiễu. Bài gốc thường có phần giới thiệu, ví dụ, hướng dẫn, lỗi thường gặp và nhiều đoạn lặp lại để người đọc tự học theo. Bản tóm tắt sẽ gom những ý quan trọng nhất vào một cấu trúc dễ nhìn, dễ nhớ, dễ quyết định có nên đọc tiếp hay không.

Bạn không cần hiểu hết từ chuyên môn mới nắm được nội dung. Chúng tôi diễn giải các khái niệm khó bằng ngôn ngữ đời thường, để bạn nhanh chóng biết “công cụ này dùng để làm gì”, “nó có hữu ích với mình không”, và “nên cẩn thận điều gì”. Đó là cách đọc thông tin hiện đại: nhanh hơn, gọn hơn, nhưng vẫn đủ chính xác để dùng được ngay.