Lớp mã Figma và Specs: Chúng là gì, chúng hoạt động như thế nào và chúng dừng ở đâu23 min read

Các lớp mã Figma đặt mã đang chạy trên khung vẽ và Figma Specs cũng đặt Markdown ở đó. Cả hai đều bước vào phiên bản beta mở tại Config India vào ngày 15 tháng 10 năm 2026, do đó, tệp thiết kế hiện có thể chứa các khung, nguyên mẫu hoạt động và kế hoạch bằng văn bản mà nhân viên hỗ trợ xây dựng từ đó.

Hướng dẫn này dành cho các nhà thiết kế, PM và kỹ sư front-end quyết định xem có nên chuyển nguyên mẫu và thông số kỹ thuật sang Figma hay không. Nó bao gồm chức năng của từng tính năng, cách bắt đầu, chi phí trong tín dụng AI và nơi công việc phải để lại Figma cho các đồng đội trong Claude, ChatGPT hoặc Cursor.

Trong thời đại AI, thiết kế là mã. Để thiết kế trực tiếp bằng mã bằng AI hoặc để biến thiết kế Figma của bạn thành mã, hãy sử dụng Anima Playground: mô tả một màn hình hoặc bắt đầu từ thiết kế Figma, sau đó tiếp tục lặp lại trên một ứng dụng có thể chỉnh sửa mà bạn có thể xem trước và xuất bản.

Thiết kế trực tiếp bằng mã với AI

Thiết kế bằng AI: Mô tả một màn hình hoặc biến các thiết kế Figma thành mã.

Figma đã ra mắt gì tại Config India 2026?

Các lớp mã và Specs là tiêu đề nhưng chúng đi kèm với một tập hợp các tính năng tác nhân xung quanh chúng. Đây là trạng thái hiện tại từ trung tâm trợ giúp của Figma:

Cả hai phiên bản beta đều được triển khai trong vài tuần nên bạn có thể thấy chúng trước hoặc sau những thành viên còn lại trong nhóm của mình.

Lớp mã Figma là gì?

Lớp mã là lớp chứa mã thực đang chạy. Thay vì một nguyên mẫu giả mạo các tương tác với các liên kết khung, bạn sẽ có một nguyên mẫu đang hoạt động, được hỗ trợ bằng mã nằm trên khung vẽ bên cạnh các thiết kế của bạn. Đồng đội có thể nhấp qua nó, nhận xét về nó và sao chép nó để thử một hướng khác cạnh nhau.

Figma cung cấp cho bạn bốn cách để bắt đầu:

• Từ một thiết kế. Chọn các khung và yêu cầu tác nhân Figma biến chúng thành một lớp mã.
• Từ một trang web trực tiếp. Chụp một trang có tiện ích mở rộng Figma Chrome và dán nó vào khung vẽ.
• Từ một kho lưu trữ. Nhập cơ sở mã tạo mẫu nhẹ, được hỗ trợ từ GitHub hoặc thư mục cục bộ. Quá trình nhập GitHub vẫn được kết nối với kho lưu trữ đó.
• Từ đầu. Thêm một lớp mã trống và nhắc tác nhân xây dựng.

Bạn cũng có thể đưa nguyên mẫu mà bạn đã tạo trong công cụ mã hóa lên canvas thông qua máy chủ Figma MCP.

Chỉnh sửa xảy ra theo ba cách. Bạn nhắc tác nhân, bạn chú thích các khung để hiển thị nơi có thay đổi hoặc bạn mở trình soạn thảo mã và tự thay đổi mã. Khi chi tiết hình ảnh quan trọng hơn mã, Extract designs biến màn hình từ lớp mã trở lại khung Figma có thể chỉnh sửa. Khi mã đã sẵn sàng cho các kỹ sư, bạn có thể đẩy mã đó đến một nhánh và mở yêu cầu kéo.

Figma Specs là gì?

Figma gọi Specs là “ngôi nhà riêng cho bối cảnh”. Trong thực tế, đây là tài liệu Markdown cộng tác nằm trên canvas của tệp Figma Design hoặc bảng FigJam hoặc dưới dạng tệp Spec của chính nó.

Bắt đầu thật nhanh chóng:

