Chuyển đến nội dung chính (Skip to content)
Mục lục bài viết
Top Repos

Figwright: kết nối Figma hai chiều với AI coding agent

Figwright: kết nối Figma hai chiều với AI coding agent

Figwright kết nối Figma với AI agent để đọc thiết kế, hỗ trợ sinh code và chỉnh sửa canvas. Xem công dụng, yêu cầu cài đặt và link GitHub của dự án.

GitHub: https://github.com/awdr74100/figwright
Tải plugin: https://github.com/awdr74100/figwright/releases

Figwright làm gì?

Figwright kết nối trợ lý lập trình AI với Figma qua MCP server, plugin và WebSocket relay cục bộ. Công cụ hỗ trợ hai chiều: đọc thiết kế để triển khai giao diện và tạo, chỉnh sửa nội dung trên canvas Figma.

Điểm nổi bật

  • Đọc thiết kế: lấy thông tin bố cục, typography, variables và component từ vùng được chọn.
  • Hỗ trợ sinh code: cung cấp ngữ cảnh thiết kế để agent bám framework và thành phần sẵn có của dự án.
  • Chỉnh sửa Figma: tạo frame, văn bản, auto-layout, style và component qua công cụ của server.
  • Tích hợp MCP: làm việc với các client tương thích như Claude Code, Cursor hoặc Codex.
Các tab Activity, Context và Debug của plugin Figwright
Bảng plugin Figwright do repository cung cấp. Nguồn ảnh. Mở hình để xem chi tiết.

Hữu ích cho ai?

Phù hợp với frontend developer và designer thường chuyển qua lại giữa thiết kế và mã nguồn. Có thể lưu repo này khi cần thử quy trình lấy một màn hình Figma làm đầu vào triển khai, hoặc dựng lại bố cục từ mô tả để thảo luận với nhóm.

Lưu ý trước khi dùng

Cần Figma, MCP client và Node.js đúng phiên bản theo README. Server và plugin cần được cập nhật tương thích. Dữ liệu mà agent đọc được vẫn chịu chính sách của client và nhà cung cấp AI bạn sử dụng.

Tổng hợp từ nguồn chính thức ngày 28/10/2026; chưa kiểm thử cài đặt hoặc vận hành.

Ảnh bìa: tài nguyên giới thiệu từ repository của dự án, chuyển sang WebP.

Tìm hiểu thêm

Figwright: kết nối Figma hai chiều với AI coding agent | thanhnh.id.vn