Kết nối Codex với Figma để tạo variation mockup từ frame có sẵn

Nói trước cho rõ để khỏi hiểu lầm: Toàn bộ thiết kế gốc trong bài là của team Product Design. Mình chỉ dùng Codex x Figma để dựng vài bản mockup variation DỰA TRÊN thiết kế có sẵn của team, mục tiêu là giảm tải bớt workload. Mình không nhận công thiết kế về mình - credit thuộc về Product Design.

Codex giờ nối thẳng được với Figma qua một plugin trong ChatGPT. Mình thử kết nối để nhờ nó tạo vài bản variation từ frame có sẵn, và luồng này nhanh hơn mình tưởng: thả link frame vào hộp chat, nó tự dựng bản mới đặt cạnh mẫu gốc.

Key Takeaways:

• Plugin Figma chính chủ chạy được trong cả ChatGPT lẫn Codex, kèm 14 skill design-to-code.
• Kết nối chỉ 2 bước: thêm plugin, rồi mở xem nó có gì.
• Cách dùng gọn nhất là copy link frame trong Figma rồi thả vào hộp chat của agent.
• Luồng này hợp để nhân bản và thử bố cục nhanh, không thay được tư duy thiết kế của designer.

Codex x Figma là gì, và dùng để làm gì?

Đây là cầu nối hai chiều giữa thiết kế và code. Bạn gửi frame từ Figma vào hội thoại ChatGPT hoặc Codex, agent đọc được các layer theo design system, rồi có thể dựng bản mới trong Figma hoặc chuyển thiết kế thành code trong repo. ?Nguồn: OpenAI Developers, Codex: Figma designs to code, 2026

Trong bài này mình dùng nó cho một việc hẹp thôi: lấy vài frame đã được team Product Design dựng sẵn rồi nhờ agent tạo thêm các bản variation để xem thử bố cục. Đây là việc tay chân lặp lại, giao cho agent làm đỡ cho team là hợp lý.

Đây là frame gốc của team, mình không đụng vào phần thiết kế này, chỉ dùng nó làm điểm xuất phát:

Kết nối Figma vào ChatGPT trong 2 bước

Bước 1: Thêm plugin Figma

Vào mục Plugins trong ChatGPT, gõ "figma" ở ô tìm kiếm, chọn Figma của Figma, Inc. (dòng mô tả "Create designs, ship to code") rồi bấm Add.

Lưu ý nhỏ: trong kết quả còn có một plugin tên Product Design của OpenAI, đây là plugin khác, đừng nhầm với plugin Figma chính chủ.

Bước 2: Mở plugin và xem nó có gì

Mở plugin ra, bạn sẽ thấy nó gồm 1 App và 14 Skills như figma-code-connect, figma-create-new-file... Đây là các kỹ năng chuyên cho việc dựng và đồng bộ thiết kế, và chúng chạy trong cả hội thoại ChatGPT lẫn Codex. ?Nguồn: OpenAI Developers, Codex: Figma designs to code, 2026

Cách tạo variation mockup từ frame có sẵn

Bước 1: Lấy link frame trong Figma

Trong file Figma, chọn đúng frame cần nhân bản. Khi chọn, frame sẽ có khung xanh bao quanh và bảng bên phải báo số lượng đang chọn. Bấm nút Copy URLs for selected layers (biểu tượng mắt xích) để lấy link của tất cả frame đang chọn một lượt.

Mỗi frame cho ra một link dạng figma.com/design/...?node-id=..., mỗi node-id là một frame riêng.

Bước 2: Thả link vào hộp chat của agent

Dán các link frame vào hộp chat ở giữa, rồi nhắn yêu cầu ngắn gọn kiểu "đây, sửa nhé" hoặc "tạo variation từ mấy frame này". Ở lần thử của mình, mình thả 3 link frame và agent chạy khoảng 1 phút 50 giây.

Bước 3: Nhận kết quả

Agent tạo 3 variation trong một file mới, đặt ngay bên phải các mẫu gốc để dễ so sánh. Mỗi bản vẫn giữ các thành phần như nút Subscribe, thanh tương tác và điều hướng YouTube của mẫu gốc.

Toàn bộ bản dựng ở đây là biến thể của một thiết kế team Product Design đã làm trước, agent chỉ nhân bản và chỉnh bố cục, không tự nghĩ ra hướng thiết kế mới.

Nhờ dựng nhiều kiểu variation khác nhau

Điểm mình thấy đỡ việc nhất là xin được nhiều bộ theo từng kiểu, mỗi bộ 3 bản. Ví dụ một bộ kiểu immersive, chữ và nút tối giản để hình nổi lên:

Và một bộ kiểu sponsored, có thêm nút kêu gọi hành động như "Shop now" hoặc "Learn more":

Các bộ này đều dựng từ cùng frame gốc của team, chỉ khác cách bố trí thành phần. Nhờ vậy mình có nhanh vài hướng để team chọn, thay vì ngồi kéo thả từng bản một.

Luồng này hợp và không hợp với việc gì?

Hợp với mấy việc này:

• Nhân bản nhanh nhiều biến thể từ một frame gốc để so sánh bố cục.
• Giảm việc tay chân cho designer, nhất là khâu lặp đi lặp lại.
• Dựng thử trước khi quyết định bản nào đáng để designer trau chuốt.

Không hợp với mấy việc này:

• Thay tư duy thiết kế: hướng brand, phân cấp thị giác và quyết định cuối vẫn là của designer.
• Tự quyết một mình: mọi bản agent dựng nên được team Product Design duyệt lại trước khi dùng.

Một lưu ý về tài khoản: plugin, skill và khả năng dùng còn tùy tài khoản, thiết bị, khu vực và cài đặt workspace. Thấy plugin trong danh sách không có nghĩa là tài khoản của bạn đã bật được toàn bộ tính năng bên trong.

Câu hỏi thường gặp về Codex x Figma

Codex x Figma có sửa trực tiếp vào file gốc không?

Ở lần thử này, agent tạo các bản variation trong một file mới và đặt cạnh mẫu gốc, không ghi đè lên frame cũ. Dù vậy, vẫn nên làm trên bản sao và kiểm tra lại để an toàn.

Có cần biết code mới dùng được không?

Không. Để tạo variation mockup như trong bài, bạn chỉ cần copy link frame và nhắn yêu cầu bằng lời. Phần design-to-code để xuất ra code mới là nhánh dùng khác, dành cho lúc bạn muốn chuyển thiết kế thành giao diện chạy được. ?Nguồn: OpenAI Developers, Codex: Figma designs to code, 2026

Dùng cái này có thay được designer không?

Không. Nó chỉ làm nhanh phần nhân bản và dựng thử dựa trên thiết kế có sẵn. Ý tưởng, hướng brand và bản cuối vẫn thuộc về team Product Design.

Đọc tiếp

• Codex x Figma dựng cả một landing page variation theo keyword mới - phần tiếp theo, agent dựng hẳn cả trang landing từ template có sẵn.
• ChatGPT tạo video AI được không? - một plugin khác trong ChatGPT mình đã thử.
• Xem thêm mẹo dùng công cụ AI trên Học lỏm.

Tài liệu tham khảo

• OpenAI Developers: Codex - Figma designs to code, https://developers.openai.com/codex/use-cases/figma-designs-to-code, truy cập ngày 9/10/2026.