Hướng dẫn Figma AI đầy đủ: từ Make dựng bản nháp đến MCP giao hàng, quy trình thiết kế rốt cuộc thay đổi gì

AI của Figma đã không chỉ là "giúp bạn sửa hình". Năm 2026 nó có tác nhân thiết kế sinh UI thẳng trên canvas, Make chuyển prompt thành mã, MCP Server cho tác nhân viết mã dùng. Bài này bóc cả quy trình ra nói, và nói rõ những việc nó vẫn chưa làm được.

Hướng dẫn Figma AI đầy đủ: từ Make dựng bản nháp đến MCP giao hàng, quy trình thiết kế rốt cuộc thay đổi gì

Mười giờ sáng, một nhà thiết kế ở một startup SaaS mở Figma, chuẩn bị làm phiên bản trang gói đăng ký tiếp theo. Trước đây cô sẽ mở một canvas trắng ngồi thẫn thờ hai mươi phút, giờ cô gõ một đoạn prompt, chọn hệ thống thiết kế của công ty, bốn mươi giây sau trên màn hình xuất hiện ba hướng bố cục.

Cô nhìn ba giây, nói một câu: "Đều không đúng, nhưng tôi biết phải sửa về hướng nào rồi."

Câu này đại khái chính là giá trị thật của Figma AI năm 2026 — nó không giúp bạn làm ra thiết kế đúng, nhưng nó có thể cực nhanh cho bạn thấy "cái không đúng" trông ra sao. Mà với công việc thiết kế, giá trị của việc này bị đánh giá thấp nghiêm trọng.

AI của Figma hiện rốt cuộc có những gì

Trải bản đồ ra trước. AI của Figma năm 2026 đã trải khắp từ tạo nội dung, chỉnh sửa hình ảnh, tìm kiếm thông minh, dựng nháp UI, giao mã đến dựng cả website, chủ yếu gồm mấy mảng:

Tác nhân thiết kế trên canvas: sinh UI thẳng trên canvas của bạn, chứ không ném cho bạn một tấm hình.

Make: chuyển prompt thành mã, từ một đoạn mô tả tạo ra hướng đi chạy được.

First Draft: nhanh chóng sinh bản nháp bố cục UI.

Sinh hình ảnh và thay nội dung: tạo hình ảnh, và thay chữ giả trong bản thiết kế bằng nội dung ra dáng.

Gợi ý Auto layout: tự động phán đoán cấu trúc dàn trang.

MCP Server: cho tác nhân viết mã dùng, để công cụ AI viết mã đọc hiểu được file thiết kế của bạn.

Skills: lệnh tùy chỉnh của tác nhân, tương đương dạy nó cách làm việc của đội bạn.

Sites: xuất bản website.

Draw: vẽ minh họa có AI hỗ trợ.

Buzz: tạo nội dung thương hiệu.

Danh sách rất dài, nhưng thực tế dùng đến hằng ngày chỉ ba đến bốn cái. Dưới đây là quy trình thực tế tôi khuyên.

Bước một: giai đoạn phát ý tưởng dùng Make hoặc First Draft sinh ba đến bốn hướng

Đừng ngay từ đầu đã muốn sinh ra "cái đúng". Đây là lỗi đầu tiên đa số người mắc khi dùng công cụ thiết kế AI — họ viết một đoạn prompt rất dài, kỳ vọng một phát ăn ngay, rồi thất vọng với kết quả.

Cách dùng đúng là sản xuất hàng loạt hướng. Cách làm thực tế:

Mở Figma Make, sinh vài lựa chọn bố cục cho chức năng mới. Trong prompt phải viết rõ hai điều: nhu cầu người dùng là gì, và chọn hệ thống thiết kế của bạn. Điều thứ hai nhiều người bỏ sót, nhưng nó quyết định sản phẩm ra có dùng được không — không chỉ định hệ thống thiết kế, AI sẽ cho bạn một bộ màu và thành phần hoàn toàn xa lạ, trông đẹp nhưng chẳng liên quan gì đến sản phẩm của bạn.

