10 бесплатных плагинов Sketch для веб-разработчиков
Sketch набирает популярность среди веб-дизайнеров и разработчиков. Это, вероятно, потому что это интуитивно понятный, простой в освоении и поставляется со многими функциями, которые значительно упрощают создание прототипа веб-сайта. Это также может быть связано с тем, что это приложение является расширяемым, то есть вы можете легко добавлять новые функции в приложение с помощью плагинов..
Вот 10 плагинов, которые могут помочь вам повысить производительность при работе со Sketch. Они разнообразны, от генераторов контента, селектора цветовой палитры, и они могут помочь вам отобразить измерения слоя или автоматически добавить отступы к слою..
1. CSS Buddy
CSS Buddy позволяет добавить CSS к вашему слою в рабочей области Sketch. По сути, вы можете применить ширину, высоту, непрозрачность, box-shadow, border и background к слою, используя CSS.
С этим установленным плагином, просто выберите слой, затем выберите Применить к выбранному из меню плагинов. Диалоговое окно предложит вам ввести таблицу стилей. Добавьте CSS-контент без CSS-класса и наблюдайте, как ваш слой обретает форму.
2. Материал Дизайн Цветовая палитра
Если вы следуете тренду Материального Дизайна, то заметная вещь, которую вы заметите, это использование отличительных цветов. Материал Дизайн имеет потрясающую цветовую палитру. Теперь вы можете перенести это в рабочее пространство с помощью Материал Дизайн Цветовая палитра Плагин.
Этот плагин будет генерировать цветовые палитры в считанные секунды, без необходимости закрывать рабочее пространство. Выберите «Оттенок», «Значение» или «Образец», чтобы создать цветовую палитру, подходящую для вашего проекта..
3. Эскиз тетради
Иногда нам нужно показать, что мы делаем, в комментарии или в документации. Если вы работаете над проектами с другими дизайнерами или при участии клиента, это также необходимо, чтобы вы могли убедиться, что результат - это то, к чему все стремились.
Sketch Notebook это плагин для легкого документирования вашего дизайна в Sketch. Это добавит дополнительную боковую панель к вашему рабочему пространству, которая содержит комментарии, которые вы добавляете к любому элементу вашего дизайна. Вы можете изменить порядок комментариев, перестроить, удалить и переключить видимость комментариев.
4. День Игрок
Прежде чем использовать реальные изображения в дизайне, мы часто используем изображения-заполнители для ускорения процесса проектирования. Для Sketch вы можете использовать Игрок дня добавить настраиваемые заполнители в любой слой в рабочей области Sketch из 6 сервисов изображений-заполнителей, включая Placehold.it, LoremPixel и Unsplash. После активации вы можете установить ширину изображения, высоту и другую информацию.
5. Генератор контента
У нас уже есть плагин для вставки изображений-заполнителей, как насчет одного для общего контента? Генератор контента поможет вам добавить фиктивные данные, такие как аватары, имена, данные геолокации и многое другое. Прекрасно подходит для макетов и уменьшения головной боли от попыток выяснить, как генерировать данные на месте.
Чтобы добавить фиктивные данные, просто выберите слой, затем выберите Плагин> Генератор, и выбрать Geo, персона или же Фото.
6. Эскиз Мера
Эскиз Мера инструмент измерения для Sketch. Он измеряет длину или размер слоя (или слоев) в вашем дизайне. Вы также получаете отступы и поля слоя, а также расстояние между двумя слоями. Sketch Measure также может печатать свойства слоя, такие как цвет, граница и непрозрачность. Все измерения могут быть вызваны с помощью сочетаний клавиш.
7. Динамическая кнопка
Динамическая кнопка помогает легко создавать кнопки с фиксированными отступами. Он автоматически настроит отступы на основе значения, которое вы дадите, независимо от длины вашего текста. С установленным плагином текст может быть преобразован в структуру с помощью сочетания клавиш Ctrl + J. Величина требуемого отступа может быть затем вставлена в текстовый слой (0: 0: 0: 0) (в группе гибких кнопок)..
8. Типографская шкала
Типографская шкала - это плагин для преобразования выбранного текстового слоя в типографский масштаб. Чтобы использовать этот плагин, просто выберите текстовый слой (один или несколько) или смешанный слой, который содержит хотя бы один текстовый слой, затем выберите Плагин> Типографская шкала и настройте значение в диалоговом окне. В результате получается набор масштабированного текста, соответствующий правилам типографской шкалы..
9. Модулизатор
С MODULIZER Вы можете управлять отступами для кнопки, модуля или областей в вашем дизайне с помощью сочетания клавиш Shift + Command + M. Вы можете объединить все слои, сгруппировать их, а затем использовать ярлык для автоматической настройки отступов в зависимости от требуемого значения отступа. , Посмотрите видео демо, чтобы увидеть это в действии.
10. Клинок
Вы когда-нибудь задумывались о преобразовании вашего дизайна из эскиза в HTML? Если это так, вы, вероятно, должны получить лопасть, плагин Sketch, который автоматически генерирует HTML-файлы из вашего дизайна. Это преобразует группу в ДИВ, текст в п и так далее.
При использовании Blade вы можете указать плагину, какой элемент DOM генерировать, добавив специальное имя для слоя, например, [btn] или input [text], чтобы Blade знал, что он должен делать. Проверьте это видео демо для взгляда изнутри.
Читайте сейчас: 12 полезных плагинов для разработчиков WordPress
