​
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

SkillMô tảHướng
figma-usePrerequisite — phải gọi trước mọi use_figma callSetup
figma-implement-designFigma → Production code (1:1 fidelity)Figma → Code
figma-generate-designCode/mô tả → Figma screensCode → Figma
figma-generate-libraryBuild design system trong Figma từ codebaseCode → Figma
figma-code-connectMap Figma components → code snippetsBidirectional
figma-create-design-system-rulesGenerate design rules cho projectSetup

​
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

figma:figma-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)

figma:figma-code-connect
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

figma:figma-generate-design
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ó)

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

​
Chi tiết từng skill

Figma → Code với 1:1 visual fidelity.Trigger khi:
  • User cung cấp Figma URL
  • Nói “implement design”, “generate code from Figma”
  • Cần build components matching Figma specs
Output: Production-ready code (React/Vue/HTML) với đúng colors, spacing, typography từ 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