10 безкоштовних ескізів плагінів для веб-розробників

Ескіз набуває великої тяги серед веб-дизайнерів і розробників. Це, мабуть, тому, що це так інтуїтивно зрозумілий, легкий в навчанні і поставляється з багатьма функціями, що значно полегшує створення прототипу веб-сайту. Можливо, це додаток є розширюваним, тобто можна додавати нові функції до програми легко за допомогою плагінів.

Ось 10 плагінів, які допоможуть вам підвищити продуктивність під час роботи з Sketch. Є різноманітні, від генераторів вмісту, селектора кольорової палітри, і вони можуть допомогти вам відобразити вимірювання шару або автоматично додати шар до шару.

1. CSS Buddy

CSS Buddy дозволяє додавати CSS до вашого шару в робочому просторі Sketch. В основному, ви можете застосовувати ширину, висоту, непрозорість, коробку-тінь, кордон і фон для шару за допомогою CSS.

Після встановлення цього плагіна просто виберіть шар, а потім виберіть Застосувати до вибраного з меню плагінів. У діалоговому вікні буде запропоновано ввести таблицю стилів. Додайте вміст CSS без класу CSS і подивіться, як ваш шар має форму.

2. Матеріал оформлення кольорової палітри

Якщо ви будете дотримуватися тенденцій Матеріального дизайну, помітною річчю, яку ви помітите, є використання відмінних кольорів. Матеріальний дизайн має чудову кольорову палітру. Тепер ви можете довести це до робочого простору Матеріал дизайну Колірної палітри.

Цей плагін буде генерувати кольорові палітри за лічені секунди без необхідності закривати робочу область. Виберіть "Тон", "Значення" або "Зразок", щоб створити колірну палітру, яка підходить для вашого проекту.

3. Ескіз ноутбука

Іноді нам потрібно показати, що ми робимо в коментарі або через документацію. Якщо ви працюєте над проектами з іншими дизайнерами або із залученням клієнта, це також необхідно, щоб ви могли переконатися, що результат - це те, до чого прагнуть всі.

Ескіз ноутбука є плагін для документування вашого дизайну в Sketch з легкістю. Він додасть додаткову бічну панель до робочого простору, який містить коментарі, які ви додаєте до будь-якого елементу дизайну. Ви можете змінювати порядок коментарів, змінювати, видаляти та перемикати видимість коментарів.

4. День гравця

Перш ніж використовувати реальні зображення в дизайні, ми часто використовуємо зображення заповнювача, щоб прискорити процес проектування. Для Sketch можна використовувати День гравця додавати індивідуальні заповнювачі до будь-якого шару на робочому просторі Sketch з 6 служб зображення-заповнювача, включаючи Placehold.it, LoremPixel і Unsplash. Після активації можна встановити ширину, висоту та іншу інформацію.

5. Генератор вмісту

Ми вже маємо плагін для вставки зображень-заповнювачів, як про загальний вміст? Генератор вмісту допомагає додавати фіктивні дані, такі як аватари, імена, дані геолокації та багато іншого. Відмінно працює для макетів і для зменшення головного болю від спроби з'ясувати, як генерувати дані на місці.

Щоб додати фіктивні дані, просто виберіть шар, а потім виберіть Плагін> Генератор, і вибрати Geo, Персона або Фотографії.

6. Ескіз Міра

Ескіз міра є інструментом вимірювання для Sketch. Він вимірює довжину або розмір шару (або шарів) у вашій конструкції. Ви також отримуєте відступи і запас шару, а також відстань між двома шарами. Ескіз мір може також друкувати властивості шару, такі як колір, кордон і непрозорість. Всі вимірювання можна отримати за допомогою клавіатурних скорочень.

7. Динамічна кнопка

Динамічна кнопка допомагає легко створювати кнопки з фіксованими накладками. Він автоматично налаштовуватиме оббивку на основі значення, яке ви надаєте, незалежно від довжини тексту. З встановленим плагіном текст може бути перетворений у структуру за допомогою ярлика Command + J. Необхідну кількість заповнення можна ввести в текстовий шар (0: 0: 0: 0) (під групою гнучких кнопок).

8. Типографічна шкала

Типографічна шкала - це плагін для перетворення вибраного шару тексту в друкарський масштаб. Щоб використовувати цей плагін, просто виберіть текстовий шар (один або кілька) або змішаний шар, який містить принаймні один текстовий шар, а потім виберіть Плагін> Типографічна шкала і налаштуйте значення діалогового вікна. Результатом є набір масштабованого тексту, який відповідає правилам типографічного масштабу.

9. Модулятор

С Модулятор Ви можете керувати накладками для кнопок, модулів або областей у вашій конструкції за допомогою комбінації клавіш Shift + Command + M. Ви можете об'єднати всі свої шари, групувати їх, а потім скористатися ярликом, щоб автоматично налаштувати ваші накладення на основі потрібного значення для заповнення . Перегляньте демонстрацію відео, щоб побачити це в дії.

10. Лезо

Ви коли-небудь думали про перетворення вашого дизайну з ескізу в HTML? Якщо так, то ви, напевно, повинні отримати Лезо, плагін Sketch, який автоматично генерує HTML-файли з вашого дизайну. Він перетворить групу на div, текст в стор і так далі.

При використанні Blade, ви можете сказати плагіну, який елемент DOM повинен генерувати, додавши до шару спеціальне ім'я, таке як [btn] або input [text], так що Blade знає, що він повинен робити. Перегляньте це демонстраційне відео для внутрішнього вигляду.

Тепер читайте: 12 Корисні плагіни для розробників WordPress