Figma Make là gì? Tạo prototype bằng câu lệnh

Figma Make là công cụ AI của Figma biến câu lệnh, frame thiết kế hoặc ảnh chụp thành prototype và web app có code chạy được. Bạn mô tả bằng lời, xem bản chạy thử ở khung preview, rồi sửa tiếp bằng chat, bằng bảng thuộc tính hoặc sửa thẳng vào code. Gói Starter miễn phí dùng thử được, giới hạn theo credit AI.

Tôi là Hai Le, UI/UX designer biết code. Phần lớn công việc của tôi là dựng design system và bàn giao cho dev. Bài này viết cho người đã biết Figma cơ bản (nếu chưa, xem lộ trình học Figma 7 ngày) và muốn biết Figma Make dùng vào việc gì, dừng ở đâu.

Figma Make làm được gì?

Figma gọi Make là công cụ "prompt-to-app". Màn hình làm việc có hai khu: khung chat để ra lệnh và khung preview hiện bản chạy được của ứng dụng. Những phần hữu ích nhất cho designer:

• Dán frame, ảnh hoặc ảnh chụp màn hình vào khung chat. Figma khuyên dùng frame vì frame mang theo dữ liệu cấu trúc.
• Edit tool và bảng thuộc tính (properties panel) cho chọn một phần tử trong preview rồi chỉnh màu, padding, margin, chữ. Draw tool cho vẽ đánh dấu lên preview. Annotations cho ghim nhiều ghi chú lên giao diện rồi gửi một lượt.
• Sửa code trực tiếp, xem và khôi phục phiên bản cũ.
• Thêm backend qua Supabase khi cần đăng nhập hoặc lưu dữ liệu.
• Publish thành trang web có địa chỉ dạng ba-tu-ngau-nhien.figma.site, có thể đặt mật khẩu.

Bảng thuộc tính và annotations ra mắt ngày 30/07/2026, chỉ có trong file Make tạo mới, và vẫn tiêu credit khi bạn bấm Apply.

Figma Make khác gì prototype trong Figma Design?

Hai thứ cùng tên "prototype" nhưng làm việc khác nhau. Bảng dưới là cách tôi chọn:

Với một ô tìm kiếm lọc danh sách, Figma Design buộc bạn vẽ từng trạng thái kết quả. Trong Make, ô đó lọc thật theo chữ người thử gõ.

Gói miễn phí dùng Figma Make được đến đâu?

Theo tài liệu của Figma:

• Trang mô tả gói Starter liệt kê Figma Make trong các sản phẩm có sẵn. Make không giới hạn số file, nhưng bị giới hạn bởi credit AI hằng tháng.
• Gói Starter có 500 credit mỗi tháng, tối đa 150 credit mỗi ngày. Credit reset hằng tháng và không cộng dồn.
• Trang hướng dẫn Make ghi "Figma Make is available for Full seats on paid plans", các seat và gói khác dùng thử với giới hạn.
• Người dùng Starter không dùng team library làm ngữ cảnh style, và chỉ publish lên web công khai được nếu đồng thời publish lên Figma Community.
• Plan mode và Make kits chỉ có ở gói trả phí.

Figma không công bố một câu lệnh tốn bao nhiêu credit. Với 150 credit một ngày, tôi coi gói miễn phí là đủ để thử một luồng nhỏ, chưa đủ để làm việc hằng ngày.

Làm prototype đầu tiên bằng câu lệnh như thế nào?

1. Trong trình quản lý file, vào Drafts, bấm Make ở góc trên bên phải. Bạn cũng có thể bắt đầu từ một template của Make.
2. Dán một frame (ví dụ màn hình đăng ký bạn đã dựng) vào khung chat.
3. Viết câu lệnh đầu tiên thật rõ, rồi gửi. Kết quả phức tạp có thể mất vài phút để sinh code.
4. Bấm thử trong preview. Chỗ nào sai về hình thức, dùng Edit tool và bảng thuộc tính. Chỗ nào sai về hành vi, ghim annotation hoặc viết câu lệnh mới.
5. Khi hài lòng, bấm Publish ở góc trên bên phải, đặt tiêu đề và cài quyền xem.

Một câu lệnh đầu tiên tôi sẽ viết cho màn hình đăng ký:

Dựng prototype từ frame "Đăng ký" đính kèm, giữ nguyên bố cục, font và màu.
Hành vi cần có:
- Ô email báo lỗi "Email chưa đúng định dạng" khi rời ô mà giá trị không hợp lệ.
- Ô mật khẩu có nút hiện/ẩn, tối thiểu 8 ký tự.
- Nút "Tạo tài khoản" bị vô hiệu khi còn ô bắt buộc trống.
- Bấm nút thì chuyển sang màn hình "Đăng ký thành công" có lời chào kèm họ tên vừa nhập.
Không thêm màn hình hay tính năng nào ngoài danh sách trên.

