Figma, Tools, Tracepen

Tracepen cho Figma: Plugin Chuyển Ảnh Sang Vector

Đăng vào bởi Nguyen Huu Khanh

Cài Tracepen trên Figma Community →

Tracepen chuyển một bức ảnh — file bạn mở từ máy, hoặc layer đang chọn trên canvas — thành path vector chỉnh sửa được ngay trong Figma, mỗi màu một path. Bộ trace là tất định: không AI, không ngẫu nhiên, cùng ảnh với cùng thiết lập luôn ra cùng một bộ đường cong, và việc chuyển đổi diễn ra trên máy bạn. Miễn phí với đủ mọi tính năng và vài lượt xuất mỗi ngày với tài khoản 3dshouse miễn phí. Tracepen Pro bỏ giới hạn ngày với giá $80 mua một lần, và một lần mua dùng chung cho bản web, extension SketchUp, add-on Blender và plugin này.

  • Node vector thật, không phải ảnh dán lên: kết quả là một frame chứa các path vector, chỉnh được bằng công cụ node.
  • Use selection: vector hóa thứ đã có sẵn trên canvas — việc mà không định dạng xuất file nào làm thay bạn được.
  • Mỗi màu một path, lỗ nằm luôn trong path đó, đường cong fit thành Bezier.
  • Bốn thông số đáng chỉnh: số màu, lọc nhiễu, vùng nhỏ nhất được giữ, độ bo góc.
  • Trace không tính lượt — trace lại bao nhiêu lần tùy ý; chỉ khi đặt kết quả lên canvas mới tính là một lượt xuất.
  • Phát hành miễn phí trên Figma Community theo Community Free Resource License.

Plugin làm gì trong Figma

Panel mở cố định 480 x 720 px và mang đúng giao diện của bản web: chọn file, cắt ảnh, bốn thanh trượt, danh sách layer màu và một nút. Khi bạn bấm Add to design, plugin đưa dữ liệu vector đã trace cho bộ nhập SVG của chính Figma, nên bản trace hiện ra là một frame gồm các path vector chứ không phải bitmap dán lên bảng. Mỗi path là hình học sống: boolean, bo góc, đổi màu, đưa vào component đều được.

Plugin chạy trong file Figma Design. Manifest chỉ cho phép hai địa chỉ mạng: 3dshouse.com để đăng nhập và kiểm lượt miễn phí, và tracepen.3dshouse.com để tải ảnh mẫu ở lần dùng đầu. Ảnh của bạn được trace ngay trong panel của plugin, và không request nào mang nó theo.

Vì sao “Use selection” là lý do plugin tồn tại

Tôi làm bản web trước, và SVG vốn đã nhập vào Figma gọn gàng. Vậy một plugin chỉ đáng có khi làm được điều mà vòng xuất-nhập file không làm được: đọc canvas. Bấm Use selection, plugin nhờ Figma xuất node đầu tiên đang chọn thành PNG — node nào cũng được: ảnh chụp, frame, group, bản phác đã flatten — rồi đưa thẳng vào bộ trace như thể bạn mở nó từ ổ đĩa. Không chọn gì, hoặc chọn thứ Figma không cho xuất, panel sẽ báo thay vì lặng lẽ thất bại. Trong mọi nơi Tracepen chạy, Figma là nơi duy nhất trao được vùng chọn, nên nút này không có ở bản nào khác.

Cách trace ảnh trong Figma

  1. Trong file Figma Design, chạy Plugins → Tracepen.
  2. Đăng nhập. Plugin mở một tab trình duyệt để đăng nhập 3dshouse và chờ — tối đa mười phút — rồi tự nhận phiên đăng nhập. Cần một tài khoản miễn phí trước khi dùng được công cụ.
  3. Mở một file ảnh (hoặc bấm một ảnh mẫu), hoặc chọn một layer trên canvas rồi bấm Use selection.
  4. Khi mở, ảnh được phân tích: hình phẳng và ảnh chụp đi hai đường lượng tử hóa khác nhau, và Color number được đặt sẵn theo số màu thật sự tìm thấy.
  5. Tinh chỉnh. Noise filter làm mượt trước khi lượng tử hóa (0 là tắt). Merge min area bỏ các vùng màu nhỏ hơn số pixel đó. Corner smooth đi từ góc nhọn đến bo tròn hẳn. Line thickness và Line color thêm nét viền.
  6. Bấm Convert. Nút đếm từng bước khi chạy và kết thúc bằng số màu đã tạo ra.
  7. Xem danh sách Color Layers, đổi màu một ô hoặc bỏ tick layer không cần — layer bỏ tick sẽ không có trong kết quả.
  8. Bấm Add to design.

Thứ gì xuất hiện trên canvas