Sinh xong đừng vội chọn cái đẹp nhất. Chọn "cái có cấu trúc gần nhất với thứ bạn muốn", phần thị giác có thể sửa sau, cấu trúc sai thì cả cái phải làm lại.

Thói quen của tôi là sinh bốn cái, rồi tự hỏi: nếu chỉ được giữ một, tôi sẽ giữ cái nào? Giữ xong lại hỏi: tôi vì sao giữ nó? Đáp án của câu hỏi thứ hai thường mới là nhu cầu thật của lần thiết kế này.

Bước hai: kéo khung đã sinh vào file làm việc, sắp xếp layer trước

Bước này chán nhất, cũng nhiều người bỏ qua nhất, rồi trả giá khi giao hàng.

Sau khi kéo các frame đã sinh vào file làm việc, chạy công cụ Rename layers để lập trình viên đọc hiểu được file của bạn. Tên layer do AI sinh thường là kiểu Frame 427, Group 88, kỹ sư mở ra chỉ muốn khóc.

Việc này năm 2026 quan trọng hơn trước, lý do là MCP. Khi tác nhân viết mã đọc thẳng file thiết kế của bạn, đặt tên layer không còn chỉ là vấn đề lịch sự — nó là vấn đề chất lượng đầu vào. Tên đặt lung tung thì mã AI sinh ra cấu trúc cũng lộn xộn theo.

Bước ba: dùng Replace content thay chữ giả

Nhấn Replace content, thay các chữ giữ chỗ còn lại bằng dữ liệu thật ra dáng.

Giá trị của bước này không ở tiết kiệm thời gian, mà ở phơi bày vấn đề. Chữ giả (Lorem ipsum hoặc "chữ tiêu đề") làm mọi thiết kế trông đều hoàn hảo, vì độ dài mỗi cột đều vừa khít. Thay bằng dữ liệu thật rồi bạn mới phát hiện "tiêu đề tiếng Việt này hai dòng là vỡ khung", "cột giá này không chứa nổi bốn chữ số cộng đơn vị tiền tệ".

Nhà thiết kế đặc biệt phải lưu ý điểm này: độ rộng chữ tiếng Việt và tiếng Anh khác nhau, bố cục dàn bằng chữ giả tiếng Anh, thay bằng tiếng Việt có dấu thường vỡ cả. Càng sớm phát hiện càng tốt.

Bước bốn: khi giao hàng thì nối MCP vào

Nếu đội bạn có dùng công cụ AI viết mã, MCP Server của Figma đáng thiết lập. Nó cho tác nhân viết mã lấy được thông tin có cấu trúc của file thiết kế — khoảng cách, màu sắc, phân cấp thành phần, chứ không phải chỉ nhìn một ảnh chụp mà đoán.

Điều này đặc biệt có ý nghĩa với các đội nhỏ. Đa số startup nhỏ không có front-end chuyên trách, sau khi giao thiết kế thường là kỹ sư full-stack vừa tra vừa dựng, khoảng lệch sinh ra chính ở đây. Nối MCP vào, ít nhất để AI lấy được là cấu trúc chứ không phải pixel.

Khi dùng kèm Cursor hoặc công cụ AI viết mã khác, quy trình làm việc sẽ thành: thiết kế chốt trong Figma → MCP cung cấp cấu trúc → tác nhân viết mã tạo phiên bản mã đầu → kỹ sư sửa. Đoạn "dựng chậm theo hình" ở giữa sẽ rút ngắn rõ.

Kỹ thuật nâng cao: dùng Skills dạy nó quy tắc của đội bạn

Skills cho bạn tùy chỉnh lệnh của tác nhân. Chức năng này ít được bàn, nhưng nó là mấu chốt biến AI từ "công cụ thông dụng" thành "công cụ của đội bạn".

