Published about 4 hours ago 8 min read

Cách Dùng Figma MCP Để AI Tự Động Code Giao Diện Flutter

Lời mở đầu

Chào các bạn developer và designer! Việc chuyển đổi từ bản vẽ Figma sang code Flutter thường tốn rất nhiều thời gian "cày cuốc" thủ công. Nhưng với sự ra đời của Figma MCP (Model Context Protocol), thì việc này đã trở nên dễ dàng hơn rất nhiều. Hôm nay, mình sẽ hướng dẫn các bạn cách biến AI thành một "trợ lý lập trình" thực thụ, có thể đọc trực tiếp thiết kế Figma của bạn và viết mã Flutter chuẩn chỉnh.

Figma MCP là gì?

Figma MCP là một máy chủ triển khai giao thức Model Context Protocol (MCP), đóng vai trò như một "cầu nối" tiêu chuẩn hóa giữa các tài nguyên trên Figma và các mô hình ngôn ngữ lớn (LLMs) như Claude, Cursor,...

Bản chất: Thay vì AI chỉ "nhìn" hình ảnh một cách cảm tính, Figma MCP kết nối trực tiếp với API của Figma để cung cấp các ngữ cảnh có cấu trúc và tiêu chuẩn hóa.
Chức năng chính: Nó cho phép AI truy cập, đọc và hiểu sâu các yếu tố thiết kế như tệp tin (files), thành phần (components), kiểu dáng (styles) và biến (variables),...
Lợi ích: Công cụ này giúp tự động hóa các tác vụ thiết kế, trích xuất dữ liệu thiết kế trực tiếp vào môi trường lập trình (IDE) và đảm bảo mã nguồn được tạo ra khớp hoàn toàn với hệ thống thiết kế (Design System).

Figma-Flutter-MCP là gì?

Figma-Flutter-MCP là một máy chủ MCP chuyên biệt được phát triển dựa trên nền tảng Figma MCP nhưng được tối ưu hóa riêng cho hệ sinh thái Flutter.

Mục tiêu cốt lõi: Cung cấp các Design Tokens (thông số thiết kế) từ Figma cho AI dưới dạng ngữ cảnh mà AI có thể hiểu để viết mã Flutter chuẩn chỉnh,...
Cách thức hoạt động:
- Trích xuất dữ liệu chi tiết: Lấy thông tin về bố cục (layout), kích thước, màu sắc, nội dung văn bản và các thành phần lồng nhau từ các nút (nodes) trên Figma.
- Phân tích cấu trúc: AI sẽ phân tích các thành phần con và tầm quan trọng về mặt thị giác để gợi ý các Flutter Widgets và các mẫu triển khai phù hợp.
- Hỗ trợ đặc thù cho Flutter: Công cụ này tập trung vào việc thiết lập Theme, Typography, xây dựng cây Widget (Widget tree) và hỗ trợ xuất các tài sản hình ảnh (Assets) vào đúng thư mục dự án Flutter.

Điểm khác biệt: Khác với các trình tạo code thông thường, nó không chỉ tạo ra mã thô mà tập trung vào việc giúp AI hiểu thiết kế theo "cách của Flutter" (Flutter way), từ đó tạo ra mã nguồn dễ bảo trì và đúng cấu trúc dự án. Figma MCP là nền tảng chung, còn Figma-Flutter-MCP chính là "vũ khí" đắc lực giúp hiện thực hóa bản vẽ Figma thành ứng dụng Flutter một cách chuyên nghiệp.

Các bước triển khai

Bước 1: Chuẩn bị công cụ

Để bắt đầu, bạn cần chuẩn bị:

Node.js (v18 trở lên).
Figma API Access Token: Vào cài đặt hồ sơ Figma > Security tab > Personal access tokens > Nhấn Generate new token để tạo token và lưu lại thật kỹ.
Cursor IDE: Trình soạn thảo mã nguồn hỗ trợ MCP cực tốt.
Flutter SDK đã được cài đặt sẵn.

Bước 2: Thiết lập máy chủ Figma Flutter MCP

Bạn có thể chạy máy chủ này nhanh chóng thông qua lệnh npx. Đối với Flutter, hãy sử dụng repo chuyên biệt là figma-flutter-mcp: Dành cho Windows (Chạy trong CMD):

