--- title: AI trong Figma là gì? (p2) – từ Figma hỗ trợ prototype, code cho đến AI Agents slug: ai-trong-figma-la-gi-p2-figma-make-to-agent url: https://academy.telos.vn/ai-trong-figma-la-gi-p2-figma-make-to-agent generated_date: 2026-05-26 18:41:35 --- AI trong Figma là gì? --------------------- [Figma](https://academy.telos.vn/khoa-hoc-thiet-ke-giao-dien-voi-figma/) là công cụ thiết kế giao diện phổ biến nhất hiện nay, trước đây họ dùng các nguyên lý thiết kế và xếp đặt layer thủ công để giúp designer thể hiện ý tưởng của mình và tạo ra thành phẩm là những bản thiết kế. Tuy nhiên khi AI xuất hiện, Figma không thể chỉ dừng ở mức là một công cụ để vẽ hoặc minh họa ý tưởng nữa. Figma bổ sung cho hệ thống của nó một loạt các tính năng AI để hỗ trợ người dùng, thậm chí càng lúc càng tham gia nhiều hơn vào các bước trong quy trình thiết kế sản phẩm. Có thể chia các tool AI ra làm 3 nhóm: - **Nhóm 1** hỗ trợ các tác vụ đơn giản trong quá trình làm việc. - **Nhóm 2** là các tool hỗ trợ các tác vụ chuyên môn hơn giúp designer có thể hiện thực hóa ý tưởng hoặc hỗ trợ phần nào của các công việc liên quan như prototype & design-to-code. - **Nhóm 3** là nhóm phức tạp và quan trọng nhất, hiện đang trong quá trình hoàn thiện dần là các AI Agents trực tiếp làm việc trong figma như một cộng sự, hoặc AI MCP (các cổng kết nối) có thể giúp AI khác bước vào hệ thống trích xuất và trực tiếp thực hiện công việc cùng Figma. Ở bài viết trước, TELOS đã điểm qua nhóm 1 gồm các AI tool cơ bản được tích hợp trực tiếp vào workflow hàng ngày: rename layers tự động, gợi ý text, generate background. Bài này tập trung vào 2 nhóm tiếp theo – phức tạp hơn và ảnh hưởng lớn hơn đến cách designer và developer làm việc cùng nhau. *Đọc bài viết phần một:* [AI Trong Figma Là Gì? Cách Bật Figma AI Trong 5 Phút](https://academy.telos.vn/ai-trong-figma/) Và đọc thêm một vài bài viết nói tổng quát về AI và UI/UX Design nha: - [Các quan sát nhanh sau thời gian sử dụng AI cho UI UX Design đầu 2026](https://academy.telos.vn/quan-sat-ai-cho-ui-ux-design-dau-2026/) - [UI/UX Product Design và A.I.; Học sao cho đúng? 5 chỉ dấu cụ thể](https://academy.telos.vn/ui-ux-product-design-va-a-i-hoc-sao-cho-dung/) - [Đừng để bị bỏ lại phía sau: Tìm hiểu A.I. giúp cải thiện UI/UX bằng cách nào?](https://academy.telos.vn/a-i-giup-cai-thien-ui-ux-bang-cach-nao/) Nhóm 2: Các AI prompt-to-code ----------------------------- ### Figma Make – prototype có thể chạy được **Figma Make** là tính năng cho phép người dùng dùng prompt (câu lệnh ngôn ngữ tự nhiên) để tạo ra các đoạn UI code chạy được ngay trong canvas Figma. Khác với prototype thông thường chỉ mô phỏng bề mặt, Figma Make tạo ra UI có logic, có state, và có thể interact thực sự. Đây là một bước cách mạng vào 2025, khi mà giờ đây thay vì phải mô phỏng một animation của thiết kế bằng các editing tool đã có của figma, thì designer có thể biến nó thành một prototype rất gần với thực tế (vì nó tạo ra code) và trong nhiều tình huống nó có thể được copy và dùng được luôn. Các trường hợp sử dụng phổ biến: - **Prototype phức tạp:** Các tính năng mà prototype thông thường không mô phỏng được – dropdown lọc data, form validation, animation có điều kiện. - **Demo cho stakeholder:** Bản demo có thể click, nhập dữ liệu, và phản hồi theo logic thực – thay vì một chuỗi screen tĩnh. Có thể dùng các hệ thống [design system](https://academy.telos.vn/khoa-hoc-ui-design-system/) chặt chẽ làm tiền đề trong prompt và generate nhanh các chức năng để trực quan trong review và testing - **Kiểm chứng ý tưởng nhanh:** Test một UI pattern trước khi đưa vào spec chính thức. Figma Make không phải công cụ để viết production code. Mục đích của nó là rút ngắn thời gian từ ý tưởng đến bản prototype có thể test được. Trong video trên, Figma bổ sung thêm tính năng đính kèm, tạo bộ kit để cải thiện khả năng input của công cụ này. Giúp tạo ra thành phẩm chuẩn với kỳ vọng hơn. ### Figma Make & Figma Sites – design-to-code từ đầu đến cuối [**Figma Sites**](https://hocfigma.nhanluu.com) là tính năng cho phép publish design trực tiếp thành website – có URL, xem được trên browser, không cần server hay kiến thức lập trình. Để hiểu cách hai tính năng này kết hợp, cần biết về **Code Layer** trong Figma. Mỗi design frame trong Figma có thể được map sang code tương ứng (CSS, HTML, React) thông qua tầng gọi là Code Layer. Trước đây, developer phải tự đọc design và viết lại code. Với AI trong Figma, người dùng có thể prompt để generate code layer trực tiếp từ một frame – sau đó Figma Sites đọc code layer đó và biến nó thành một trang web có thể xem trực tiếp trên browser. **Quy trình:** 1. Có một design frame trong Figma 2. Dùng AI để generate code layer cho frame đó 3. Figma Sites đọc code layer và render thành trang web 4. Publish nó thành live site, và người xem có thể thấy nó hoạt động như một trang web thật. Toàn bộ quy trình này diễn ra trong một công cụ duy nhất, không cần chuyển file sang nền tảng khác. Loại hình ứng dụng AI làm code layer này rất phù hợp cho landing page, portfolio, trang giới thiệu sản phẩm – không phải cho các hệ thống phức tạp. Như trong video này, mình đang demo một animation hover chuột và đẩy các chấm tròn ra xa. Mô tả cho AI và nó sẽ tạo ra code layer với các phần code có thể quan sát được và tạo ra hiệu ứng cụ thể. Nhóm 3: MCP và việc xem AI Agents như một user ---------------------------------------------- Figma đã phát triển lớn một phần nhờ chính sách open platform – cho phép developer bên ngoài xây dựng [plugin miễn phí](https://academy.telos.vn/resources/), từ đó tạo ra hệ sinh thái công cụ do cộng đồng đóng góp. Với AI, Figma áp dụng cùng hướng tiếp cận: mở cổng để AI agents từ các nền tảng khác có thể vào làm việc trong Figma thông qua **MCP (Model Context Protocol)**, đồng thời tự phát triển một Design Agent riêng. Giờ đây [AI đột nhiên trở thành một người dùng](https://academy.telos.vn/design-system-voi-ai-la-end-user-part-2/) trong Figma ### MCP (Model Context Protocol) là gì? MCP là tiêu chuẩn mở (open standard) định nghĩa cách các hệ thống AI kết nối với ứng dụng, công cụ, và nền tảng bên ngoài. Theo như cách Figma viết trên blog của họ về định nghĩa MCP, đây là giao thức hai chiều: - Một bên là các ứng dụng (như Figma) xây dựng **MCP server** để cho phép AI truy cập và thao tác với dữ liệu trong phần mềm của họ. - Bên kia là các AI tool (như Claude, Cursor, Copilot) tích hợp **MCP client** để kết nối vào các server đó, lấy context và thực hiện tác vụ. Figma đã phát hành MCP server riêng của họ, đặt tên là `use_figma`. Thông qua đó, các AI model bên ngoài có thể đọc cấu trúc design, hiểu component library, lấy token, và dùng thông tin đó để generate code hoặc thực hiện thay đổi – mà không cần người dùng mô tả lại từ đầu. Hiểu theo góc nhìn người dùng thì MCP là một cánh cổng, có gắn kèm guideline để giúp AI agent bên ngoài có thể hiểu cách Figma hoạt động và vào file figma để làm việc. Một ví dụ điển hình Figma đưa ra: AI coding tool như Cursor có thể kết nối đồng thời với MCP server của Figma và GitHub. Từ đó, khi **người dùng yêu cầu generate một component,** AI có đủ context từ cả design lẫn codebase thực tế. Việc mở MCP cũng có nghĩa là Figma có thể hướng dẫn AI hiểu cách dùng công cụ đúng cách – component nào phù hợp, token nào nên dùng, pattern nào là chuẩn – thay vì để AI tự đoán. ![AI trong Figma - MCP của Figma xuất hiện bên danh sách connectors của Claude AI](https://academy.telos.vn/wp-content/uploads/2026/05/FigmaMCP-inClaude.png) *Cổng kết nối được bật bên giao diện của Claude AI, thông tin về kết nối với Figma MCP.* Figma Design Agent ------------------ Như những gì Figma chia sẻ, họ xây dựng Design Agent với mục tiêu tạo ra một agent “*thông thạo Figma và gắn liền với cách các team làm việc*” – không phải một AI generic được tích hợp thêm vào, mà là một agent có ngữ cảnh sâu về component, token, design standard và best practice của từng team. Đợt Config 2026 tới đây, chắc đây sẽ là một chức năng đinh của đợt update này. Khác với MCP (yêu cầu setup kỹ thuật, hoạt động từ môi trường bên ngoài), Figma Design Agent hoạt động trực tiếp trên canvas – không cần cài đặt thêm, không cần rời khỏi Figma. Agent xuất hiện trong left rail và có thể được gọi từ bất kỳ design layer nào. Các khả năng chính: - **Prompt từ bất kỳ layer nào** – chọn một frame hoặc component, mô tả thay đổi cần thiết, Agent xử lý trực tiếp trên canvas. - **Parallel prompt** – tạo nhiều phương án song song từ cùng một prompt để so sánh, thay vì thử từng hướng một. - **Iterate cùng lúc** – người dùng và Agent có thể làm việc đồng thời trên cùng một file, không cần chờ nhau. Agent sử dụng component và token mà team đã có, ưu tiên những thứ được dùng gần đây và thường xuyên nhất. Người dùng cũng có thể @ mention trực tiếp token, variable, hoặc component cụ thể để điều hướng output chính xác hơn. Trong video này, có thể thấy user yêu cầu AI Design Agent tự tổng hợp hết các comment với thiết kế và edit lại cho phù hợp. ### Khi nào thì dùng Agent? Khi nào thì kết nối MCP? Theo Figma: > *“Use Figma’s agent when you’re working on the canvas – it’s built in and has additional context about your design system. Use the MCP server and use\_figma to pull code onto the canvas or push designs back to code.”* Tóm lại: Figma Design AgentMCP Server (use\_figma)**Vị trí hoạt động**Trực tiếp trên canvasTerminal, IDE, AI tool bên ngoài**Yêu cầu setup**Không cầnCần cấu hình MCP client**Phù hợp khi**Explore, iterate, edit designGenerate code, sync design ↔ code**Người dùng chính**Designer đang dùng figmaDeveloper (hoặc designer biết code) đang dùng AI của bên khác, cần vào FigmaHai công cụ bổ sung cho nhau – Agent phục vụ design workflow, MCP phục vụ dev workflow. Làm sao để sử dụng AI trong Figma? ---------------------------------- ### Figma có những hình thức trả phí nào? Figma hiện có 4 plan chính: **Starter** (miễn phí), **Professional**, **Organization**, và **Enterprise**. Ngoài ra còn có **Education Plan** dành riêng cho học sinh, sinh viên và giảng viên. ### Plan Free có dùng được AI không? Có, nhưng giới hạn. Plan Starter (free) cho phép dùng các AI tool thuộc **Nhóm 1** — tức các tính năng AI cơ bản tích hợp sẵn trong Figma Design — với hạn mức **150 AI credits/ngày** và tối đa **500 AI credits/tháng**. Khi hết credits, các tính năng AI sẽ tạm ngưng cho đến khi hạn mức reset. **Figma Make** (Nhóm 2) và **Design Agent** (Nhóm 3) không có trên plan Free. Hai tính năng này yêu cầu plan Professional trở lên. ### Education Plan thì sao? [Education Plan](https://academy.telos.vn/huong-dan-dang-ky-figma-education-mien-phi/) của Figma có hai cấp độ với quyền truy cập AI khác nhau: Higher Education & BootcampK-12 (Phổ thông)**Plan tương đương**Professional (miễn phí)Enterprise (miễn phí)**AI tools (Nhóm 1)**CóKhông**Figma Make (Nhóm 2)**CóKhông**Design Agent (Nhóm 3)**Có (đang rollout)Không**AI credits/tháng**3.000 creditsKhông cóSinh viên đại học, học viên bootcamp và giảng viên bậc cao đẳng/đại học được dùng **toàn bộ các nhóm AI tool** — bao gồm cả Figma Make và Design Agent — miễn phí. Điều kiện là tài khoản phải được xác minh qua email trường hoặc giấy tờ chứng minh. Nếu các bạn học [lộ trình UI/UX Product Design tại TELOS Academy](https://academy.telos.vn/lo-trinh-tro-thanh-ux-ui-designer/), bạn sẽ mặc nhiên có 12 tháng dùng Figma với định mức Education Plan này. Học sinh và giáo viên bậc phổ thông (K-12) **không có quyền truy cập** vào bất kỳ tính năng AI nào, dù plan tương đương Enterprise. ### MCP thì cần plan gì? MCP (`use_figma`) là giao thức mã nguồn mở, không phụ thuộc vào plan. Về mặt kỹ thuật, bất kỳ tài khoản Figma nào cũng có thể kết nối qua MCP. Tuy nhiên, để AI agent bên ngoài có thể đọc và thao tác với design đầy đủ, cần có quyền truy cập vào file — tức là tài khoản cần ở plan phù hợp với quyền đó. MCP cũng yêu cầu người dùng tự setup kỹ thuật (cấu hình MCP client trong IDE hoặc AI tool), nên thực tế đây là công cụ dành cho người có nền tảng kỹ thuật nhất định. Tuy nhiên có một giới hạn số tool call nhất định và khá ít khi dùng Figma Education plan. Nói nôm na thì mỗi lần bạn prompt 1 lệnh và AI vào Figma thì đó là một tool call, và nếu ít quá thì thật sự không có giá trị gì nhiều khi xài. ### Tóm tắt nhanh theo plan PlanNhóm 1 (AI cơ bản)Nhóm 2 (Figma Make)Nhóm 3 (Agent, MCP)**Starter (Free)**Có (500 credits/tháng)KhôngKhông**Professional trở lên**CóCóCó**Education – Đại học / Bootcamp**Có (3.000 credits/tháng)CóCó**Education – K-12**KhôngKhôngKhôngTổng kết -------- AI trong Figma đang phát triển theo hai hướng song song: tích hợp trực tiếp vào canvas cho designer (Figma Make, Figma Sites, Design Agent) và mở cổng cho AI bên ngoài vào làm việc với design data (MCP). Cả hai hướng đều hướng đến cùng một mục tiêu – rút ngắn khoảng cách giữa design và code, và biến Figma thành nơi cả designer lẫn AI agent đều có thể làm việc cùng nhau trong một môi trường thống nhất. Tuy nhiên hãy hiểu là bạn cần phải giỏi chuyên môn để có thể dùng AI một cách triệt để. Để hiểu sâu hơn về cách các công cụ này ảnh hưởng đến quy trình làm việc thực tế của designer, TELOS Academy đưa nội dung này vào chương trình đào tạo – không chỉ là hướng dẫn công cụ, mà là hiểu rõ vai trò của từng tính năng trong từng giai đoạn dự án. AI for UI/UX Designer thường sẽ là lớp ở tầng thứ 3 (kỹ năng cạnh tranh) sau khi bạn đã đạt được kỹ năng chuyên môn (hãy xem sơ đồ dưới). ![Ý nghĩa của các khóa tại TELOS Academy](https://academy.telos.vn/wp-content/uploads/2026/05/Y-nghia.jpg) **Đăng ký một lộ trình để nâng tầm làm nghề UI/UX [Product Design](https://academy.telos.vn/product-designer-la-gi-va-3-tu-duy/) nào**