Sử dụng AI agent trên Figma canvas

Sử dụng các AI agent để thiết kế trực tiếp trên Figma canvas của bạn. Thiết lập MCP, tạo màn hình từ văn bản, áp dụng hệ thống thiết kế của bạn và viết các skill tùy chỉnh.

Những gì bạn sẽ học được

• Giải thích cách hoạt động của các tính năng AI của Figma - Make để tạo trong ứng dụng và MCP để truy cập bởi những agent bên ngoài

• Sử dụng Figma Make để tạo thiết kế giao diện người dùng từ mô tả văn bản

• Áp dụng thiết lập Figma MCP server để kết nối các agent lập trình AI như Claude Code với canvas của bạn

• Thiết kế các prompt tạo ra những thành phần phù hợp với hệ thống thiết kế thay vì các phần tử được hardcode

• Tạo Figma Skills tùy chỉnh mã hóa những quy ước thiết kế của nhóm bạn để có đầu ra AI nhất quán

• Đánh giá khi nào các thiết kế do AI tạo ra đã sẵn sàng cho sản xuất và khi nào chúng cần được tinh chỉnh thủ công

Sau khóa học này, bạn có thể

• Tạo màn hình giao diện người dùng từ mô tả văn bản bằng Figma Make và tinh chỉnh chúng đến chất lượng sản xuất

• Kết nối các agent lập trình AI với Figma canvas của bạn thông qua MCP để có quy trình làm việc từ thiết kế đến mã hóa mà không cần chuyển giao thủ công

• Viết Figma Skills tùy chỉnh mã hóa các quy ước thiết kế của nhóm bạn để có đầu ra do AI tạo ra nhất quán

• Đánh giá các thiết kế do AI tạo ra một cách nghiêm túc, biết khi nào đầu ra đã sẵn sàng cho sản xuất và khi nào cần được con người tinh chỉnh

• Thêm chuyên môn về quy trình thiết kế hỗ trợ AI vào portfolio của bạn — một skill mà 91% nhà thiết kế cho rằng giúp cải thiện công việc của họ

Những gì bạn sẽ xây dựng

Thiết kế màn hình do AI tạo ra

Một màn hình giao diện người dùng hoàn chỉnh được xây dựng bằng các AI agent của Figma - từ prompt văn bản đến việc căn chỉnh hệ thống thiết kế, ứng dụng skill tùy chỉnh và hoàn thiện cuối cùng - với tài liệu về quy trình tinh chỉnh từ AI sang con người.

Gói Figma skill tùy chỉnh

Một Figma skill có thể tái sử dụng mã hóa các quy tắc thiết kế của nhóm bạn - khoảng cách, kiểu chữ, cách sử dụng thành phần - để những thiết kế do AI tạo ra tự động phù hợp với hệ thống của bạn.

Khả năng áp dụng AI agent trong Figma

Chứng minh bạn có thể sử dụng Figma Make, thiết lập kết nối MCP server, viết skill tùy chỉnh và tạo ra đầu ra AI phù hợp với hệ thống thiết kế.

AI trên canvas thiết kế của bạn

Hãy xem các AI agent đang thay đổi quy trình thiết kế trong Figma như thế nào - điều gì có thể thực hiện được ngay hôm nay, điều gì bị thổi phồng quá mức và tại sao 85% người cảm thấy không chắc chắn về chất lượng AI lại đang đặt câu hỏi sai.

Điều gì thay đổi trong thanh công cụ Figma của bạn?

Mở Figma và bạn sẽ nhận thấy những thứ không có ở đó cách đây một năm. Một nút "Make". Các tính năng AI mới được tích hợp vào menu. Có thể một đồng nghiệp đã đề cập đến việc kết nối Claude với file Figma của họ và bạn chưa biết đó là gì.

AI đã xuất hiện trên canvas thiết kế. Không phải dưới dạng một khái niệm hay một bản trình bày ý tưởng, mà là những công cụ thực tế tạo ra, chỉnh sửa và lặp lại các thiết kế trong khi bạn quan sát.

Nhưng vấn đề là hầu hết các nhà thiết kế hoặc là hoàn toàn bỏ qua nó hoặc là kỳ vọng nó làm mọi thứ. Cả hai nhóm đều đang bỏ lỡ điều gì đó.

