Tôi đã tìm thấy một tập lệnh thực hiện chính xác điều đó (tạo CSS và HTML cho các lớp và cung cấp tùy chọn xuất các giá trị theo% giá trị) và cắt giảm một nửa công việc cho nhà phát triển web cho Photoshop. Bây giờ tôi tò mò liệu có ai đã bắt gặp / tải lên một plugin hoặc có thể chỉ cho tôi một tính năng gốc như thế cho ứng dụng Phác thảo không. Sự vắng mặt của điều đó đang làm cho quá trình chuyển đổi của tôi sang Phác thảo thực sự đau đớn. Hoặc là người mới đối với Phác thảo Tôi chỉ thiếu một cái gì đó khác biệt về mặt ý thức hệ về cách Phác thảo hoạt động với CSS và HTML.

Đây có thể không hoàn toàn là câu trả lời mà bạn đang tìm kiếm, nhưng tôi thấy nó tốt hơn là trao các kiểu dáng tự động, tầm thường cho các kỹ sư.

Đánh dấu chọn lọc

Tôi chắc chắn rằng bạn đã phát hiện ra trình lấy CSS của trình đơn ngữ cảnh của Phác thảo. Bạn có thể chọn bao nhiêu đối tượng tùy thích và bạn sẽ nhận được CSS trên bảng tạm của mình nhanh hơn bạn có thể dán nó.

Tất nhiên không có bộ chọn, nó thực sự chỉ là ghi chú CSS. Mỗi khối được gọi ra bởi một nhận xét trước bằng cách sử dụng tên của lớp, như vậy:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

Chú thích tập tin

Phác thảo là một trình cắm tạo ra các mức chú thích khác nhau theo thông số kỹ thuật của bạn. Có một video demo ở đây . Ý tưởng cơ bản là chú thích các số quan trọng và để cho dev tự viết mã.

Ngoài chú thích

Bạn cũng có thể thử một công cụ như thế này, một mình hoặc kết hợp:

• Zeplin tạo ra một phiên bản độc lập, có thể chia sẻ của thiết kế Phác thảo của bạn để kiểm tra nhà phát triển của bạn, lấy ra thông số kỹ thuật theo yêu cầu.
• Marvel là một công cụ tạo mẫu nhập các tệp Phác thảo. Không có gì giao tiếp như một nguyên mẫu tương tác!

Trình tạo HTML thử nghiệm

Tôi chưa bao giờ sử dụng cái này và rõ ràng là trong giai đoạn đầu phát triển, nhưng, bổ trợ Blade có vẻ đầy hứa hẹn.

Blade là một plugin Sketch 3 để tự động tạo HTML. Nó sẽ tạo thẻ <div> cho nhóm, thẻ <p> cho văn bản, v.v.

Xem các liên kết sau http://blog.mengto.com/the-best-hidden-features-in-sketch/

Theo dõi blog của Mạnh To để cập nhật các hướng dẫn, mẹo & thậm chí các thủ thuật thú vị. http://blog.mengto.com/ https://designcode.io/