1. Tạo Spec độc lập từ trình duyệt tệp hoặc truy cập figma.com/spec/new.
2. Bên trong tệp Thiết kế hoặc bảng FigJam, nhấp vào Spec trên thanh công cụ hoặc nhấn D.
3. Đã có một .md tập tin? Kéo nó vào canvas và nó sẽ trở thành một thông số kỹ thuật.
4. Viết bằng Markdown bạn đã biết: # cho các tiêu đề, - cho đạn, [] cho việc cần làm, > để có dấu ngoặc kép, ba dấu backticks cho mã. loại / đối với hình ảnh, Figma nhúng và chia.

Điều làm cho một thông số kỹ thuật hơn một tệp Markdown là những gì nằm xung quanh văn bản. Bạn có thể nhúng khung, bảng FigJam hoặc bất kỳ nút nào từ khung vẽ, do đó yêu cầu và thiết kế mà nó mô tả luôn ở cạnh nhau. Các đồng đội nhận xét về nó và đặc vụ Figma có thể đọc và trả lời những nhận xét đó.

Specs cũng hoạt động bên ngoài Figma. Các tác nhân mã hóa được kết nối với máy chủ Figma MCP có thể đọc, tạo và cập nhật thông số kỹ thuật bằng cách sử dụng figma-spec kỹ năng. Để bắt đầu, bạn sao chép liên kết thông số kỹ thuật vào lời nhắc của tác nhân mã hóa và các khung, sơ đồ, lớp mã và đoạn mã Code Connect được liên kết đi kèm với nó.

Tại sao Markdown trở thành định dạng chuyển giao

Bài đăng ra mắt riêng của Figma nói rõ điều đó: Markdown hiện là định dạng thực tế để chia sẻ bối cảnh với các đại lý. Mọi tác nhân mã hóa đều đọc nó. Hầu hết các nhóm sản phẩm đều đã lưu giữ các kế hoạch, PRD và hướng dẫn đại lý trong .md tập tin.

Tôi đọc được rằng Specs là Figma chấp nhận rằng việc chuyển giao cho một tác nhân là văn bản, sau đó tạo văn bản đó nhiều người chơi. Một địa phương AGENTS.md hoặc PRD không bao giờ bị lỗi do định dạng. Thất bại vì chỉ có một người chỉnh sửa, nó lệch khỏi thiết kế và không ai có thể biết đại lý đã sử dụng phiên bản nào.

Bên trong Figma, Specs khắc phục điều đó. Câu hỏi mở là những gì xảy ra bên ngoài nó. Các phần nhúng, nhận xét và tài liệu tham khảo thiết kế trực tiếp là các tính năng của Figma và các đại lý tiếp cận chúng thông qua các khách hàng được liệt kê trong danh mục Figma MCP. Nếu các kỹ sư của bạn, ChatGPT của PM và Claude của nhóm tiếp thị của bạn đều cần cùng một kế hoạch, bạn vẫn phải quyết định vị trí của bản sao được chia sẻ.

Quy trình làm việc thực tế: từ PRD đến lớp mã để kéo yêu cầu

Đây là cách hai tính năng khớp với nhau trên một tính năng thực, chỉ sử dụng những tài liệu Figma hiện nay.

1. Kéo PRD của bạn vào khung vẽ. Hiện tại của bạn .md tập tin trở thành một thông số kỹ thuật. Không có gì được viết lại và chỉnh sửa bằng tay không sử dụng tín dụng AI.
2. Nhúng các khung mà nó nói đến. sử dụng / để thêm các luồng PRD mô tả. Người đánh giá bây giờ có thể nhìn thấy yêu cầu và màn hình cùng nhau.
3. Biến các khung chính thành một lớp mã. Chọn chúng và nhắc đại lý. Nếu bạn đã có kho lưu trữ nguyên mẫu, hãy nhập kho lưu trữ đó từ GitHub.
4. Đánh giá ở một nơi. Thu thập nhận xét về thông số kỹ thuật và lớp mã. Yêu cầu nhân viên Figma trả lời từng nhận xét đang mở kèm theo cách khắc phục được đề xuất trong khi mọi người cân nhắc về cùng một chủ đề.
5. Bàn giao thông số kỹ thuật. Dán liên kết thông số kỹ thuật vào Codex, Claude Code hoặc Cursor được kết nối với máy chủ Figma MCP. Tác nhân nhận được Markdown cộng với bối cảnh thiết kế được liên kết.
6. Gửi mã nguyên mẫu. Đẩy các thay đổi của lớp mã vào một nhánh và mở yêu cầu kéo để các kỹ sư xem xét trước khi hợp nhất.

