Figma agent, Code Layers và Specs cho designer

Tháng 10 là một tháng bận rộn của Figma. Ngày 6/10/2026, Figma agent chính thức ra mắt rộng rãi. Chín ngày sau, tại Config India, Figma tung ra Code Layers và Specs ở dạng open beta, thêm guidelines và code sources cho agent trong design system, đưa Payload CMS vào Figma Make, và mở rộng MCP server với 20 đối tác tích hợp mới.

Tin tức sản phẩm như vậy là khá nhiều. Bài này sắp xếp lại từ góc nhìn một UI/UX designer: mỗi tính năng làm gì, chúng khớp với nhau thế nào, và công việc hằng ngày của bạn thực sự thay đổi ra sao.

Tóm gọn: Figma muốn canvas trở thành nơi thiết kế, code chạy được, context dạng văn bản và AI agent cùng gặp nhau.

Bức tranh lớn: build để nghĩ, build để ship

Trong bài ra mắt, CEO Figma Dylan Field mô tả hai kiểu build. Build để nghĩ thì nhanh và lộn xộn: bạn làm ra một thứ, thường bằng code do AI tạo, để thử xem ý tưởng có đứng vững không. Build để ship thì có chủ đích và chú trọng chi tiết.

AI khiến kiểu thứ nhất trở nên dễ dàng, nhưng theo Figma, nó cũng khiến công việc trở nên cô đơn. Prototype vibe coding thường nằm trên máy của một người hoặc trong một đường link, cả team thấy kết quả nhưng không thấy quá trình. Các bản phát hành tháng 10 cố đưa công việc đó trở lại một canvas chung, nơi cả team, cùng agent của họ, có thể nhìn thấy và cùng định hình.

Figma agent đã ra mắt chính thức

Figma agent là trợ lý AI tích hợp ngay trên canvas. Nó ra mắt bản beta vào tháng 5/2026 và chính thức có mặt rộng rãi từ 6/10. Theo Figma, agent có thể tự động hoá các việc lặp lại từ prototype đến component trong design system, đọc và trả lời comment, và dùng skills, tức các bộ hướng dẫn tái sử dụng mà bạn có thể tự viết để đóng gói một quy trình.

Nơi agent hữu ích nhất: bảo trì design system

Hướng dẫn của chính Figma tập trung vào những việc không mấy hào nhoáng mà design system nào cũng cần:

Tài liệu. Soạn do's và don'ts cho component, đưa ví dụ về variant và trạng thái, gợi ý API component gọn hơn cho handoff.
Audit. Liệt kê component và token đang dùng trên một màn hình, map chúng về thư viện tương ứng, và chỉ ra một button tự dựng trong khi hệ thống đã có component sẵn, hay một màu hard-code thay vì token.
Khớp với hệ thống. Thay hàng loạt component hoặc token đúng trên toàn bộ thiết kế, rất tiện khi bạn import một màn hình có sẵn và nó bị tách khỏi thư viện.
Dọn dẹp. Tìm chỗ đặt tên lệch nhau, như "hover", "hovered" và "mouse-over" cho cùng một trạng thái, rồi áp một quy ước cho toàn thư viện, kèm danh sách thay đổi cho developer.
Kiểm tra token. Xem component có thực sự dùng token không, và chú thích token nào đang được dùng.

Figma đưa ra ví dụ thực tế: một product designer tại Uber đã viết skills để tạo mô tả API cho component và một color spec cho biết mỗi phần dùng token nào ở từng variant và trạng thái.

Ai được dùng. Agent có cho người dùng Full seat trên gói Professional, Organization, Enterprise và một số gói Education, và có giới hạn trên gói Starter. Seat Collab, Dev và View có thể dùng agent trong drafts của mình.

Code Layers: code chạy được ngay trên canvas

Code Layers đưa prototype chạy bằng code lên canvas Figma, để bạn khám phá trải nghiệm ngay cạnh phần code tạo ra nó. Bạn có thể tạo bằng cách:

Chuyển một frame thiết kế có sẵn thành code chạy được.
Tải lên một thư mục trên máy hoặc import từ GitHub repository.
Đưa một prototype đã code vào qua MCP server của Figma.
Chụp lại những gì đang chạy trên website bằng Chrome extension của Figma.
Viết prompt từ đầu.

