AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Đồng bộ hai chiều Figma ↔ Motion Kit

Giữ bộ motion graphics (Remotion) và các board Figma luôn khớp nhau: chỉnh trong Figma thì Claude chuyển vào component và brand token, đổi trong code thì cập nhật ngược lại board.

Thiết kế · UINâng cao★ 422⑂ 59Điểm AI 8/10Cập nhật lần cuối: 23 thg 10, 2026

Làm được gì

  • Thiết lập cấu trúc mirror: một trang riêng trong file thương hiệu (ví dụ "Claude - Editable"), mỗi phiên bản kit là một section, mỗi component là một board đúng kích thước khung hình.
  • Ràng buộc màu và typography vào Variables của Figma (ink, paper, accent, dải xám, cỡ chữ, padding) để đổi màu chỉ cần sửa một chỗ.
  • Khi tác giả nói "tôi đã sửa board": đọc từng layer thay đổi (font, weight, size, line-height, padding, vị trí, bo góc, stroke, biến đang dùng) rồi port vào brand.json trước, sau đó mới tới layout component.
  • Render ảnh preview của chính component đó để so sánh cạnh board, và liệt kê thay đổi dạng "title Light 120 → Regular 108, padding 64 → 80".
  • Chiều ngược lại: khi code thay đổi (layout khung hẹp, dải an toàn cho phụ đề), cập nhật board tương ứng hoặc báo board nào đã lỗi thời.

Dành cho ai

  • Creator/studio làm video bằng Remotion nhưng thiết kế bằng Figma.
  • Người muốn brand token và Figma Variables là nguồn sự thật duy nhất.
  • Người đã hoặc sẵn sàng cấu hình Figma MCP trong Claude Code.

Ví dụ sử dụng

  1. "Tôi đổi padding board tiêu đề thành 80 và label thành mono in hoa" → Claude đọc board, sửa token, render preview đối chiếu và báo danh sách thay đổi.
  2. Thêm layout dọc (narrow-frame) trong code → Claude tạo board Figma tương ứng và sắp lại section theo phiên bản kit.
  3. "Cho tôi xem bộ kit trong Figma" → tạo board cho từng component đúng frame size, đặt tên layer đầy đủ và bind biến.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/appariciojunior/video-editor-skills/HEAD/skills/figma-roundtrip/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên AI Skill Mart.
Copy thư mục skills/figma-roundtrip từ repo GitHub appariciojunior/video-editor-skills vào ~/.claude/skills/figma-roundtrip/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/appariciojunior/video-editor-skills.git && mkdir -p ~/.claude/skills && cp -r video-editor-skills/skills/figma-roundtrip ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và clone repo: git clone https://github.com/appariciojunior/video-editor-skills.git
  2. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  3. Sao chép skill: cp -r video-editor-skills/skills/figma-roundtrip ~/.claude/skills/
  4. Nếu repo có skill figma-use đi kèm, hãy sao chép tương tự vì skill này cần nó khi ghi vào file Figma.
  5. Kết nối Figma MCP server trong Claude Code và đảm bảo có quyền truy cập file Figma.
  6. Ghi file key và tên trang chỉnh sửa (ví dụ "Claude - Editable") vào CLAUDE.md của dự án.
  7. Khởi động lại Claude Code rồi thử câu lệnh: "Tôi vừa sửa board, port vào kit giúp tôi".
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION