Từ Ảnh Chụp Màn Hình Đến Figma Trong 5 Phút — Không Cần Plugin

Tại Sao Dùng SVG Thay Vì Plugin?

Plugin như html.to.design rất tiện nhưng có giới hạn 20 lần import/tháng trên free tier. Với designer làm 10+ screen mỗi ngày, limit đó không đủ dùng hết tuần. SVG là cách thay thế hoàn toàn miễn phí, không giới hạn, và Figma hỗ trợ native — kéo file .svg vào là được các layer có thể chỉnh sửa ngay.

Bài viết về html to figma: Quy trình 6 bước chuyển đổi Hình ảnh thành File Figma có thể chỉnh sửa bằng AI và html.to.design

Những Gì Bạn Cần

Một ảnh chụp màn hình UI cần làm lại trong Figma
Tài khoản Claude (claude.ai) hoặc Gemini
Figma (free plan là đủ)

Bước 1 — Chuẩn Bị Ảnh

Chụp hoặc lưu ảnh màn hình thiết kế bạn muốn convert. Ảnh càng rõ nét, AI phân tích càng chính xác.

Bước 2 — Gửi Ảnh Cho AI Với Prompt Chuẩn

Mở Claude (claude.ai) hoặc Gemini (gemini.google.com), upload ảnh lên và dùng prompt sau:

Prompt:

Convert this UI screenshot to a clean SVG file for Figma import.

Rules:
1. Extract all colors from the image first. List them as:
   --color-name: #hexvalue
   Never invent colors. No generic defaults like #333 or #eee.

2. Canvas width: 1200px. Calculate height from content.

3. For icons: Instead of using pre-made icons, design a logo that closely resembles the submitted image.

4. Output complete SVG code ready to drag into Figma.

Kết quả AI trả về sẽ gồm 2 phần:

Phần 1 — Bảng màu trích xuất (trước khi viết SVG): Dùng để kiểm tra xem các mã màu đã khớp với mong muốn chưa. Nếu muốn thay đổi thì fix luôn.

EXTRACTED COLORS:
--page-bg: #f8f8f8
--sidebar-bg: #ffffff
--sidebar-border: #e5e5e5
--text-dark: #1a1a1a
--text-mid: #4a4a4a
--accent: #e84855
--border: #e0e0e0
--code-bg: #f5f0ff
--code-text: #c53030

Phần 2 — File SVG hoàn chỉnh:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720">
  <defs>
    <style>text { font-family: "Inter", sans-serif; }</style>
  </defs>
  <!-- SIDEBAR -->
  <rect x="0" y="0" width="220" height="720" fill="#ffffff" stroke="#e5e5e5" stroke-width="1"/>
  ...
</svg>

Bước 3 — Lưu File SVG

Sau khi AI trả về code SVG, tải file .svg về máy.

Bước 4 — Mở Figma và chuẩn bị file Design Trống

Đây là bước nhiều người hay bị nhầm — phải vào trong canvas, không phải màn hình home.

Vào figma.com → đăng nhập
Ở màn hình Drafts, click nút "Design" góc trên phải
Figma mở một file Design mới với canvas trắng — bạn sẽ thấy ruler xung quanh và lưới mờ ở giữa
Đây đúng là nơi cần kéo file SVG vào

Nếu bạn đang ở màn hình Drafts (chỉ thấy danh sách file) — kéo SVG vào đây sẽ không có tác dụng. Phải vào trong canvas trước.

alt

Bước 5 — Kéo Thả File SVG Vào Figma

Kéo file SVG từ thư mục và thả vào giữa canvas Figma
Figma xử lý trong 1–2 giây và hiển thị toàn bộ layout

Mẹo Để Kết Quả Tốt Hơn

Về ảnh đầu vào: Ảnh độ phân giải cao cho kết quả màu sắc chính xác hơn. Nếu ảnh bị mờ hoặc nén nhiều, AI khó sample đúng màu.

Về prompt: Thêm ngôn ngữ của UI vào prompt nếu cần — ví dụ "UI bằng tiếng Nhật, dùng font Noto Sans JP" để AI chọn đúng font-family.

Về icon: Đừng yêu cầu AI vẽ icon — kết quả luôn sai lệch và mất thời gian chỉnh. Placeholder xám nhạt sạch hơn nhiều và dễ swap trong Figma.

Về nhiều screen: Nếu có nhiều ảnh, gửi từng ảnh riêng và đặt tên file SVG theo thứ tự (screen-01.svg, screen-02.svg...). Sau đó import tất cả vào cùng một Figma file, mỗi file một frame.

Tổng Kết Workflow

Ảnh chụp màn hình
      ↓
Gửi cho Claude / Gemini + prompt chuẩn
      ↓
AI trích xuất màu → generate SVG
      ↓
Lưu file .svg về máy
      ↓
Mở Figma → vào Design canvas trống
      ↓
Drag & drop file .svg vào canvas
      ↓
Ungroup → swap icon + component → done

Toàn bộ quá trình từ ảnh đến canvas Figma mất khoảng 5–7 phút mỗi screen. Không plugin, không subscription thêm, không giới hạn lần dùng.