72% nhà thiết kế đã sử dụng một số hình thức AI trong công việc của họ. Nhưng chỉ 15% cảm thấy tự tin về chất lượng những gì AI tạo ra. Khoảng cách đó không phải là vấn đề với các công cụ. Đó là vấn đề với cách mọi người sử dụng chúng.

Sau khi hoàn thành khóa học này, bạn sẽ có thể:

• Sử dụng Figma Make để nhanh chóng tạo và khám phá các ý tưởng thiết kế

• Kết nối các AI agent bên ngoài với Figma canvas của bạn thông qua MCP

• Hướng dẫn các agent tuân theo hệ thống thiết kế của bạn - những token, thành phần, quy ước đặt tên

• Viết các skill để dạy AI những quy tắc cụ thể của nhóm bạn

• Xây dựng các màn hình hoàn chỉnh bằng cách sử dụng AI làm đối tác sản xuất

Bạn sẽ không học cách giao công việc của mình cho robot, mà là cách điều khiển robot.

Hai tính năng, hai triết lý

Đây là điều khiến hầu hết các nhà thiết kế bối rối: Figma không có "một AI". Nó có hai cách tiếp cận hoàn toàn khác nhau.

Figma Make

Make là AI tích hợp trong ứng dụng. Bạn chọn một khung, mô tả những gì bạn muốn bằng tiếng Anh đơn giản, và Figma sẽ tạo ra nó. Không cần code. Không cần thiết lập. Chỉ cần nhập và sử dụng.

Hãy coi Make như một công cụ phác thảo nhanh. Nó rất tuyệt vời để khám phá các ý tưởng một cách nhanh chóng. Không quá tuyệt vời cho các màn hình sẵn sàng sản xuất. (Chi tiết hơn ở Bài 2).

Truy cập MCP agent

MCP là viết tắt của Model Context Protocol - một tiêu chuẩn cho phép các AI agent bên ngoài (Claude Code, Cursor, VS Code Copilot, Gemini CLI, và những agent khác) kết nối với Figma và ghi trực tiếp vào canvas của bạn.

Điều này khác với Make ở một điểm cơ bản. Với MCP, AI agent có thể:

• Đọc các thành phần và token thiết kế hiện có của bạn

• Tạo khung mới bằng cách sử dụng các thành phần đó

• Chụp ảnh màn hình kết quả đầu ra của chính nó và so sánh với kỳ vọng

• Lặp lại cho đến khi kết quả khớp với những gì bạn đã mô tả

Nó ít giống "đũa thần" hơn mà giống "một nhà thiết kế trẻ rất nhanh nhẹn, tuân theo hướng dẫn một cách chính xác".

✅ Kiểm tra nhanh: Bạn có thể kể tên hai cách AI hoạt động trong Figma không? Sự khác biệt chính giữa chúng là gì?

Câu trả lời: Make được tích hợp sẵn và không cần thiết lập; MCP kết nối các agent bên ngoài có thể đọc hệ thống thiết kế của bạn và lặp lại trên đầu ra.

Cơ hội thực sự

Hãy thành thật về những gì các AI agent giỏi trong thiết kế và những gì chúng không giỏi.

Điểm mạnh của các agent:

• Tạo ra nhiều biến thể màn hình từ một mô tả duy nhất

• Xây dựng các phiên bản của những thành phần hiện có trên nhiều trang

• Điền nội dung thực tế vào màn hình

• Tạo thông số kỹ thuật về khả năng truy cập (nhãn ARIA, chú thích VoiceOver)

• Đồng bộ hóa các toekn thiết kế giữa code và Figma

Điểm yếu của các agent:

• Định hướng sáng tạo độc đáo

• Các quyết định bố cục tinh tế phụ thuộc vào ngữ cảnh người dùng

• Thiết kế đáp ứng trên nhiều điểm ngắt

• Duy trì thứ bậc trực quan trên các trang phức tạp

• Biết khi nào một thứ gì đó "cảm thấy đúng"

Mô hình: Các agent tự động xử lý khối lượng công việc. Bạn xử lý tầm nhìn.

Một nhà thiết kế tại monday.com mô tả những nỗ lực ban đầu của họ với các tính năng AI của Figma như gặp phải bế tắc - đầu ra cần quá nhiều chỉnh sửa đến nỗi không rõ liệu nó có tiết kiệm thời gian hay không. Nhưng các nhà thiết kế coi AI như một đối tác sản xuất chứ không phải là một sự thay thế luôn báo cáo những kết quả khác nhau. Brian Lovin, một nhà thiết kế đã thử nghiệm rộng rãi các MCP agent, đã tìm thấy độ chính xác ~85% trong khoảng hai phút trên các file được cấu trúc tốt.

