Mã (code) trong design system là gì?

Một design system chỉ thực sự phát huy khi bản thiết kế và code cùng dùng chung tên, thuộc tính và token. Ví dụ component Button trong Figma có thuộc tính Variant=Primary, Size=Medium thì trong code nên có tham số tương ứng. Token màu và khoảng cách thường được xuất từ Figma Variables thành biến CSS hoặc file JSON để hai bên luôn khớp. Figma hỗ trợ việc này bằng Dev Mode, nơi lập trình viên xem thông số, đoạn code gợi ý và Code Connect để gắn component thiết kế với component code thật. Người thiết kế không cần viết code, nhưng nên hiểu cách code dựng giao diện như hộp CSS, flexbox tương ứng với auto layout để thiết kế dễ hiện thực. Ví dụ: thư viện Material Web của Google cung cấp component code đúng như trong bộ kit Figma. Lỗi thường gặp là coi đoạn CSS tự sinh trong Dev Mode là code hoàn chỉnh để dán thẳng vào sản phẩm.