​
Figma Integration

6 skills chuyên biệt cho việc làm việc với Figma — từ implement design sang code, push code lên Figma, đến build design system.
Figma skills yêu cầu Figma MCP server đã được cấu hình. Kiểm tra .claude/settings.json → MCP servers.

​
Bảng tham chiếu

​
Workflow Figma → Code

1

Bước 1: Load figma-use (BẮT BUỘC)

Luôn gọi figma-use skill trước khi thao tác với Figma. Skill này setup context và prevent common failures.
2

Bước 2: Implement design

Cung cấp Figma URL → nhận production-ready code với 1:1 visual fidelity. Hỗ trợ: React, Vue, HTML/CSS, Tailwind.
3

Bước 3: Code Connect (optional)

Tạo .figma.js files map Figma components → code snippets. Giúp maintain sync giữa Figma và codebase.

​
Workflow Code → Figma

1

Bước 1: Load figma-use (BẮT BUỘC)

Luôn gọi figma-use skill trước.
2

Bước 2: Push design lên Figma

Mô tả trang/view cần tạo → skill tự discover design system components, import variables/styles, assemble screens section-by-section.
3

Bước 3: Build Design System (nếu chưa có)

Tạo: variables/tokens, component libraries, theming (light/dark), foundations docs.

​
Chi tiết từng skill

Direction: Code/mô tả → Figma screensPush code hoặc mô tả trang → tạo Figma screens với components, variables, styling.
Output: Figma screens với proper components, variables, naming convention.Trigger khi:
  • “Write to Figma”, “create in Figma from code”
  • “Push page to Figma”, “build landing page in Figma”
  • “Update Figma screen to match code”
Khi nào dùng: Sau khi code landing page, push design lên Figma để share với team.
Direction: Bidirectional mappingTạo .figma.js files map Figma components → code snippets. Maintain sync.
Output: .figma.js files trong codebase pointing từ Figma → code.Khi nào dùng:
  • Maintain sync giữa Figma design system → code components
  • Designers want to see code when clicking component in Figma
  • Enable “Go to code” in Figma → jump to component file
Direction: Figma → Code (1:1 visual fidelity)Cung cấp Figma URL → nhận production-ready code với 1:1 visual fidelity.
Output: Production-ready code (React/Vue/HTML) với đúng styles từ Figma.Hỗ trợ: React, Vue, HTML/CSS, Tailwind.Khi nào dùng: Designer cung cấp Figma file → dev cần implementation.
Direction: Code → Figma design systemTừ codebase, tạo comprehensive design system trong Figma.
Output:
  • Variables/tokens (colors, spacing, typography)
  • Component libraries với variants
  • Theming (light/dark modes)
  • Foundation documentation
Khi nào dùng: Reconcile gaps giữa code design system → Figma.

​
Quy tắc quan trọng

  1. LUÔN gọi figma-use trước mọi use_figma tool call — bỏ qua sẽ gây lỗi khó debug
  2. figma-implement-design dùng cho Figma → Code
  3. figma-generate-design dùng cho Code → Figma
  4. Không nhầm lẫn 2 hướng — kiểm tra kỹ trước khi dùng