Содержание
- 01. Копирование и вставка направляющих
- 02. Очиститель эскизов
- 03. Анима
- 04. React Sketch.app
- 05. Плагин Git Sketch
- 06. ImageOptim
- 07. Волшебное зеркало
- 08. Экспорт больше
- 11. Маркетч
- 12. Сегментированные круги
- 13. Sketch Runner
- 14. Значок шрифта
- 15. Найти и заменить
Плагины Sketch помогают сделать Sketch еще лучше. Sketch - это инструмент для веб-дизайна пользовательского интерфейса, который выбирают многие, и часть того, что делает это таким хорошим, - это сообщество людей, работающих над расширением его функциональности и возможностей путем создания настраиваемых плагинов.
Управление вашими плагинами Sketch теперь проще, чем когда-либо. Плагины обновляются автоматически, а устаревшие отключаются. Экосистему плагинов можно сделать еще более полезной - это Sketch Cloud, служба обмена файлами, на которую может подписаться любой, где вы можете просматривать, загружать и комментировать документы Sketch, которые были опубликованы публично или конфиденциально прямо из Sketch.
Итак, давайте взглянем на лучшие плагины Sketch - те, которые могут кардинально изменить способ разработки пользовательских интерфейсов. Как только вы найдете тот, который вам нравится, прочитайте, как установить плагины Sketch. Если вам нравятся ваши веб-инструменты, не пропустите наши обзоры наших любимых инструментов веб-дизайна, конструктора веб-сайтов и облачных хранилищ. И помните, что ваш выбор провайдера веб-хостинга имеет решающее значение для успеха вашего сайта (наше руководство поможет).
01. Копирование и вставка направляющих
- Скачать здесь
- Цена: Бесплатно
- Резюме: Копируйте, вставляйте или удаляйте направляющие со своих монтажных областей
У каждого дизайнера есть отношения любви / ненависти с гидами. Иногда они абсолютно необходимы, а в остальное время просто мешают вам. Если вы используете направляющие вместо макета в Sketch, изменение их для нескольких артбордов может стать кошмаром, но с помощью этого плагина легко копировать, вставлять и удалять направляющие со всех ваших артбордов.
02. Очиститель эскизов
- Скачать здесь
- Цена: $2
- Резюме: Получите ваши файлы дизайна чистыми, как свисток
Любой дизайн Sketch, прошедший несколько итераций, неизбежно будет собирать немного мусора на своем пути, например, скрытые слои, несогласованные положения границ и неиспользуемые стили слоев.
Запутанный файл Sketch - еще не конец света, но он может повлиять на передачу и упростит жизнь любому, кто должен в дальнейшем разобраться в этом. Вместо того, чтобы выполнять все вручную, используйте Sketch Cleaner для автоматического решения всех распространенных проблем.
03. Анима
- Скачать здесь
- Цена: Бесплатно вверх
- Резюме: Создавайте отзывчивые прототипы с высокой точностью
Ранее доступная как отдельные бесплатные плагины - Auto Layout и Launchpad - Anima теперь представляет собой универсальный плагин, предназначенный для помощи в создании адаптивных макетов с выводами, стеками и отступами, а также прототипами с высокой точностью, которые подходят для всех экранов. Еще есть бесплатная версия, поддерживающая один проект; для неограниченного количества проектов цена начинается от 25 долларов в месяц.
04. React Sketch.app
- Скачать здесь
- Цена: Бесплатно
- Резюме: Рендеринг компонентов React в Sketch
Управление активами дизайна в Sketch может быть затруднительным. Этот удобный плагин Sketch обеспечивает более простой и надежный способ управления вашими активами. Реализуйте свои проекты в коде как компоненты React, а затем используйте этот плагин для рендеринга их в скетч. Это также упрощает получение и внедрение реальных данных в ваши файлы Sketch.
React Sketch.app был разработан Airbnb для использования с его системой дизайна с целью помочь преодолеть разрыв между дизайнерами и разработчиками.
05. Плагин Git Sketch
- Скачать здесь
- Цена: Бесплатно
- Резюме: Клиент Git, встроенный в Sketch
Этот плагин предназначен для управления версиями в Sketch. Он работает путем экспорта изображения для каждой части дизайна, а затем создания хороших различий, чтобы было понятно, какие изменения были внесены. Документируя каждый этап процесса проектирования, каждый в команде может увидеть, как продвигается дизайн.
Плагин Git Sketch был создан Матье Дютуром, который с тех пор перешел к созданию более всеобъемлющей платной системы контроля версий под названием Kactus.
06. ImageOptim
- Скачать здесь
- Цена: Бесплатно
- Резюме: Оптимизация изображения в Sketch
Хотя Sketch предлагает собственное решение для оптимизации файлов SVG, нет набора параметров для сжатия изображений JPG и PNG. Поскольку ImageOptim предлагает надежную услугу в течение нескольких лет, имеет смысл добавить эту функциональность в Sketch.
Любой дизайнер, который заботится о времени загрузки и оптимизации изображений (а это должны быть все дизайнеры), должен добавить ImageOptim в свой набор инструментов. Обратите внимание, что помимо плагина вам понадобится основное приложение ImageOptim (бесплатно), установленное в вашей системе macOS, и вам все равно нужно пометить слои как экспортируемые в Sketch (для начала перейдите к «Экспортировать и оптимизировать все активы»).
07. Волшебное зеркало
- Скачать здесь
- Цена: От $ 4 / мес.
- Резюме: Инструмент преобразования перспективы изображения
Если вы пытаетесь создать впечатляющие макеты продукта, но вам постоянно приходится прыгать в Photoshop, чтобы справиться с непростыми вещами, Magic Mirror может быть для вас спасением. Это инструмент преобразования перспективы изображения, позволяющий создавать макеты перспективы и другие искаженные эффекты, даже не выходя из Sketch.
08. Экспорт больше
- Скачать здесь
- Цена: Бесплатно
- Резюме: Автоматически генерирует изображения-заполнители
Добавление изображений-заполнителей в дизайн - необходимая часть прототипирования, но поиск реальных изображений может быть проблемой. Так что вместо того, чтобы тратить на это время, оставьте все на Day Player. Это позволяет вам добавлять собственные изображения-заполнители в любой документ Sketch из ряда различных сервисов изображений-заполнителей, поэтому самое важное решение, которое вам придется принять, будет заключаться в том, хотите ли вы использовать Билла Мюррея, Николаса Кейджа или котят.
11. Маркетч
- Скачать здесь
- Цена: Бесплатно
- Резюме: Создать html-страницу, которая может измерять и получать стили CSS
Если вы хотите извлекать стили CSS из своих проектов Sketch, то такой плагин, как Marketch, абсолютно необходим. Он позволяет вам экспортировать артборды Sketch в виде zip-файла, полного HTML-документов, которые затем можно извлечь, чтобы вытащить много милого CSS, готового к работе.
12. Сегментированные круги
- Скачать здесь
- Цена: Бесплатно
- Резюме: Создавайте точную круговую графику
Вот быстрый способ сделать сегментированные круги для диаграмм и диаграмм. Этот плагин может создавать различные стили круговых диаграмм, включая пунктирные круги и кружки с отметками, а толщина регулируется с помощью простого списка значений, разделенных запятыми.
13. Sketch Runner
- Скачать здесь
- Цена: Бесплатно
- Резюме: В центре внимания для поиска
Sketch очень любят за минималистичный рабочий процесс с клавиатурой. При этом всегда есть два или три сочетания клавиш, которые вы всегда, кажется, забываете или путаете с другим дизайнерским приложением, таким как Photoshop, - и давайте не будем забывать о тех менее распространенных инструментах и функциях, которые не имеют сочетания клавиш и спрятаны глубоко в Меню эскиза.
Sketch Runner решает эти проблемы и делает это способом, который знаком пользователям macOS - Sketch Runner - это macOS Spotlight, но для Sketch.
14. Значок шрифта
- Скачать здесь
- Цена: Бесплатно
- Резюме: Управление шрифтами значков
Иконочные шрифты - это очень эффективный способ использования иконок в ваших веб-дизайнах без необходимости экспортировать и оптимизировать тонны графических ресурсов. Обычно мы ссылаемся на шрифты значков в голова> раздел веб-страниц HTML, как мы это делаем с CSS и JavaScript. Однако использовать их в Sketch немного сложнее. К счастью, Icon Font упрощает эту задачу.
После загрузки и установки Sketch IconFont загрузите файлы шрифтов SVG или загрузите этот пакет шрифтов, который включает файлы шрифтов для FontAwesome, Material Design Icons, Ion Icons и Simple Line Icons. Когда вы закончите, перейдите к Plugins> Icon Font> Install a Font-Bundle, выберите загруженные шрифты в диалоговом окне Open File, затем перейдите в Plugins> Icon Font> Grid Insert> [желаемый шрифт значка], чтобы вставить Иконка.
Даже если вы собираетесь разработать собственный набор значков для своего дизайна, наличие готовых значков в вашем распоряжении может помочь вам в быстром прототипировании на ранних этапах дизайна, добавив немного большей ясности / точности вашим макетам с низкой точностью. .
15. Найти и заменить
- Скачать здесь
- Цена: Бесплатно
- Резюме: Найти и заменить текст в выбранных слоях
Текстовые редакторы - не единственное место, где вам нужно найти и заменить - это тоже полезно в Sketch. Этот плагин имеет множество расширенных параметров и позволяет вам искать экземпляры определенных слов или фраз в тексте на выбранных слоях (и во всем, что содержится внутри), а затем легко заменять их.
Следующая страница: Дополнительные экономящие время плагины для Sketch