Đầu ra là thông số kỹ thuật mà tác nhân mã hóa của bạn có thể đọc và một nguyên mẫu hoạt động mà nhóm của bạn đã thực sự nhấp qua. Kiểm tra mã được tạo giống như bất kỳ mã nào khác. Nguyên mẫu chạy không giống với mã sẵn sàng sản xuất.

Nếu bước tiếp theo là biến thiết kế Figma thành mã bạn có thể chạy hoặc thiết kế bằng mã từ lời nhắc, thì đó là công việc của Anima Playground.

Các lớp mã và Specs có giá bao nhiêu?

• Các lớp mã sử dụng tín dụng AI. Trên các gói trả phí, việc tạo và chỉnh sửa bên trong lớp mã được miễn phí cho đến hết ngày 4 tháng 11 năm 2026. Công việc của nhân viên khác trong cùng một lời nhắc vẫn sử dụng tín dụng và sau ngày 4 tháng 11, tất cả các nhiệm vụ của lớp mã đều sử dụng tín dụng.
• Specs được viết miễn phí. Việc tự mình nhập và chỉnh sửa thông số kỹ thuật không sử dụng tín dụng. Sử dụng tác nhân với một thông số kỹ thuật nào đó. Di chuột vào biên lai sau mỗi lời nhắc để xem chi phí.
• Payload và các hướng dẫn sẽ tăng thêm chi phí. Figma lưu ý rằng cả hai đều cung cấp cho tác nhân nhiều ngữ cảnh hơn và nhiều công việc hơn, do đó, cùng một lời nhắc có thể sử dụng nhiều tín dụng hơn.

Các giới hạn cần kiểm tra trước khi bạn lập kế hoạch xung quanh chúng

• Triển khai. Cả hai tính năng đều là phiên bản beta mở được triển khai trong nhiều tuần. Tìm biểu tượng Mã trên thanh công cụ Figma Design và tùy chọn Spec trong trình duyệt tệp.
• Kế hoạch. Specs cần gói trả phí. Người dùng mới bắt đầu nhận được các lớp mã nhưng không nhận được Specs. Cả hai đều cần quyền chỉnh sửa để tạo.
• Chọn không tham gia. Chỉ quản trị viên Doanh nghiệp mới có thể tắt các lớp mã và chỉ bằng cách tắt tất cả các tính năng AI của Figma.
• Kích thước repo. Quá trình nhập GitHub dành cho các cơ sở mã tạo mẫu nhẹ, không phải là một ứng dụng sản xuất đầy đủ.
• Thiết kế mã hệ thống. Việc kết nối mã thành phần thực của bạn thông qua các nguồn mã vẫn là phiên bản beta kín, vì vậy các lớp mã có thể chưa sử dụng các thành phần sản xuất của bạn.

Nơi Figma dừng lại và nơi Anima và AgentGrid.io phù hợp

Nếu cả nhóm của bạn làm việc trong Figma, các lớp mã và Specs là mặc định mạnh mẽ. Nguyên mẫu, kế hoạch và các nhận xét nằm trong cùng một tệp và đại lý của Figma và máy khách MCP có thể làm việc trên chúng.

Hai tình huống phổ biến vẫn nằm ngoài tập tin đó.

Ý tưởng bắt đầu ở một nơi khác. Nguyên mẫu Claude Design, trang HTML do ChatGPT tạo hoặc một trang web trực tiếp mà bạn muốn tìm hiểu. Máy chủ MCP của Figma hiện có html_to_figma công cụ dành cho HTML do tác nhân tạo. Anima của Buddy, tác nhân thiết kế AI của chúng tôi bên trong Figma, cũng quay HTML, các tạo phẩm, hình ảnh và URL của Claude thành các lớp Figma có thể chỉnh sửa, điều này rất hữu ích khi bạn muốn tiếp tục thiết kế trên các lớp đó bằng hệ thống thiết kế của mình.