"mcpServers": {
   "Figma Flutter MCP": {
     "command": "npx",
     "args": [
       "-y",
       "figma-flutter-mcp",
       "--figma-api-key=YOUR-API-KEY",
       "--stdio"
     ]
   }
 }

(Thay YOUR-API-KEY bằng mã token bạn vừa tạo)

Bước 3: Tích hợp vào Cursor IDE

Mở Cursor, nhấn CMD + Shift + P (hoặc Ctrl + Shift + P).
Gõ và chọn "Open MCP Settings".
Nhấp vào "Add new MCP" và dán cấu hình JSON phía trên vào.
Khi thấy chấm màu xanh hiện lên bên cạnh tên máy chủ, nghĩa là bạn đã kết nối thành công.

Bước 4: Ra lệnh cho AI tạo code Flutter

Bạn chỉ cần sao chép link của một Frame hoặc Component trong Figma (Chuột phải > Copy/Paste as > Copy link to selection) và dán vào Cursor Composer kèm câu lệnh:

Tạo Theme & Typography: "Setup flutter theme from <figma_link> bao gồm màu sắc và font chữ".
Tạo Widget từ Component: "Tạo widget Flutter này từ link component Figma <figma_link>, sử dụng named constructors cho các variant".
Tạo Full Screen: AI sẽ tự động phân tích cấu trúc màn hình (Header, Footer, Content) và gợi ý cấu trúc Scaffold tương ứng. Nếu có hình ảnh (.png, .jpg), nó thậm chí còn hỗ trợ xuất file vào thư mục assets/ và cập nhật pubspec.yaml.

Mẹo để AI làm việc hiệu quả nhất
Để code tạo ra đạt chất lượng cao, bạn nên lưu ý:

Sử dụng Auto Layout: Thiết kế càng chuẩn, AI càng dễ phân tích bố cục chính xác.
Ưu tiên Frame thay vì Group: AI hiểu Frame tốt hơn khi cần xác định cấu trúc widget.
Xử lý SVG riêng biệt: Với các icon dạng SVG, bạn nên gom chúng vào các Frame hoặc Group độc lập để AI xuất file không bị lỗi.
Giai đoạn MVP: Hiện tại, công cụ này hoạt động tốt nhất cho các nhiệm vụ nhỏ, các bản MVP hoặc giải thích tác vụ, chưa khuyến khích dùng cho các dự án quy mô lớn ngay lập tức.

Kết luận Figma MCP kết hợp với Flutter là một bước tiến lớn trong việc tự động hóa quy trình từ thiết kế đến code (Design-to-Code). Nó không chỉ giúp tăng năng suất mà còn đảm bảo sự đồng bộ tuyệt đối giữa UI thực tế và bản vẽ.

Thử nghiệm thực tế

1. Chọn frame Figma cần code UI

Mở Design trên Figma click phải vào phần design muốn code và chọn Copy link to selection

2. Ra lệnh cho AI code

Mở Project bằng Cursor AI IDE, nhập vào khung nhập lệnh câu lệnh mà bạn muốn AI thực hiện. Ví dụ:

Implement this design from Figma.  
@https://www.figma.com/design/tft24X1sRMBl2sQpXdevha/MyProject?node-id=2468-3514&m=dev

Ghi chú: AI vẫn thực hiện lệnh tốt với tiếng Việt

Kết quả:

Sau khi lệnh chạy xong kiểm tra file trong dự án thì các file được sinh ra đúng cấu trúc dự án, đúng kiến trúc đang dùng. AI tạo luôn màn hình để check các component (Tự thêm màn hình vào Router chỉ cần gọi là dùng được)

Tạo component: UI dựng tốt, tương đối đầy đủ trạng thái, chỉ cần chỉnh sửa 1 phần nhỏ là có thể dùng theo yêu cầu
Tạo cả màn hình: Dựng cả màn hình thì kết quả hiện tại tương đối không được như design. Hi vọng tương lai AI sẽ tạo tốt hơn!

Hãy thử cài đặt và trải nghiệm ngay để thấy việc code UI Flutter chưa bao giờ nhàn đến thế! Chúc các bạn thành công!