Chiều ngược lại cũng được. Từ một code layer, bạn chọn Extract designs để chuyển trạng thái hiện tại về lại thành layer thiết kế chỉnh sửa được: một màn hình, một trạng thái hay cả một flow.

Code Layers vào open beta từ 15/10/2026 và có trên mọi gói. Release notes của Figma cho biết việc tạo và chỉnh sửa trong code layer được miễn phí trên các gói trả phí đến hết 4/11. Figma cũng nói sẽ hỗ trợ codebase phức tạp hơn theo thời gian, nên hiện tại nó hợp với prototype hơn là app production hoàn chỉnh.

Vì sao quan trọng với designer. Nhiều designer đã bắt đầu vibe coding prototype ở các công cụ riêng. Code Layers cho phép phần việc đó nằm ngay cạnh thiết kế, nơi đồng đội có thể comment và cùng chỉnh sửa thay vì chuyền tay nhau các đường link.

Specs: ngôi nhà cho context dạng văn bản

Khi team làm việc với AI agent nhiều hơn, rất nhiều suy nghĩ quan trọng nằm trong các file Markdown: PRD, quy tắc, ghi chú kỹ thuật. Quan điểm của Figma là các file đó thường chỉ một người dùng, nằm rải rác trên máy cá nhân và tách rời khỏi thiết kế mà chúng mô tả.

Specs là câu trả lời của Figma: một tài liệu cộng tác dựa trên Markdown, nằm ngay trên canvas trong Figma và FigJam. Bạn tạo bằng cách nhấn phím D hoặc bấm biểu tượng Specs trên thanh công cụ, hoặc kéo thả một file Markdown có sẵn vào canvas.

Specs khác một tài liệu thông thường ở đâu

Bạn có thể nhúng frame, bảng FigJam hay bất kỳ node nào trên canvas vào spec, để chữ và hình nằm cạnh nhau.
Figma agent có thể đọc và trả lời comment, nên bạn có thể nhờ nó trả lời mọi comment đang mở bằng một đề xuất sửa, trong khi đồng đội cùng góp ý.
Connector mang context bên ngoài vào: lấy chi tiết từ codebase bằng connector GitHub, hoặc nhờ agent chạy phân tích bằng Hex rồi để kết quả lại dưới dạng comment.
Bạn có thể chuyển qua lại giữa các dạng: biến PRD thành thiết kế, prototype và code, hoặc biến thiết kế và code ngược lại thành spec.
Khi handoff, chỉ cần copy link spec vào prompt của coding agent. Qua MCP server, nó nhận được phần Markdown cùng các frame, sơ đồ, code layer và đoạn Code Connect được liên kết.

Specs đang triển khai open beta trên web, desktop và mobile cho các gói trả phí.

Vì sao quan trọng với designer. Specs cho các quyết định thiết kế một chỗ đứng lâu dài và dùng chung. Thay vì lý do thiết kế nằm trong một đoạn chat hay một slide, nó nằm cạnh sản phẩm và đi cùng sản phẩm tới coding agent.

Kiểm soát design system tốt hơn

Figma cũng mở rộng những gì một design system có thể chứa, để agent bám theo đáng tin cậy hơn:

Guidelines (open beta, gói trả phí): thêm quy tắc và pattern dạng văn bản vào thư viện đã publish. Khi thư viện được gắn vào, agent tự động đọc chúng, nên bạn không phải lặp lại cùng một hướng dẫn trong mọi prompt.
Code sources (closed beta): import code từ GitHub repository hoặc npm package để agent dựng component và code layer phản ánh đúng hệ thống thật của bạn.
Bản xem trước quản lý hệ thống: một nơi để quản lý mọi thư viện trong hệ thống, với system map theo dõi thay đổi và phụ thuộc, và system check tìm các lỗ hổng như thiếu mô tả hay thiếu trạng thái tương tác.

Payload trong Figma Make

Đội ngũ đứng sau Payload, một CMS và framework ứng dụng mã nguồn mở, đã gia nhập Figma từ năm ngoái. Giờ đây Figma Make có thể dựng sẵn backend Payload, cho app một CMS, database, quản lý media, API, đăng nhập và trang admin, do Figma host. Nội dung gắn với design system của bạn, marketer chỉnh sửa được mà không cần đụng code, và sau này bạn có thể mang app ra ngoài Figma. Tính năng có trên mọi gói và đang được mở dần trong vài tuần tới.