Viết câu lệnh thế nào để kết quả không chung chung?

Vài thói quen tôi áp dụng, phần lớn lấy từ hướng dẫn tiết kiệm credit của Figma:

• Một màn hình mỗi lần. Figma khuyên dựng từng màn hình, tránh gắn mọi thiết kế cùng lúc.
• Liệt kê hành vi và trạng thái. Lỗi, trống, nút bị vô hiệu. Khi dựng thư viện hơn 50 component cho Joyme, đây là nhóm trạng thái dễ bị quên nhất.
• Sửa trực quan cho việc nhỏ. Đổi padding hay màu bằng bảng thuộc tính nhanh hơn viết bằng lời.
• Nhờ lập kế hoạch trước khi sửa lớn. Ở gói trả phí có plan mode (gõ /plan trong chat). Ở gói nào cũng nhờ được Make viết kế hoạch vào file plan.md để bạn duyệt trước.
• Nhờ giải thích code khi muốn hiểu nó đã dựng gì.

Đưa design system vào Figma Make bằng cách nào?

Mỗi file Make có một thư mục guidelines/. Khi sinh code, Make đọc file Guidelines.md trước tiên. Figma khuyên chia hướng dẫn thành nhiều file ngắn, ví dụ components/, foundations/ cho token màu, chữ, khoảng cách, và composition/ cho cách ghép bố cục.

Make kits (chỉ cho Full seat trên gói trả phí) gói sẵn thư viện Figma đã publish, npm package và guidelines để cả đội dựng prototype bằng đúng khối của sản phẩm thật.

Cách nghĩ này rất gần với file DESIGN.md mà tôi dùng cho chính trang này: viết quy tắc thiết kế ra chữ để AI đọc và làm theo. Nếu bạn muốn đi xa hơn, đọc DESIGN.md là gì và Figma MCP và Claude Code.

Figma Make chưa làm được gì?

Những giới hạn sau đều có trong tài liệu chính thức:

• Đồng bộ một chiều với Figma Design. Copy design chép preview thành layer, nhưng bản chép không chạy được, và sửa layer không cập nhật ngược lại file Make.
• Preview chưa hỗ trợ micro và camera.
• Làm việc trên codebase thật mới ở dạng beta. Từ 28/05/2026, Make nối được với repository Git trên máy, tạo branch và pull request, nhưng chỉ trên ứng dụng desktop cho Mac và phải đăng ký chờ duyệt.
• Credit là giới hạn thật. Mỗi câu lệnh và mỗi lần Apply đều tốn credit.

Còn một giới hạn tôi tự đặt ra. Make dựng được thứ bạn mô tả, còn mô tả gì thì bạn vẫn phải tự quyết. Ở Car From Japan, phần quan trọng nhất của việc làm lại form hỏi xe là đổi nhãn nút thành "Check availability" và cắt bớt ô nhập. Hai quyết định đó đến từ heuristic review và phân tích đối thủ, trước khi có dòng code nào. Chi tiết nằm trong case study form inquiry của Car From Japan.

Khi nào dùng Figma Make, khi nào chuyển sang Claude Code?

Tôi chọn Figma Make khi cần một bản chạy được trong một buổi để người khác bấm thử, nhất là những tương tác khó giả lập bằng frame tĩnh như lọc, gõ hay kéo thả. Khi ý tưởng đã chốt và cần đi vào codebase thật, nơi đã có sẵn component, token và quy ước, tôi chuyển sang Claude Code chạy trên máy mình. Trang portfolio này cũng được dựng theo hướng thứ hai.

Nếu bạn muốn thử hướng thứ hai, bắt đầu từ cài đặt Claude Code, rồi đọc Claude Code cho designer. Còn nếu bạn đang tìm một designer làm được cả design system lẫn phần bàn giao với dev, xem trang giới thiệu của tôi.

Nguồn

• Explore Figma Make, Figma Help Center
• Create a Figma Make file, Figma Help Center
• Edit a Figma Make file, Figma Help Center
• Figma Make FAQs, Figma Help Center
• Starter plan overview, Figma Help Center
• How AI credits work, Figma Help Center
• Best practices for optimizing AI credits in Figma Make, Figma Help Center
• Use plan mode in Figma Make, Figma Help Center
• Beyond the basics: Using Figma Make, Figma Help Center
• Get started with Make kits và Write design system guidelines for Make kits, Figma Help Center
• Publish, update, or unpublish a Figma Make file, Figma Help Center
• Select an AI model to use in Figma Make, Figma Help Center
• A properties panel and annotations, now in Figma Make, Figma Blog, 30/07/2026
• Figma Make, now on your local code, Figma Blog, 28/05/2026