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

эскиз набирает популярность среди веб-дизайнеров и разработчиков. Вероятно, это потому, что он интуитивно понятен, прост в освоении и обладает множеством функций, которые значительно упрощают создание прототипа веб-сайта. Это также может быть связано с тем, что это приложение является расширяемым, то есть вы можете легко добавлять новые функции в приложение с помощью плагинов.

Вот 10 плагинов, которые могут помочь вам повысить производительность при работе со Sketch. Они разнообразны, от генераторов контента, селектора цветовой палитры, и они могут помочь вам отобразить измерения слоя или автоматически добавить отступы к слою.
1. CSS Buddy
CSS Buddy позволяет добавлять CSS к вашему слою в рабочей области Sketch. По сути, вы можете применить ширину, высоту, непрозрачность, box-shadow, border и background к слою, используя CSS.

С установленным этим плагином, просто выберите слой, затем выберите Применить к выбранным из меню плагинов. Диалоговое окно предложит вам ввести таблицу стилей. Добавьте CSS-контент без CSS-класса и наблюдайте, как ваш слой обретает форму.
2. Материал Дизайн Цветовая палитра
Если вы следуете тенденции дизайна материалов, вы заметите, что вы используете отличительные цвета. Материал Дизайн имеет потрясающую цветовую палитру. Теперь вы можете перенести это в свою рабочую область с помощью плагина Color Design Color Palette.

Этот плагин будет генерировать цветовые палитры в считанные секунды, без необходимости закрывать рабочее пространство. Выберите «Оттенок», «Значение» или «Образец», чтобы создать цветовую палитру, подходящую для вашего проекта.
3. Sketch Notebook
Иногда нам нужно показать, что мы делаем, в комментарии или в документации. Если вы работаете над проектами с другими дизайнерами или при участии клиента, это также необходимо, чтобы вы могли гарантировать, что результат – это то, к чему все стремились.

Sketch Notebook – это плагин для легкого документирования вашего дизайна в Sketch. Это добавит дополнительную боковую панель к вашему рабочему пространству, которая содержит комментарии, которые вы добавляете к любому элементу вашего дизайна. Вы можете изменить порядок комментариев, перестроить, удалить и переключить видимость комментариев.
4. Игрок дня
Прежде чем использовать реальные изображения в дизайне, мы часто используем изображения-заполнители для ускорения процесса проектирования. В Sketch вы можете использовать Day Player, чтобы добавить настраиваемые заполнители к любому слою в рабочей области Sketch из 6 сервисов изображений заполнителей, включая Placehold.it, LoremPixel и Unsplash. После активации вы можете установить ширину изображения, высоту и другую информацию.
5. Генератор контента
У нас уже есть плагин для вставки изображений-заполнителей, как насчет одного для общего контента? Content Generator поможет вам добавить фиктивные данные, такие как аватары, имена, данные геолокации и многое другое. Прекрасно подходит для макетов и уменьшения головной боли от попыток выяснить, как генерировать данные на месте.

Чтобы добавить фиктивные данные, просто выберите слой, затем выберите «Плагин»> «Генератор» и выберите «Гео», «Персона» или «Фотографии».
6. Эскиз Мера
Sketch Measure – инструмент измерения для Sketch. Он измеряет длину или размер слоя (или слоев) в вашем дизайне. Вы также получаете отступы и поля слоя, а также расстояние между двумя слоями. Sketch Measure также может печатать свойства слоя, такие как цвет, граница и непрозрачность. Все измерения могут быть вызваны с помощью сочетаний клавиш.
7. Динамическая кнопка
Динамическая кнопка позволяет легко создавать кнопки с фиксированными отступами. Он автоматически настроит отступы на основе значения, которое вы дадите, независимо от длины вашего текста. С установленным плагином текст может быть преобразован в структуру с помощью сочетания клавиш Ctrl + J. Величина требуемого отступа может быть затем вставлена ​​в текстовый слой (0: 0: 0: 0) (в группе гибких кнопок).
8. Типографская шкала
Типографская шкала – это плагин для преобразования выбранного текстового слоя в типографский масштаб. Чтобы использовать этот плагин, просто выберите текстовый слой (один или несколько) или смешанный слой, который содержит хотя бы один текстовый слой, затем выберите «Плагин»> «Типографский масштаб» и настройте значение в диалоговом окне. Результатом является набор масштабированного текста, который следует правилам типографского масштаба.
9. MODULIZER
С Modulizer вы можете управлять отступами для кнопок, модулей или областей в вашем дизайне с помощью сочетания клавиш Shift + Command + M. Вы можете объединить все слои, сгруппировать их, а затем использовать ярлык для автоматической настройки отступов в зависимости от значения отступов. тебе нужно. Смотри видео демо чтобы увидеть это в действии.
10. лопасть
Задумывались ли вы о преобразовании вашего дизайна из эскиза в HTML? Если это так, вы, вероятно, должны получить Blade, плагин Sketch, который автоматически генерирует HTML-файлы из вашего дизайна. Он преобразует группу в div, текст в p и так далее.

При использовании Blade вы можете указать плагину, какой элемент DOM генерировать, добавив специальное имя для слоя, например [btn] или вход[text] поэтому Блейд знает, что он должен делать. Проверьте это видео демонстрация для внутреннего взгляда.
Читайте сейчас: 12 полезных плагинов для разработчиков WordPress