Mỗi màu đang hiện thành đúng một path chứa mọi đường viền ngoài và mọi lỗ, tô theo quy tắc even-odd, nên chữ O vẫn là chữ O chứ không phải hai hình chồng lên nhau. Frame mang tên file gốc, nằm giữa khung nhìn hiện tại và được chọn sẵn, sẵn sàng để kéo hay group. Layer xếp theo diện tích lớn trước, rồi theo độ gần màu, nên các dòng cạnh nhau trong danh sách trông giống nhau.

Hai chi tiết đáng biết, vì chúng chặn những lời phàn nàn quen thuộc với bộ trace. Khi Line thickness bằng 0, mỗi vùng vẫn có nét viền 1 pixel cùng màu tô — nó xóa những đường khe mảnh thường thấy giữa hai màu phẳng cạnh nhau. Và bước dọn vùng nhỏ gộp các đốm vào vùng láng giềng có cạnh chung dài nhất, nhưng luôn giữ ít nhất một mảng cho mỗi màu, nên viền đen 1 px vẫn còn khi Merge min area đặt cao. Đặt Color number bằng 1 thì bạn có một hình bóng: một mask duy nhất theo ngưỡng độ sáng.

Tracepen, Vectorize của Figma và các plugin trace khác

Từ tháng 2/2026 Figma có Vectorize riêng, một tính năng AI cho Full seat trên gói trả phí có bật AI. Tracepen dành cho tất cả những người còn lại, và cho ai muốn cùng một ảnh luôn ra cùng một bộ path, mỗi màu thành một layer. Muốn xem Vectorize và mười một plugin trace đặt cạnh nhau (hỗ trợ màu, ảnh có rời khỏi Figma không, giá), đọc so sánh các plugin chuyển ảnh sang vector trong Figma.

Những điều cần biết

  • Ảnh xuất từ vùng chọn có giới hạn. PNG mà Figma trao cho plugin được co để cạnh dài là 1500 px. Một thumbnail nhỏ phóng to trên canvas vẫn trace như một thumbnail nhỏ — nếu có file gốc, hãy mở file gốc.
  • Ảnh lớn làm panel bận. Việc chuyển đổi chạy trong chính panel, có chủ ý: sandbox plugin của Figma làm đứng cả giao diện khi code ở đó chạy lâu, nên phần nặng được để ngoài sandbox. Panel vẫn bận suốt lượt chạy, nên ảnh chụp lớn phải chờ, còn logo hay icon là cỡ mà công cụ được làm ra cho.
  • Add to design là thao tác tính lượt, giống hệt nút tải file ở các bản khác. Việc kiểm lượt chạy trước khi tạo node, nên lần thêm bị từ chối sẽ không đặt gì lên canvas.
  • Không có menu Download. Trong công cụ thiết kế, panel thay nó bằng Add to design. Cần SVG, PNG, PDF hay ba kiểu DXF thì mở cùng ảnh trên bản web.
  • Khử răng cưa làm tăng số màu. Một ảnh chụp màn hình “hai màu” mang thêm các sắc độ trung gian dọc theo mọi cạnh. Hãy giảm số màu hoặc tăng diện tích vùng tối thiểu.
  • Đăng nhập theo từng nơi. Iframe của plugin không có bộ nhớ trình duyệt, nên phiên đăng nhập được giữ trong bộ nhớ plugin của Figma — đăng nhập trên bản web không làm bạn đăng nhập ở đây.

Miễn phí và Pro

Gói miễn phí không phải bản demo bị cắt: đủ tính năng, đủ màu, mọi định dạng, mọi nền tảng. Giới hạn duy nhất là vài lượt xuất mỗi ngày cho mỗi tài khoản, và số lượt đó dùng chung giữa bản web, SketchUp, Blender và plugin này, vì tất cả cùng đếm trên một tài khoản. Trace và trace lại thì miễn phí, không giới hạn, nên bạn thử thiết lập bao lâu cũng được và chỉ tiêu một lượt khi đã ưng. Tracepen Pro là gói mua một lần cho mỗi tài khoản, giá gốc $80, bỏ giới hạn ngày ở mọi nơi cùng lúc.

Các bản khác

Cài đặt

Cài Tracepen trên Figma Community →

  1. Mở trang Community và mở plugin trong Figma từ đó.
  2. Trong file Figma Design, chạy Plugins → Tracepen.
  3. Đăng nhập bằng tài khoản 3dshouse miễn phí trong tab trình duyệt vừa mở, rồi quay lại panel.

Yêu cầu

  • Tài khoản Figma và một file Figma Design.
  • Tài khoản 3dshouse miễn phí để đăng nhập và đếm lượt xuất mỗi ngày.
  • Figma bản desktop hoặc trình duyệt; plugin chạy bên trong Figma, không phải cài gì thêm trên máy.
Nguyen Huu Khanh

Architect turned developer