Connect Claude to Figma with MCP có gì mới?

• Claude là một trợ lý AI có thể “nói chuyện” với Figma thay bạn.
• Nhờ MCP, Claude có thể đọc file, lấy màu, xem biến thiết kế và tạo một số thành phần trong Figma.
• Bạn không cần copy-paste qua lại giữa AI và Figma như trước.
• Cách cài đặt có hai kiểu: dùng dòng lệnh đầy đủ tính năng hoặc dùng chế độ trên trình duyệt dễ hơn.
• Công cụ này hữu ích nhất khi cần lấy dữ liệu thiết kế, quản lý token màu, hoặc làm bản nháp nhanh.

Bài viết gốc giới thiệu cách kết nối Claude với Figma bằng một công cụ tên là **figma-console-mcp**. Nói đơn giản, đây là một “cầu nối” để Claude có thể làm việc trực tiếp với Figma thay vì chỉ trả lời bằng văn bản. Điểm đáng chú ý là người dùng có thể ra lệnh bằng ngôn ngữ tự nhiên. Ví dụ, bạn có thể yêu cầu Claude lấy toàn bộ màu trong file thiết kế và hiển thị giá trị của chế độ sáng và tối cạnh nhau. Hoặc bạn có thể nhờ Claude tạo một khung card có ảnh, tiêu đề và nút hành động, rồi để nó xuất hiện ngay trong canvas Figma.

Đây là một chuẩn kết nối để AI gọi được các công cụ bên ngoài. Thay vì chỉ “đoán” hay viết hướng dẫn, AI có thể thực sự truy cập vào dữ liệu và thao tác trong ứng dụng khác. Trong trường hợp này, **figma-console-mcp** là một phần mềm mã nguồn mở nối Claude với API của Figma. API có thể hiểu là “cổng giao tiếp” để phần mềm nói chuyện với nhau. Nhờ đó, Claude không chỉ đọc nội dung thiết kế mà còn có thể tạo frame, đọc token màu, xem kiểu chữ, lấy ảnh chụp màn hình của canvas, và kiểm tra mức độ khớp giữa thiết kế và code. Công cụ này được tác giả mô tả như một cách giảm các thao tác lặp đi lặp lại rất tốn thời gian. Thay vì sao chép dữ liệu thủ công từ Figma sang nơi khác, rồi mở thêm tab để tra cứu, bạn chỉ cần trò chuyện với Claude. Có hai cách dùng chính. Nếu bạn có Node.js và quen với terminal, bạn có thể cài theo hướng đầy đủ tính năng.

Nếu bạn không muốn đụng tới dòng lệnh nhiều, có chế độ dùng qua trình duyệt, ít công cụ hơn nhưng dễ bắt đầu hơn. Điểm cần nhớ là dù AI có thể hỗ trợ rất nhiều, nó không thay thế hoàn toàn tư duy thiết kế của con người. AI phù hợp nhất ở khâu lấy dữ liệu, tạo bản nháp nhanh và kiểm tra tính nhất quán. Phần tinh chỉnh cuối cùng như khoảng cách, nhịp thị giác, hệ thống thiết kế, và cảm giác tổng thể vẫn cần người thiết kế xem lại. Nói ngắn gọn, bài viết này không phải về “AI tự làm thiết kế thay con người”. Nó là về việc để AI làm phần việc lặp lại, còn con người tập trung vào quyết định quan trọng hơn. Dưới đây là những việc Claude có thể làm khi đã kết nối với Figma:

• Đọc token thiết kế, biến và các chế độ như sáng/tối.
• Lấy thông tin từ component, style và cấu trúc của file.
• Tạo frame, hình khối và chữ ngay trong Figma.
• Quản lý bộ biến và các nhóm biến.
• Chụp màn hình canvas để xem nhanh trạng thái thiết kế.
• Hỗ trợ kiểm tra độ khớp giữa thiết kế và giao diện thực tế.

Một thuật ngữ dễ gây khó hiểu là **design tokens**. Bạn có thể hiểu token là những “giá trị chuẩn” của hệ thiết kế, ví dụ như màu chính, màu nền, cỡ chữ, khoảng cách, bo góc. Khi mọi thứ được lưu thành token, đội thiết kế và đội kỹ thuật dễ dùng chung một ngôn ngữ hơn. Một khái niệm nữa là **variables** hay biến thiết kế. Đây là nơi lưu các giá trị có thể thay đổi theo bối cảnh, ví dụ chế độ sáng, chế độ tối, hoặc các trạng thái khác nhau của cùng một thành phần. Nếu làm tốt, việc đổi theme sẽ nhanh hơn và nhất quán hơn.

**Phải dùng Figma Desktop**. Nghĩa là bản ứng dụng cài trên máy tính, không phải chỉ dùng trên web. Lý do là công cụ cần kết nối trực tiếp và ổn định hơn với plugin của Figma. Quy trình thiết lập trong bài khá gọn, dù có một vài bước kỹ thuật. Trước hết, người dùng cần tạo một **Figma Personal Access Token**. Đây là một mã xác thực để phần mềm được phép truy cập Figma của bạn. Sau đó, thêm MCP server vào Claude. Nếu dùng Claude Desktop hoặc Claude Code, bạn cấu hình để Claude biết chạy công cụ nào và dùng token nào. Nếu dùng bản desktop, bạn cũng cần một đoạn cấu hình để Claude nhận diện được máy chủ MCP. Bước tiếp theo là cài một plugin tên **Figma Desktop Bridge** trong Figma. Plugin này đóng vai trò như “cửa nối” giữa Figma và Claude. Sau khi cài xong, bạn mở plugin đó trong file Figma đang làm việc để thiết lập kết nối. Cuối cùng, bạn khởi động lại Claude rồi kiểm tra kết nối.

Nếu mọi thứ đúng, bạn có thể thử ra lệnh rất đơn giản như tạo một frame nền xanh để xem hệ thống có hoạt động hay không.

• Bạn nói yêu cầu bằng chữ bình thường.
• Claude hiểu yêu cầu đó và quyết định có cần dùng công cụ Figma hay không.
• MCP server nhận lệnh từ Claude.
• Plugin trong Figma thực thi thao tác tương ứng.
• Kết quả trả lại cho Claude và hiển thị cho bạn.

Điều hay ở đây là bạn không phải tự chọn từng công cụ một cách thủ công. Claude sẽ tự quyết định khi nào cần đọc dữ liệu, khi nào cần tạo đối tượng, và khi nào chỉ cần trả lời bằng văn bản. Tác giả cũng liệt kê một số lỗi thường gặp. Nếu plugin không kết nối, nguyên nhân hay gặp nhất là đang dùng Figma trên trình duyệt thay vì Figma Desktop. Nếu báo không có kết nối активе, có thể plugin chưa chạy trong đúng file. Nếu biến thiết kế hiển thị trống, khả năng cao là plugin chưa mở trong cùng file chứa các biến đó. Nếu gặp lỗi xác thực, hãy kiểm tra token có đúng định dạng và bắt đầu bằng tiền tố `figd_`. Một số xung đột cổng kết nối cũng đã được công cụ tự xử lý, nên người dùng thường không cần can thiệp sâu. Phần kết của bài viết khá thực tế. Tác giả không nói rằng AI sẽ thay thế designer, mà chỉ ra những nơi AI làm rất tốt. Đó là khâu trích xuất dữ liệu, quản lý token, và tăng tốc thử nghiệm ý tưởng.

Nếu bạn là người làm thiết kế hoặc làm việc gần với design system, công cụ kiểu này có thể tiết kiệm nhiều thời gian. Thay vì lục từng màn hình để tìm màu sắc hay component, bạn có thể yêu cầu AI tổng hợp giúp.

• Kiểm tra toàn bộ màu trong file thiết kế.
• So sánh chế độ sáng và tối.
• Tạo nhanh khung giao diện mẫu cho một ý tưởng mới.
• Audit hệ thống thiết kế để xem tên gọi, token và component có nhất quán không.
• Tìm nhanh vấn đề lệch giữa thiết kế và bản code.

Đây không phải phép màu, mà là công cụ tăng tốc. Nó giúp bớt việc tay chân, bớt chuyển qua lại giữa nhiều tab, và bớt nhập lại cùng một dữ liệu nhiều lần. Nhưng cũng vì vậy, người dùng cần hiểu đúng kỳ vọng. Claude có thể dựng bản nháp nhanh, nhưng không nên để AI quyết định toàn bộ chất lượng cuối cùng. Một layout đẹp trên màn hình chưa chắc đã là layout tốt nếu chưa được kiểm tra kỹ về độ dùng được, tính nhất quán và khả năng triển khai.

AI không chỉ viết nội dung hay tạo code, mà còn có thể “chạm” vào công cụ thiết kế. Với Figma và Claude, bạn có thêm một cách làm việc ít rào cản hơn, nhất là khi cần lấy dữ liệu nhanh hoặc tạo bản thử nghiệm ban đầu.

Insight giúp bạn nắm được nội dung cốt lõi của một bài dài mà không phải đọc hết từ đầu đến cuối. Với những bài có nhiều thuật ngữ như MCP, token, plugin hay API, bản tóm tắt sẽ chuyển chúng thành ngôn ngữ đời thường, dễ hiểu hơn rất nhiều. Lợi ích lớn nhất là tiết kiệm thời gian. Thay vì mất 10–15 phút để đọc bài gốc và tự lọc ý, bạn có thể hiểu nhanh: công cụ này làm gì, dùng khi nào, và có giới hạn gì. Điều đó rất hữu ích nếu bạn là designer, product, marketer, quản lý, hoặc đơn giản là người muốn cập nhật xu hướng AI nhưng không muốn sa đà vào chi tiết kỹ thuật. Ngoài ra, Insight giúp lọc bớt phần nhiễu. Các bài công nghệ thường có nhiều bước cài đặt, nhiều từ chuyên môn và nhiều đoạn lặp lại ý chính. Bản tóm tắt sẽ giữ lại những điều quan trọng nhất, để bạn quyết định có nên đọc sâu thêm hay không. Với nhịp làm việc hiện nay, việc nắm nhanh ý chính đôi khi quan trọng hơn đọc thật dài.

Insight được viết theo hướng đó: ngắn gọn, rõ ràng, đủ hiểu, và đủ thực tế để bạn áp dụng ngay vào công việc hoặc cuộc trò chuyện hằng ngày.