html-sketchapp/html-sketchapp

🎨 Chuyển HTML thành Sketch — Giải pháp chia sẻ style guide từ code

html-sketchapp biến các phần tử HTML thành các lớp, biểu tượng (symbol), kiểu văn bản và màu sắc trong Sketch.

html-sketchapp là một công cụ cho phép xuất nội dung HTML sang định dạng Sketch, hỗ trợ tạo ra các file .asketch.json chứa các lớp, biểu tượng, kiểu văn bản dùng chung và màu sắc tài liệu. Dự án ra đời để giải quyết nhu cầu chia sẻ style guide từ team front-end với team thiết kế một cách nhanh chóng, mà không cần phụ thuộc vào React hay xây dựng lại giao diện bằng các thành phần generic.

✨ Điểm nổi bật

• Chuyển đổi HTML → Sketch layer/symbol: hỗ trợ xuất các phần tử HTML thành các lớp hoặc biểu tượng trong Sketch.
• Xuất kiểu văn bản dùng chung: tự động tạo các shared text styles từ CSS.
• Xuất màu sắc tài liệu: lấy màu sắc từ HTML/CSS và lưu vào document colors của Sketch.
• Hỗ trợ chạy trong trình duyệt thường hoặc headless: linh hoạt tích hợp vào pipeline CI/CD.
• Cung cấp script ví dụ rõ rệt: hai dự án mẫu giúp người dùng nhanh chóng bắt đầu.
• Plugin Sketch đi kèm: asketch2sketch.sketchplugin giúp nhập file .asketch.json trực tiếp vào Sketch.

💡 Vì sao đáng chú ý

Khác với react-sketchapp yêu cầu dùng React, component generic và viết CSS bằng JS, html-sketchapp cho phép làm việc trực tiếp với HTML và CSS hiện có. Đây là lựa chọn lý tưởng cho các team không muốn refactor toàn bộ giao diện chỉ để đồng bộ với Sketch. Tuy nhiên, dự án còn một số giới hạn như không hỗ trợ pseudo-elements, một số thuộc tính CSS (ví dụ: overflow), và yêu cầu font chữ phải được cài đặt cục bộ.

---

#HTMLtoSketch #SketchPlugin #DesignSystem #OpenSource #Frontend #TiniX