10 plugin phác thảo miễn phí cho nhà phát triển web
Phác thảo đang nhận được rất nhiều lực kéo giữa các nhà thiết kế và phát triển web. Điều này có lẽ là vì nó là trực quan, dễ học và đi kèm với nhiều tính năng giúp tạo nguyên mẫu trang web dễ dàng hơn nhiều. Cũng có thể là do ứng dụng này có thể mở rộng, tức là bạn có thể thêm các tính năng mới vào ứng dụng một cách dễ dàng với sự trợ giúp của các plugin.
Dưới đây là 10 plugin có thể giúp bạn tăng năng suất khi làm việc với Phác thảo. Có rất nhiều loại, từ trình tạo nội dung, bộ chọn bảng màu và chúng có thể giúp bạn hiển thị các phép đo lớp hoặc tự động thêm phần đệm vào một lớp.
1. CSS Buddy
Bạn bè CSS cho phép bạn thêm CSS vào lớp của bạn trong không gian làm việc của Phác thảo. Về cơ bản, bạn có thể áp dụng chiều rộng, chiều cao, độ mờ, bóng hộp, đường viền và nền cho lớp bằng CSS.
Với plugin này được cài đặt, chỉ cần chọn một lớp sau đó chọn Áp dụng để chọn từ menu plugin. Một hộp thoại sẽ nhắc bạn nhập biểu định kiểu của bạn. Thêm nội dung CSS mà không có lớp CSS và xem lớp của bạn hình thành.
2. Bảng màu thiết kế vật liệu
Nếu bạn theo xu hướng Thiết kế Vật liệu, một điều nổi bật bạn sẽ nhận thấy là việc sử dụng màu sắc đặc biệt. Thiết kế Vật liệu có một bảng màu tuyệt vời. Bây giờ bạn có thể mang nó đến không gian làm việc của bạn với Chất liệu thiết kế Plugin Bảng màu.
Plugin này sẽ tạo các bảng màu trong vài giây mà bạn không phải đóng không gian làm việc. Chọn Hue, Value hoặc Swatch để tạo bảng màu phù hợp với dự án của bạn.
3. Sổ tay phác thảo
Đôi khi chúng ta cần thể hiện những gì chúng ta làm trong một bình luận hoặc thông qua tài liệu. Nếu bạn đang làm việc trên các dự án với các nhà thiết kế khác hoặc sự tham gia của khách hàng, điều này cũng cần thiết để bạn có thể đảm bảo rằng kết quả là những gì mọi người đang hướng tới.
Máy tính xách tay phác thảo là một plugin để ghi lại thiết kế của bạn trong Phác thảo một cách dễ dàng. Nó sẽ thêm một thanh bên bổ sung vào không gian làm việc của bạn, trong đó có các bình luận bạn thêm vào bất kỳ yếu tố nào trên thiết kế của bạn. Bạn có thể sắp xếp lại nhận xét, sắp xếp lại, xóa và chuyển đổi mức độ hiển thị của nhận xét.
4. Người chơi ban ngày
Trước khi sử dụng hình ảnh thực trong thiết kế, chúng tôi thường sử dụng hình ảnh giữ chỗ để tăng tốc quá trình thiết kế. Đối với Phác thảo, bạn có thể sử dụng Người chơi ban ngày để thêm các trình giữ chỗ tùy chỉnh vào bất kỳ lớp nào trên không gian làm việc Phác thảo của bạn từ 6 dịch vụ hình ảnh giữ chỗ bao gồm Placekeep.it, LoremPixel và. Sau khi kích hoạt, bạn có thể đặt chiều rộng, chiều cao và thông tin khác của hình ảnh.
5. Trình tạo nội dung
Chúng tôi đã có một plugin để chèn hình ảnh giữ chỗ, còn một cái cho nội dung chung? Trình tạo nội dung giúp bạn thêm dữ liệu giả như hình đại diện, tên, dữ liệu định vị địa lý và hơn thế nữa. Hoạt động tuyệt vời cho các thiết kế mockup và để giảm đau đầu khi cố gắng tìm ra cách tạo dữ liệu tại chỗ.
Để thêm dữ liệu giả, chỉ cần chọn một lớp, sau đó chọn Plugin> Trình tạo, và lựa chọn Địa lý, Trình chiếu hoặc là Hình ảnh.
6. Biện pháp phác thảo
Phác thảo là một công cụ đo lường cho Phác thảo. Nó đo chiều dài hoặc kích thước của một lớp (hoặc lớp) trong thiết kế của bạn. Bạn cũng có được phần đệm và lề của một lớp cũng như khoảng cách giữa hai lớp. Phác thảo cũng có thể in các thuộc tính của lớp, chẳng hạn như màu sắc, đường viền và độ mờ. Tất cả các phép đo có thể được đưa lên thông qua các phím tắt.
7. Nút động
Nút động giúp bạn tạo nút với miếng đệm cố định dễ dàng. Nó sẽ tự động điều chỉnh phần đệm dựa trên giá trị bạn đưa ra, bất kể độ dài của văn bản của bạn. Với plugin được cài đặt, một văn bản có thể được chuyển đổi thành cấu trúc với phím tắt Command + J. Số lượng phần đệm cần thiết sau đó có thể được bấm vào lớp văn bản (0: 0: 0: 0) (trong nhóm nút flex).
8. Thang đo kiểu chữ
Typographic Scale là một plugin để biến lớp văn bản được chọn thành tỷ lệ typographic. Để sử dụng plugin này, chỉ cần chọn lớp văn bản (một hoặc nhiều) hoặc lớp hỗn hợp có chứa ít nhất một lớp văn bản, sau đó chọn Plugin> Tỷ lệ kiểu chữ và điều chỉnh giá trị trên hộp thoại. Kết quả là một tập hợp các văn bản được chia tỷ lệ tuân theo các quy tắc về tỷ lệ chính tả.
9. Bộ điều biến
Với Bộ điều chế bạn có thể điều khiển phần đệm cho nút, mô-đun hoặc các khu vực trên thiết kế của mình bằng phím tắt Shift + Command + M. Bạn có thể kết hợp tất cả các lớp của mình, nhóm nó sau đó sử dụng phím tắt để tự động điều chỉnh phần đệm dựa trên giá trị phần đệm bạn cần . Xem video demo để thấy điều này trong hành động.
10. Lưỡi dao
Bạn đã bao giờ nghĩ về việc chuyển đổi thiết kế của bạn từ bản phác thảo sang HTML chưa? Nếu vậy, có lẽ bạn nên lấy Lưỡi, một plugin phác thảo tự động tạo các tệp HTML từ thiết kế của bạn. Nó sẽ chuyển đổi nhóm thành div, văn bản thành p và v.v..
Khi sử dụng Blade, bạn có thể nói cho plugin biết phần tử DOM nào sẽ tạo bằng cách thêm một tên đặc biệt vào lớp, chẳng hạn như [btn] hoặc nhập [văn bản] để Blade biết nên làm gì. Kiểm tra video demo này cho một cái nhìn bên trong.
Đọc ngay: 12 Plugin hữu ích cho nhà phát triển WordPress
