Có cần nối bản vẽ và bản chạy bằng Figma Code Connect không

Figma Code Connect (công cụ nối bản vẽ với bản chạy) không phải thứ cần thiết lập ngay từ đầu. Nó có vị trí rõ ràng trong vòng đời một design system (hệ thống thiết kế): sau khi đã có component thật trong mã, sau khi đội đã tách vai thiết kế và lập trình. Thiết lập sớm hơn thời điểm đó là thiết lập vào chỗ trống.

Code Connect làm gì thật ra

Dev Mode là chế độ xem dành riêng cho lập trình viên trong Figma: họ vào đây để lấy thông số thiết kế và đoạn mã tham khảo. Vấn đề là mặc định Figma tự sinh mã chung chung, không khớp với thư viện component mà đội đang dùng thật sự.

Code Connect giải quyết đúng chỗ đó. Nó nối từng component trong Figma với component tương ứng trong kho mã, để khi lập trình viên chọn một component trong bản vẽ, Dev Mode hiện đúng đoạn mã từ kho của họ, không phải mã tự sinh. Kết quả: lập trình viên copy đoạn mã đó và dùng được ngay, không phải dịch lại từ bản vẽ.

Quan trọng cần nói thẳng: Code Connect không tự viết component. Nó chỉ nối và hiện lại thứ đã có. Không có component trong mã thì không có gì để nối.

Khi nào cần, khi nào chưa cần

Hai cách thiết lập và nên chọn cái nào

Figma cung cấp hai cách thiết lập Code Connect.

• Giao diện trong Figma: thiết lập trực tiếp trong ứng dụng, không cần dòng lệnh, không phụ thuộc ngôn ngữ lập trình. Phù hợp khi muốn thử nhanh hoặc đội thiết kế tự làm mà không có lập trình viên hỗ trợ.
• Dòng lệnh: chính xác hơn vì ánh xạ được từng thuộc tính của component, ví dụ nối thuộc tính "variant" trong Figma với prop tương ứng trong React. Phù hợp khi component có nhiều trạng thái và cần kiểm soát chi tiết. Hỗ trợ React, Web Components và một số loại khác.

Lời khuyên thực tế: bắt đầu bằng giao diện Figma để xác nhận ý tưởng hoạt động, rồi chuyển sang dòng lệnh khi cần ánh xạ thuộc tính.

Lỗi thường gặp khi triển khai

• Thiết lập trước khi có component trong mã: không có gì để nối, thời gian bỏ ra không có kết quả.
• Kỳ vọng nó tự sinh component: Code Connect hiện mã đã có, không viết mã mới. Nhầm điều này dẫn đến thất vọng sai chỗ.
• Nối một lần rồi bỏ quên: component trong mã đổi tên hoặc cấu trúc, ánh xạ trong Code Connect không theo kịp, Dev Mode bắt đầu hiện mã lệch. Cần xem Code Connect như một phần của quy trình cập nhật component, không phải việc làm một lần.

Góc nhìn của Sinh Vũ

Sinh Vũ đặt Figma Code Connect vào Giai đoạn 2 của hành trình dựng design system, cùng thư viện component và tài liệu Storybook (công cụ viết tài liệu component). Đây là vị trí đúng: sau khi component thật đã có trong kho mã, sau khi đội đã đủ lớn để bàn giao trở thành điểm ma sát.

Mục tiêu vận hành là người thiết kế và lập trình viên nhìn cùng một component, dùng cùng một tên, dùng cùng một đoạn mã. Code Connect là công cụ giúp đạt điều đó ở lớp Figma. Nhưng công cụ chỉ có nghĩa khi nền tảng đã đặt trước: token (giá trị thiết kế cơ sở như màu, cỡ chữ, khoảng cách) đã đồng bộ, component đã có tên nhất quán giữa hai phía.

Nối bản vẽ với bản chạy một đổi một để người thiết kế và lập trình viên nhìn cùng một component, không phải hai phiên bản khác nhau của cùng một ý định.

Figma Developer Docs, Code Connect