Với designer làm website marketing hay app đơn giản trong Figma Make, đây là bước lấp một khoảng trống lớn giữa một prototype đẹp và một website người khác có thể tự cập nhật.

Figma MCP: thêm công cụ, thêm đối tác

Figma MCP server cho phép các công cụ AI bạn đang dùng đọc context thiết kế từ Figma, và giờ làm được nhiều hơn trên canvas. Với bản cập nhật tháng 10, agent có thể tạo code layer, làm việc với specs, tạo hình ảnh và chạy các workflow Weave đã publish. Figma cho biết hướng dẫn và hiệu năng được cải thiện giúp giảm lỗi và lượng token sử dụng.

Figma cũng công bố 20 đối tác tích hợp MCP mới, gồm OpenCode, trình duyệt Dia, Junie của JetBrains và Meta Muse.

Designer thực sự thay đổi những gì

1. Design system trở thành sách hướng dẫn của agent. Guidelines, code sources và kiểm tra token khiến chất lượng hệ thống ảnh hưởng trực tiếp đến chất lượng output của AI. Đặt tên rõ ràng và ghi lại quy tắc sử dụng không còn là "có thì tốt".

2. Prototype chuyển từ "xem" sang "dùng thử". Với Code Layers, prototype có thể chạy code thật trên canvas, và bạn có thể kéo nó về lại thành thiết kế chỉnh sửa được khi cần tinh chỉnh.

3. Viết trở thành một kỹ năng thiết kế. Specs đặt ý đồ dạng văn bản ngay cạnh hình ảnh. Designer viết rõ quyết định, trường hợp biên và nguyên tắc sẽ handoff tốt hơn, cho cả người lẫn agent.

4. Bảo trì rẻ hơn. Audit, đổi tên và viết tài liệu, những việc trước đây hay bị hoãn, giờ có thể giao cho agent rồi review lại.

5. Review vẫn quan trọng. Agent có thể chỉ ra chỗ lệch và gợi ý cách sửa, nhưng bạn mới là người quyết định hệ thống nên như thế nào.

Bắt đầu ngay trong tháng này

Chọn một thư viện lộn xộn và nhờ agent audit cách đặt tên và việc dùng token. Review thay đổi trước khi áp dụng.
Thêm guidelines cho thư viện dùng nhiều nhất, bắt đầu từ các component cốt lõi.
Thử một code layer cho một tương tác khó giải thích bằng khung hình tĩnh.
Viết brief cho tính năng tiếp theo dưới dạng Spec, nhúng các frame chính, rồi chia sẻ để lấy comment.
Nếu developer của bạn dùng công cụ AI coding, hãy thử handoff một link Spec qua MCP server.
Lưu ý nhãn beta và mốc 4/11 cho việc chỉnh code layer miễn phí trên gói trả phí.

Những giới hạn cần biết

Code Layers, Specs và guidelines đang ở open beta, code sources ở closed beta, nên sẽ còn chỗ chưa mượt.
Code Layers hiện hướng tới prototype; Figma nói sẽ hỗ trợ codebase phức tạp hơn theo thời gian.
Quyền dùng agent phụ thuộc loại seat và gói.
Payload vẫn đang được mở dần cho các tài khoản trong vài tuần.

Kết luận

Các bản phát hành tháng 10 của Figma không chỉ là tính năng mới; chúng mô tả một hình dạng mới cho công việc thiết kế. Canvas giờ chứa thiết kế, code đang chạy, spec dạng văn bản và AI agent trong cùng một không gian chung. Với designer, cơ hội nằm ở việc làm chủ những phần agent không thay được: một hệ thống rõ ràng, ý đồ được viết sắc nét và khả năng phán đoán nên build điều gì. Công cụ sẽ còn thay đổi, nhưng những kỹ năng đó sẽ ở lại.

Nguồn tham khảo

Thông tin được kiểm tra ngày 16/10/2026. Tính năng beta và khả dụng có thể thay đổi.

Figma agent, Code Layers và Specs: Designer cần biết gì