Kết quả cần để lại Figma. Thông số kỹ thuật hoặc nguyên mẫu của bạn phải được những người bên ngoài nhóm Figma của bạn xem xét, được các đại lý từ một số nhà cung cấp chỉnh sửa hoặc được xuất bản dưới dạng liên kết trực tiếp. Đó chính là công việc mà AgentGrid.io do Anima xây dựng thực hiện. Cấu phần phần mềm Markdown trên AgentGrid.io là một tài liệu trực tiếp, tự động lưu mà mọi người và các tác nhân được kết nối như Claude, ChatGPT, Cursor và Grok Bot có thể chỉnh sửa, với mỗi thay đổi được quy theo tên trong lịch sử phiên bản. Cấu phần phần mềm HTML là một trang đang chạy mà bạn có thể nhận xét và xuất bản lên URL công khai khi nó được phê duyệt. Bạn cũng có thể nhập một khung Figma vào AgentGrid.io dưới dạng tạo phẩm ứng dụng. Quá trình nhập đó là một chiều nên các chỉnh sửa Figma sau này không đồng bộ hóa.

Cả hai không cạnh tranh cho cùng một bước. Figma sở hữu canvas thiết kế. AgentGrid.io là nơi Markdown và các tạo phẩm HTML sẽ được sử dụng khi công việc kết hợp giữa các công cụ và nhóm.

Hãy dùng thử AgentGrid.io để giữ thông số kỹ thuật hoặc nguyên mẫu mà mọi nhân viên trong nhóm của bạn có thể chỉnh sửa và xuất bản.

Sử dụng từng công cụ khi

• Sử dụng các lớp mã Figma khi các bên liên quan cần nhấp vào một nguyên mẫu đang hoạt động bên cạnh các thiết kế và so sánh các hướng dẫn cạnh nhau.
• Sử dụng Figma Specs khi kế hoạch sẽ nằm bên cạnh các khung và được tác nhân mã hóa đọc thông qua máy chủ Figma MCP.
• sử dụng Anima Playground khi bạn muốn thiết kế trực tiếp bằng mã bằng AI hoặc biến thiết kế Figma thành một ứng dụng có thể chỉnh sửa, bạn có thể xem trước và xuất bản.
• sử dụng Buddy khi điểm bắt đầu nằm ngoài Figma và bạn muốn các lớp có thể chỉnh sửa trên khung vẽ. Để có so sánh đầy đủ hơn về việc xây dựng trong Figma so với trình tạo trình duyệt, hãy xem Figma Make so với Anima Playground.
• Sử dụng AgentGrid.io khi thông số kỹ thuật hoặc nguyên mẫu phải được mọi người và đại lý chỉnh sửa trên các công cụ, được xem xét bằng nhận xét và xuất bản dưới dạng liên kết trực tiếp.

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

Các lớp mã trong Figma là gì?

Lớp mã là một lớp trên khung vẽ Figma chứa mã thực đang chạy. Bạn có thể tạo một khung từ các khung đã chọn, một trang web trực tiếp được chụp bằng tiện ích mở rộng Figma Chrome, kho lưu trữ nguyên mẫu GitHub hoặc một lời nhắc trống, sau đó nhấp qua nó, nhận xét về nó và sao chép nó để so sánh các hướng.

Figma Specs có phải chỉ là Markdown không?

Specs sử dụng Markdown cho văn bản của nó và bạn có thể kéo bất kỳ tệp .md nào vào khung vẽ để tạo một tệp. Nó bổ sung thêm các tính năng Figma xung quanh văn bản đó: các khung được nhúng và bảng FigJam, các nhận xét và một tác nhân có thể đọc và trả lời các nhận xét đó.

Các lớp mã Figma có tính phí tín dụng AI không?

Vâng. Trên các gói trả phí, việc tạo và chỉnh sửa bên trong lớp mã được miễn phí cho đến ngày 4 tháng 11 năm 2026. Công việc của nhân viên khác trong cùng một lời nhắc vẫn sử dụng tín dụng và sau ngày 4 tháng 11, tất cả các nhiệm vụ của lớp mã đều sử dụng tín dụng AI.

Claude Code, Codex hoặc Cursor có thể đọc Figma Spec không?

Có, nếu chúng được kết nối với máy chủ Figma MCP. Tác nhân mã hóa có thể đọc, tạo và cập nhật thông số kỹ thuật bằng kỹ năng figma-spec và bạn có thể dán liên kết thông số kỹ thuật vào lời nhắc của mình để chuyển ngữ cảnh thiết kế được liên kết của nó.

Gói Figma nào bao gồm Specs?

Specs đang ở giai đoạn thử nghiệm mở trên các gói trả phí: Chuyên nghiệp, Tổ chức, Doanh nghiệp và Giáo dục, cùng với Chính phủ theo bài viết Config India của Figma. Nó không có trong gói Starter miễn phí. Các lớp mã đang được triển khai cho tất cả các gói, bao gồm cả Starter.