Figma Code Connect: có cần nối một đổi một không
Câu trả lời phụ thuộc vào một thứ duy nhất: developer của Anh Chị có thực sự mở Figma để tra cứu component không.
Figma Code Connect không bắt buộc và chỉ mang lại giá trị thực sự khi đội kỹ thuật có thói quen mở Figma hàng ngày. Nếu developer chủ yếu làm việc trong IDE và Storybook, đầu tư vào Code Connect sẽ lãng phí vì không ai dùng. Sinh Vũ đưa Storybook vào mọi dự án thiết kế hệ thống như mặc định, còn Code Connect là lựa chọn thêm vào tùy đội.
Figma Code Connect (kết nối code vào component Figma) cho phép developer click vào một component trong Figma và thấy ngay đoạn code thực tế thay vì chỉ thấy CSS tổng quát do Figma tự sinh. Đây là tính năng hữu ích, nhưng câu hỏi đúng không phải "có nên dùng không" mà là "đội của Anh Chị có thực sự tra cứu Figma không". Câu trả lời đó quyết định toàn bộ.
Code Connect giải quyết vấn đề gì
Khi một design system (hệ thống thiết kế) đã trưởng thành, developer cần biết cách dùng component trong code, không chỉ nhìn thấy nó trông như thế nào. Figma mặc định chỉ xuất CSS tổng quát, không phản ánh cách component được triển khai thực tế trong codebase. Code Connect lấp đúng khoảng trống đó bằng cách gắn snippet code thật vào component trong Figma.
Vấn đề là khoảng trống đó chỉ cần lấp nếu developer đang đứng ở phía Figma để nhìn qua. Nếu developer không mở Figma, khoảng trống ấy không tồn tại với họ.
Khi nào nên đầu tư, khi nào nên bỏ qua
Nên đầu tư vào Code Connect khi: Đội thiết kế và kỹ thuật làm việc chặt, developer thường xuyên mở Figma để tra cứu component hoặc kiểm tra thiết kế. Anh Chị đã có gói Figma Organization hoặc Enterprise nên Dev Mode đã bao gồm trong phí. Đội có người chịu trách nhiệm maintain snippet khi component thay đổi.
Nên bỏ qua và tập trung vào Storybook khi: Developer chủ yếu làm việc trong IDE và chỉ mở Figma để nhìn thiết kế tổng thể. Anh Chị chưa có Figma Dev Mode và phải trả thêm phí per seat. Đội nhỏ, không có bandwidth duy trì thêm một lớp tài liệu nữa.
Vì sao Storybook là mặc định của Sinh Vũ
Sinh Vũ đưa Storybook vào deliverable (kết quả bàn giao) của mọi dự án A3 vì một lý do đơn giản: snippet trong Storybook nằm cùng repository với code, được chạy trong CI (môi trường kiểm thử tự động), và bắt buộc cập nhật khi component thay đổi. Tài liệu sống gần code sẽ ít lỗi thời hơn tài liệu sống xa code.
Code Connect thì ngược lại, snippet nằm trong Figma, tách khỏi repository. Khi developer sửa component mà quên cập nhật snippet trong Figma, hai phía sẽ lệch nhau mà không có cơ chế nào phát hiện tự động.
Một nguồn sự thật đúng tốt hơn hai nguồn lệch nhau. Nếu Storybook và Code Connect cùng mô tả một component nhưng khác nhau, developer không biết tin cái nào và thường chọn tự đọc code thay vì tin tài liệu.
Nguyên tắc single source of truth (một nguồn sự thật duy nhất), áp dụng rộng trong kỹ thuật phần mềm
Lỗi thường gặp khi triển khai Code Connect
- Setup xong rồi không ai maintain: snippet trong Figma lỗi thời sau vài tháng, developer mất niềm tin vào tài liệu.
- Figma Dev Mode chưa được bật cho đội developer, Code Connect vô hiệu hoàn toàn dù đã tốn công setup.
- Nhầm Code Connect với token sync: hai tính năng độc lập, phục vụ mục đích khác nhau, cần được quyết định riêng.
- Đầu tư vào Code Connect trong khi đội developer ít khi mở Figma, kết quả là không ai dùng tính năng này.
Góc nhìn của Sinh Vũ
Trước khi quyết định có nên triển khai Code Connect không, Sinh Vũ thường hỏi đội kỹ thuật của khách một câu: "Khi cần biết cách dùng một component, Anh Chị mở cái gì đầu tiên?" Nếu câu trả lời là Figma, Code Connect có giá trị. Nếu câu trả lời là Storybook, tài liệu nội bộ, hoặc đọc thẳng source code, thì đầu tư vào Code Connect sẽ không được dùng.
Trong buổi onboarding với đội kỹ thuật của khách, Sinh Vũ xác định thói quen làm việc thực tế trước khi khuyến nghị kênh tài liệu nào. Không có đáp án đúng cho mọi đội, chỉ có đáp án đúng cho đội cụ thể của Anh Chị.
Nguồn tham khảo
Figma Code Connect documentation (Figma official); Storybook documentation; Sinh Vũ A3 service specification và kinh nghiệm thực hành.
Câu hỏi thường gặp
Code Connect và token sync có phải là một không?
Không. Đây là hai tính năng hoàn toàn khác nhau. Token sync đồng bộ giá trị thiết kế (màu, khoảng cách, chữ) giữa Figma và code. Code Connect gắn component trong Figma với snippet code cụ thể để developer thấy ngay cách dùng component đó. Hai thứ có thể dùng độc lập, không cái nào là điều kiện của cái kia.
Nếu đã có Storybook rồi, Code Connect có thêm gì không?
Có thêm, nhưng chỉ với điều kiện developer thực sự mở Figma. Storybook phục vụ developer ngay trong luồng làm việc quen thuộc và snippet trong đó luôn gần code hơn vì nằm cùng repository và chạy trong CI. Code Connect phục vụ tốt hơn khi designer và developer cùng tra cứu Figma, tức là hai công cụ phục vụ hai thói quen khác nhau, không phải thay thế nhau.
Chi phí để triển khai Code Connect là bao nhiêu?
Figma Code Connect yêu cầu Figma Dev Mode, là tính năng trả phí theo số ghế (seat). Nếu Anh Chị đã có gói Figma Organization hoặc Enterprise thì Dev Mode thường đã bao gồm và chi phí thêm vào không đáng kể. Ngoài phí phần mềm còn có chi phí duy trì: mỗi lần component code thay đổi, snippet trong Figma cũng cần cập nhật theo, nếu không snippet sẽ lỗi thời và gây nhầm lẫn cho đội.