Những thứ có thể viết vào ví dụ như: nút của chúng tôi nhất loạt bo góc 8, chúng tôi không dùng đen thuần làm màu chữ, thông báo lỗi biểu mẫu nhất loạt đặt dưới cột, khoảng cách chỉ dùng bội số của 4.

Viết quy chuẩn thiết kế của đội thành Skills, tương đương mỗi lần sinh đều tự động tuân theo. Cách này nhanh hơn nhiều so với sửa từng cái về sau, và làm sản phẩm của nhà thiết kế non tay ổn định hơn.

Lưu ý: ba việc Figma AI hiện vẫn chưa làm được

Một, nó không hiểu người dùng của bạn. Giao diện AI sinh là "giao diện trông hợp lý", không phải "giao diện người dùng của bạn cần". Nó chưa xem phiếu chăm sóc khách hàng của bạn, chưa đọc phỏng vấn người dùng của bạn. Phần này không có đường tắt.

Hai, thiết kế tiếp cận (accessibility) vẫn phải người kiểm. Tương phản màu, thứ tự thao tác bàn phím, nhãn cho trình đọc màn hình, thứ AI sinh ra thường không qua được kiểm tra. Các dự án cơ quan công có yêu cầu quy chuẩn tiếp cận, mảng này tuyệt đối đừng tin giá trị mặc định của AI.

Ba, thiết kế các trạng thái thật. Trạng thái trống, đang tải, lỗi, chữ quá dài, không đủ quyền — những trạng thái "không đẹp nhưng cần thiết" này AI gần như không chủ động sinh cho bạn. Mà chúng thường chiếm một nửa giờ công phát triển thực tế.

Còn một việc phải nói: trước khi dùng thương mại phải xác nhận quyền sở hữu nội dung sinh ra và nguồn tư liệu. Cách an toàn hơn là coi sản phẩm AI như bản nháp cấu trúc, phần tử thị giác vẫn dùng tư liệu tự có hoặc có giấy phép rõ ràng.

Gợi ý thực tế cho nhà thiết kế

Tôi đã trò chuyện với vài nhà thiết kế làm tự do và trong doanh nghiệp, đúc kết ra hai khác biệt cách dùng thực tế.

Nhà thiết kế làm tự do cảm nhận rõ nhất ở giai đoạn đề xuất. Trước đây cho khách xem ba hướng phải mất hai ngày, giờ nửa ngày sinh được sáu cái, rồi dồn thời gian tiết kiệm được vào phiên bản thật sự được nhớ. Nhưng cẩn thận một cái bẫy: khách vì thế sẽ kỳ vọng bạn "dù sao cũng nhanh", báo giá và tiến độ phải đàm phán lại, không thì bạn chỉ nhường lợi nhuận của mình ra.

Nhà thiết kế trong doanh nghiệp cảm nhận rõ nhất ở đoạn phối hợp với kỹ thuật. Giữa thiết kế và kỹ thuật của công ty thường không có lớp trung gian, MCP cộng sắp xếp layer nén được ma sát khi giao hàng.

Còn "AI có thay thế nhà thiết kế không" — quan điểm của tôi rất đơn giản: nó thay thế động tác "vẽ ra thứ đã nghĩ sẵn trong đầu", mà đó vốn là phần ít giá trị nhất trong công việc thiết kế. Nhà thiết kế nghĩ không rõ mình muốn làm gì, dùng AI chỉ nhanh chóng sinh ra nhiều thứ vô dụng hơn.

Nếu bạn muốn bắt đầu từ chỗ cơ bản hơn, có thể xem trước phần tổng hợp công cụ tạo hình ảnh AI, hoặc đến mẫu câu lệnh tìm prompt loại thiết kế áp dụng thẳng được. Muốn đưa AI vào cả quy trình làm việc thì hướng dẫn tác vụ có cách làm sắp theo tình huống.

