Code Connect là gì?
Còn gọi: Figma, figma code connect, kết nối component với code
Code Connect là tính năng của Figma giúp nối component trong thư viện thiết kế với component thật trong mã nguồn, để Dev Mode hiển thị đúng đoạn code của đội lập trình thay vì code tự sinh.
Hiểu kỹ hơn
Khi chưa có Code Connect, Dev Mode chỉ gợi ý CSS hoặc code tự sinh từ lớp đồ hoạ, thường không khớp với thư viện component mà lập trình viên đang dùng. Với Code Connect, đội kỹ thuật khai báo mỗi component Figma tương ứng với component nào trong code (React, SwiftUI, Jetpack Compose, HTML và một số nền tảng khác), kèm cách ánh xạ property, ví dụ variant Size=Large thành size='lg'. Từ đó, khi chọn một instance nút bấm trong Dev Mode, người xem thấy đúng dòng code như Button size lg variant primary. Có thể thiết lập qua công cụ dòng lệnh hoặc giao diện Code Connect trong Figma. Tính năng thuộc nhóm Dev Mode nên có thể yêu cầu gói trả phí cấp tổ chức. Mẹo: đặt tên property trong Figma giống tên prop trong code ngay từ đầu, việc ánh xạ sẽ đơn giản hơn nhiều.