Sự khác biệt là nhóm thứ hai có hệ thống thiết kế sạch sẽ và hướng dẫn rõ ràng. Họ coi AI như một đồng nghiệp có năng lực nhưng tư duy theo nghĩa đen - chứ không phải là người đọc suy nghĩ.

✅ Kiểm tra nhanh: Nếu một AI agent tạo ra hình ảnh có độ chính xác 85% trong hai phút, thì nhà thiết kế vẫn cần làm gì?

Đáp án: Xem lại kết quả, sửa 15% còn lại - các vấn đề về khoảng cách, thứ tự ưu tiên hình ảnh, những trường hợp ngoại lệ - và đưa ra các quyết định sáng tạo mà agent không thể làm được.

Những thứ bạn cần:

• Một tài khoản Figma (gói miễn phí dùng được cho Bài học 1-2; gói Professional dùng được cho MCP)

• Một trợ lý AI hỗ trợ MCP (Claude Code, Cursor, hoặc tương tự)

• Sẵn lòng thử nghiệm. Kết quả đầu ra của AI không mang tính xác định — cùng một lệnh, nhưng kết quả khác nhau mỗi lần. Đó là một tính năng bạn sẽ làm được khi đã học cách sử dụng nó.

Khóa học này ở trình độ trung cấp. Bạn nên nắm vững các kiến ​​thức cơ bản về Figma - khung, thành phần, bố cục tự động, token thiết kế. Nếu các thuật ngữ như "thể hiện thành phần" hoặc "biến thiết kế" còn xa lạ, hãy tham gia một khóa học Figma dành cho người mới bắt đầu trước.

Một mẹo nhỏ trước Bài học 2

Bạn muốn xem Figma Make có thể làm được gì ngay bây giờ? Đây là bài kiểm tra 30 giây:

1. Mở bất kỳ file Figma nào

2. Tạo một khung trống (kích thước 1440 x 900 sẽ ổn)

3. Chọn khung

4. Tìm tùy chọn Make (hoặc nhấn shortcut nếu gói của bạn hỗ trợ)

5. Nhập: "Một trang cài đặt với thanh điều hướng bên, phần profile người dùng và tùy chọn thông báo"

6. Xem kết quả hiển thị

Đừng đánh giá kết quả quá khắt khe - hoặc quá hào phóng. Chỉ cần chú ý những gì nó làm đúng và những gì nó làm sai. Kỹ năng quan sát đó là điều phân biệt các nhà thiết kế sử dụng AI hiệu quả với những người không sử dụng.

✅ Kiểm tra nhanh: Bạn vừa thử Figma Make lần đầu tiên. Bạn nên chú ý đến điều gì?

Đáp án: AI làm đúng những gì, làm sai những gì và khoảng cách giữa kỳ vọng của bạn và kết quả. Khoảng cách đó là điều mà phần còn lại của khóa học này sẽ dạy bạn cách thu hẹp.

Thử ngay: Chọn lộ trình khởi đầu AI trong Figma

Mở Claude, ChatGPT hoặc Gemini (giữ Figma mở trong một tab khác):

Hãy đóng vai trò là người hướng dẫn tôi làm quen với Figma AI. Giúp tôi quyết định xem nên bắt đầu với Figma Make hay MCP agents, và cho tôi một bài test thử nghiệm đầu tiên trong 20 phút để tạo ra kết quả mà tôi có thể so sánh với kỳ vọng của mình.

Về tôi:
- Gói Figma (Miễn phí / Chuyên nghiệp / Tổ chức / Doanh nghiệp): []
- Vai trò (nhà thiết kế sản phẩm / UX / thiết kế hình ảnh / độc lập / kỹ sư thiết kế / khác): []
- Mức độ quen thuộc với Figma (người mới bắt đầu / trung cấp / nâng cao): []
- Tôi có hệ thống thiết kế trong file của mình không (có, mạnh / có, lỏng lẻo / không / mới bắt đầu): []
- Dự án tôi sẽ thử nghiệm: []
- AI agent tôi đang sử dụng (Claude Code / Cursor / VS Code Copilot / Gemini CLI / chưa có): []
- Mục tiêu lớn nhất về AI cho thiết kế trong 30 ngày tới: []
- Điều tôi hoài nghi nhất về AI trong thiết kế: []

