figma-code-connect-components

🔗

figma-code-connect-components

Thiết kế & sáng tạo · Figma

• design
• figma
• design-system

Xem mã nguồn trên GitHub →

Mô tả

Skill này giúp Claude thiết lập Figma Code Connect - cơ chế ánh xạ mỗi component trong thư viện thiết kế Figma tới component thực tế trong codebase (React, SwiftUI…). Sau khi kết nối, designer xem trong Figma sẽ thấy đúng code, props và variant tương ứng với component họ đang thiết kế.

Khi nào nên dùng

• Team đã có design system trong Figma và một thư viện component trong code, muốn đồng bộ hai bên qua Code Connect.
• Cần cập nhật ánh xạ Code Connect sau khi component code đổi tên hoặc thêm prop mới.

Khi nào không nên dùng

• Chưa có thư viện component chuẩn hoá ở cả hai phía (Figma và code) - nên xây dựng design system trước khi kết nối.
• Dự án nhỏ, không có designer dùng Figma thường xuyên - lợi ích của Code Connect sẽ không đáng kể.

Ví dụ

“Thiết lập Code Connect cho component Button trong Figma, trỏ tới <Button /> trong thư viện React của chúng tôi.”

“Cập nhật lại mapping Code Connect vì component Card vừa thêm prop variant mới.”

Mô tả tổng hợp từ danh mục cộng đồng, chưa kiểm chứng trực tiếp - cần quyền truy cập Figma phù hợp (thường yêu cầu gói trả phí) để dùng đầy đủ tính năng Code Connect.

Nguồn

Tổng hợp từ danh mục VoltAgent/awesome-agent-skills, skill gốc do Figma công bố tại officialskills.sh/figma/skills/figma-code-connect-components.

← Xem tất cả Skills