Figma đến Godot UI: Xuất Cấu trúc Control với AI Studio (Từng bước)

Tiêu chí hoàn thành: “Trong Godot” nghĩa là gì

Chỉ có texture thôi thì chưa đủ. Bạn cũng nên có:

1. Một cây nút ánh xạ tới các Frame Figma có ý nghĩa (thanh trên, danh sách, thanh dưới, v.v.)
2. Chrome chính giữ được khi thay đổi kích thước 16:9, dọc, và cửa sổ mà không cần chỉnh lại toàn bộ cây
3. Các lớp văn bản vẫn là Label (hoặc nút văn bản của dự án bạn) khi có thể—không bị nướng vào hình ảnh
4. Một cách để xuất lại sau khi Figma chrome thay đổi, thay vì dựng lại scene từ đầu

Tín hiệu, ràng buộc dữ liệu, và khóa bản địa hóa vẫn thuộc về Godot. AI Studio loại bỏ việc “dựng lại khung bố cục từ bản mô phỏng”.

Điều kiện tiên quyết

Mục	Ghi chú
Figma	Màn hình được chia thành các Frame với tên dễ đọc
AI Studio	Truy cập VberAI Studio
Godot	Ưu tiên dự án Godot 4.x; đặt mục tiêu xuất là Godot
Quy ước tài nguyên	Thống nhất thư mục scene UI (ví dụ: res://ui/generated/) và vị trí Theme

Tránh xuất một ảnh toàn màn hình phẳng duy nhất—điều đó kéo bạn trở lại việc cắt thủ công.

Bước 1: Sắp xếp Figma để nó đọc như một cây UI

Một chút dọn dẹp trước khi nhập sẽ rẻ hơn việc tách các nút trong engine sau này.

Thực hành	Tại sao
Đặt tên Frame rõ ràng (Panel_HUD, Btn_Play, List_Item)	Tên trở thành tên nút Godot
Sử dụng Frame / Auto Layout cho các nhóm; tránh gộp toàn bộ màn hình	Cấu trúc phân cấp vẫn nhận diện được sau khi nhập
Giữ bản sao dưới dạng lớp văn bản khi có thể	Ánh xạ Label dễ dàng hơn
Tách biệt các bảng nine-slice khỏi các biểu tượng cố định	Quy tắc co giãn rõ ràng
Ẩn các Frame nháp và các biến thể không dùng	Giảm nhiễu trong cây xuất

Bước 2: Nhập Figma trong AI Studio

1. Mở VberAI Studio
2. Bắt đầu nhập, chọn Figma, và tải lên tệp (hoặc sử dụng kết nối Figma được hỗ trợ của sản phẩm)
3. Trong cây lớp / Frame, xác nhận các màn hình bạn thực sự phát hành—không phải mọi bản nháp trong tệp

Lý tưởng là bạn thấy cấu trúc ở bên trái, bản xem trước canvas ở giữa, và các tùy chọn xuất hướng engine ở bên phải. Xác nhận cấu trúc trước khi xuất.

Bước 3: Kiểm tra cấu trúc phân cấp trước khi xuất

Trên canvas, kiểm tra:

• Việc lồng panel khớp với đầu / thân / chân (hoặc quy ước chrome của bạn)
• Vùng nhấn nút tách biệt với biểu tượng trang trí
• Bản sao có thể bản địa hóa vẫn là lớp văn bản
• Phân biệt panel co giãn với biểu tượng kích thước cố định

Sửa tên hoặc nhóm trong AI Studio khi có thể. Gỡ rối một tệp .tscn hỏng trong Godot tốn nhiều công hơn.

Đối với các điều chỉnh bố cục nhỏ, mô tả ý định bằng ngôn ngữ tự nhiên (thắt chặt khoảng cách tiêu đề đến nút chính, thống nhất chiều cao mục danh sách, ẩn huy hiệu nháp). Mục tiêu là ổn định chrome trước khi nó trở thành đối tượng engine—không phải vẽ lại toàn bộ bộ art qua chat.

Bước 4: Xuất cho Godot

Đặt engine mục tiêu là Godot. Ưu tiên cây phân cấp Control / scene hơn là “chỉ sprite”.

Sau khi xuất, trong Godot:

1. Đặt tài nguyên vào thư mục đã thống nhất (ví dụ: res://ui/generated/)
2. Đính kèm scene đã xuất dưới một CanvasLayer hoặc gốc UI của dự án bạn
3. Xác nhận gốc là một cây Control (hoặc container) hợp lý
4. Xem trước một số độ phân giải trong trình chỉnh sửa
5. Kết nối các tín hiệu pressed và các tín hiệu khác, cùng với việc điền dữ liệu, bằng GDScript / C# như bình thường

Logic vẫn thuộc về dự án. Điều bạn bỏ qua là việc xếp từng TextureRect / Label / container từ Figma bằng tay.

Bước 5: Danh sách kiểm tra chấp nhận trong trình chỉnh sửa

Kiểm tra	Tiêu chí đạt
Tên nút	Ánh xạ tới các Frame chính; không phải một đống chỉ số Node2D / Control vô nghĩa
Bố cục	Chrome vẫn dùng được khi cửa sổ co giãn
Văn bản	Thay đổi nội dung Label không yêu cầu xuất lại toàn bộ màn hình dưới dạng art
Theme	Phông chữ và màu sắc có thể gắn vào Theme của dự án, hoặc bạn biết Theme vẫn cần chỉnh tay
Xuất lại	Sau khi Figma chrome thay đổi, một lần xuất mới có thể thay thế hoặc nằm cạnh scene—không khiến bạn bị kẹt

Việc đổi phông chữ, vùng an toàn, và bản địa hóa thường vẫn cần một lượt chỉnh. Đó là sự trau chuốt bình thường, không phải pipeline thất bại.

FAQ

Điều này có giống với plugin Figma “to code” không?
Hầu hết các plugin đó nhắm đến web. Godot cần các quy ước Control / container / Theme. Xuất thân thiện với engine không phải là sản phẩm giống như codegen web.

Chúng ta vẫn thiết kế trong Figma chứ?
Có. AI Studio tiêu thụ cấu trúc thiết kế; nó không đặt ra định hướng nghệ thuật. Bố cục và token vẫn đến từ Figma.

Godot MCP phù hợp ở đâu?
AI Studio xử lý thiết kế → cấu trúc Control. Godot MCP giúp sau khi scene đã ở trong dự án—đổi tên nút, kết nối tín hiệu, kiểm tra cây từ Cursor và các client tương tự. MCP không “tạo toàn bộ UI từ hình ảnh”. Cài đặt: Godot MCP install.

Lần xuất đầu tiên có hoàn hảo từng pixel không?
Thường là không. Điểm thắng là di chuyển cấu trúc trong vài phút thay vì dựng lại nửa ngày; pixel và Theme hoàn thiện trong Godot.

Cách chạy lại sau khi thay đổi thiết kế

Thay đổi Figma	Gợi ý
Hàng/cột chrome, tab mới	Xuất lại qua AI Studio
Chỉ đổi màu biểu tượng hoặc nội dung	Ưu tiên scene Godot / Theme / bảng dịch
Artboard mới hoàn toàn	Xuất mới → .tscn mới hoặc thay thế đường dẫn đã thống nhất