Học viện TheAI nhận định

Đợt cập nhật này của Figma, hướng đi thực ra rất nhất quán: nó không định thay thế phán đoán của nhà thiết kế, mà bỏ đi ma sát của đoạn "từ số không đến có", đồng thời vá lại khoảng đứt giữa thiết kế và mã. Mảng MCP là thứ tôi cho là bị đánh giá thấp nhất — khi AI bắt đầu đọc thẳng file thiết kế, chất lượng file thiết kế thành thượng nguồn của chất lượng kỹ thuật.

Nhận định: Figma AI làm "vẽ nhanh" thành tiêu chuẩn, thế là "nghĩ đúng" thành khác biệt duy nhất. Thứ nhà thiết kế nên lo không phải bị AI thay thế, mà là tiếp tục định vị mình thành "người thực thi" — vị trí đó quả thật đang biến mất.

Gợi ý cụ thể cho bạn đọc: tuần này chọn một dự án thật, ép mình dùng Make sinh bốn hướng, rồi bỏ thời gian viết ra "vì sao đều không đúng". Bạn sẽ phát hiện danh sách này có giá trị hơn nhiều so với bốn thiết kế kia, vì nó chính là phán đoán thiết kế của bạn — mà đó là thứ AI hiện hoàn toàn không sao chép được. Ngoài ra, nhất định bỏ hai mươi phút viết quy chuẩn thiết kế của đội thành Skills, đây là khoản đầu tư một lần có tỷ suất sinh lời cao nhất.

Nguồn tham khảo

Tổng hợp theo thông tin công khai, căn cứ theo thuyết minh chính thức. Chức năng và nội dung gói có thể thay đổi theo phiên bản, thực tế căn cứ theo công bố chính thức của Figma.

Câu hỏi thường gặp

Giao diện Figma Make sinh ra có lên thẳng được không?

Không nên. Nó tạo ra một bản nháp hướng đi chạy được, phù hợp để thay giai đoạn "trang giấy trắng", nhưng chi tiết bố cục, tiếp cận, trạng thái dữ liệu thật (trạng thái trống, chữ quá dài, đang tải) gần như đều phải làm lại. Coi nó là công cụ tăng tốc 20% đầu, không phải bỏ đi 80% sau.

First Draft khác Make ở đâu? Nên dùng cái nào?

Nói đơn giản, First Draft thiên về nhanh chóng sinh bản nháp bố cục UI trong file thiết kế sẵn có, còn Make là từ prompt trực tiếp tạo ra hướng thành phẩm tương tác được, gần với prompt-to-code hơn. Giai đoạn phát ý tưởng muốn xem ba bốn hướng bố cục cùng lúc thì cả hai đều được; muốn làm nguyên mẫu tương tác bấm được thì Make phù hợp hơn.

MCP Server của Figma làm gì? Người không phải kỹ sư có cần quản không?

Nó cho tác nhân viết mã (ví dụ công cụ AI viết mã) đọc thẳng thông tin file thiết kế của bạn, giảm khoảng lệch "bản thiết kế và mã không khớp". Người không phải kỹ sư không cần tự thiết lập, nhưng nên biết nó tồn tại — vì nó nghĩa là cách đặt tên layer và cấu trúc thành phần của bạn sẽ trực tiếp ảnh hưởng chất lượng thứ kỹ sư nhận được.

Dùng thiết kế do AI sinh có vấn đề bản quyền không?

Trước khi dùng thương mại phải xác nhận hai điều: một là điều khoản gói bạn dùng quy định quyền sở hữu nội dung sinh ra thế nào, hai là hình ảnh sinh ra có gần giống tác phẩm sẵn có không. Thực tế cách an toàn hơn là coi sản phẩm AI như bản nháp cấu trúc, phần tử thị giác vẫn dùng tư liệu tự có hoặc nguồn có giấy phép.

繁體中文版 →