Nội dung cần nộp:
1. CHỌN LỰA CHỌN BAN ĐẦU — Tạo hoặc MCP, kèm lý do liên quan đến kế hoạch của TÔI, độ hoàn thiện của hệ thống và mục tiêu
2. THÍ NGHIỆM ĐẦU TIÊN TRONG 20 PHÚT — kích thước khung hình chính xác, prompt chính xác, những gì cần chụp màn hình trước/sau
3. TIÊU CHÍ ĐÁNH GIÁ — 5 điều cụ thể cần đánh giá trong kết quả đầu ra (bố cục) (phân cấp / token / khả năng truy cập / trường hợp ngoại lệ)
4. HIỆU CHỈNH KỲ VỌNG — "độ chính xác 85% trong 2 phút" trông như thế nào so với những gì tôi thực sự sẽ thấy trong lần thử đầu tiên
5. ĐIỀU KIỆN TIÊN QUYẾT CỦA HỆ THỐNG THIẾT KẾ — 3 hành động dọn dẹp nhanh chóng trên file của tôi sẽ cải thiện đáng kể đầu ra của AI
6. PROMPT TEMPLATE cho loại màn hình phổ biến nhất của tôi, với các tham chiếu thành phần + token cụ thể
7. KHI NÀO NÊN NGỪNG CHỐNG LẠI AI — 3 tín hiệu cho thấy nhiệm vụ cụ thể này chưa phải là việc của AI
8. CÁC BƯỚC TIẾP THEO — những gì Bài học 2-3 của khóa học này sẽ mở khóa sau thử nghiệm đầu tiên của tôi

QUY TẮC BẮT BUỘC:
- Hãy kỳ vọng vào sự lặp lại, không phải phép màu. Kết quả đầu tiên hiếm khi được xuất xưởng nguyên trạng.
- Hệ thống thiết kế sạch sẽ > prompt thông minh. Đầu tư vào token và các thành phần được đặt tên trước khi đổ lỗi cho AI.
- Make dành cho khám phá, MCP dành cho sản xuất. Chọn công cụ phù hợp cho nhiệm vụ.
- Đừng đánh giá AI dựa trên kết quả tệ nhất hay tốt nhất của nó — hãy đánh giá dựa trên giá trị trung bình mỗi phút so với mức giá theo giờ của bạn.
- AI không thể suy luận về người dùng mà nó chưa gặp. Các quyết định về sản phẩm/trải nghiệm người dùng vẫn cần đến bạn.
- Khi MCP ghi vào canvas của bạn, hãy quản lý phiên bản file. Các agent có thể ghi đè lên công việc đã thực hiện.
- Đối với các dự án của khách hàng: hãy tiết lộ việc sử dụng AI khi sản phẩm bàn giao được tạo ra bởi AI chứ không phải được hỗ trợ bởi AI. Hợp đồng rất quan trọng.
- Về khả năng truy cập: AI soạn thảo các thông số kỹ thuật ARIA + VoiceOver, bạn cần xác minh. Các công cụ tự động thường bỏ sót ngữ cảnh.
- Đừng chấp nhận kết quả vi phạm nguyên tắc thương hiệu của bạn. AI không biết thương hiệu của bạn trừ khi bạn dạy nó.

Những gì bạn sẽ thấy: Lựa chọn lộ trình khởi đầu + Thử nghiệm đầu tiên 20 phút + Bảng đánh giá + Prompt template cho loại màn hình của bạn.

Những điểm chính cần ghi nhớ

• Figma có hai phương pháp AI khác biệt: Make (thiết kế dựa trên văn bản tích hợp) và MCP (các agent bên ngoài viết trực tiếp lên canvas)

• 72% nhà thiết kế sử dụng AI, nhưng chỉ 15% cảm thấy tự tin về chất lượng - khoảng cách nằm ở kỹ thuật, không phải công cụ

• Các AI agent xử lý khối lượng (biến thể, trường hợp, điền nội dung); bạn xử lý tầm nhìn (định hướng sáng tạo, đánh giá UX)

• Hệ thống thiết kế được cấu trúc tốt và hướng dẫn rõ ràng là yếu tố tạo nên sự khác biệt giữa độ chính xác 50% và 85%

• Khóa học này bao gồm cả hai phương pháp trong 8 bài học, từ các Make prompt đến việc xây dựng màn hình hoàn chỉnh với những agent.