/ sketch

Скетч: Мощный старт

Источник: designcode.io/sketch-start

Перевод подготовили: Илья Дзенски (Канал в Телеграм Perfect Pixel), Саша Окунев (Канал в Телеграм Скетч-дизайнер) и Alesia Jusfan ( Канал в Телеграм Дизайн в хлам).

Каждый дизайнер вырабатывает свой эффективный рабочий процесс. Это особенно важно на старте работы, поскольку можно обойти множество подводных камней. Одна из вещей, которая выделяет Скетч среди других инструментов — количество плагинов и ресурсов. Сравнивать его базовые функции с функциями других инструментов — всё равно что сравнивать айфон с другими телефонами. Вы забываете об экосистеме, которая делает Скетч таким особенным.

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

Этот пост рассчитан на тех, кто уже ориентируется в Скетче. В нём мы сфокусируемся на воркфлоу (рабочем процессе).

Sketch Runner

Sketch Runner – из самых популярных и необходимых плагинов для Sketch. Это важный многоцелевой плагин, который используется для вставки символови установки новых плагинов. Он похож на Mac Spotlight или Alfred внутри Скетча.

Start-RunnerWorkflow

Раннер может:

Устанавливаем плагины через Раннер

Чтобы открыть панель Раннера, нажмите Cmd + '. Вы можете перемещаться по вкладкам с помощью Tab.

Для установки плагинов нужно перейти на вкладку Install, пару раз нажав Tab, ввести название плагина (или часть названия), и установить символ, нажав Enter. Если выделен плагин, можно перейти на его сайт, нажав Alt + Enter.
start-plugins

Вставлять символы, в том числе из iOS UI Kit

Поскольку iOS UI Kit теперь является библиотекой, в любой скетч-проект можно вставлять из него любые элементы через меню Insert.

Примечание от Саши Окунева: я назначил на эту функцию клавишу Ctrl + Y, поскольку все команды работы с символами у меня содержат клавишу Y.

ezgif-4-6e93818b52

ГЕНЕРИРУЕМ КОНТЕНТ

Ансплэш — фотосайт, на котором фотографы отдают свои фото в высоком разрешении бесплатно, не ограничивая права использования. Если нужно вставить в макет красивые картинки, Unsplash идеален для этого, Менг То предлагает использовать связку Invision Craft + Runner. Помимо Craft, можно использовать Content Generator, или любой другой плагин.

Примечание Саши Окунева: я предпочитаю избегать Крафт и Инвижн, поэтому пользуюсь плагином Unsplash It.

Content-Generator

Контроль версий с Абстракт

Abstract

Когда над одним скетч-проектом работает команда дизайнеров, синхронизировать версии может быть проблематично. Абстракт решает эту проблему.

Он словно Гитхаб для дизайнеров.Каждый скетч-файл хранится в репозитории, и доступен для всех членов команды. Используется один и тот же мастер-файл. Все члены команды, в том числе и дизайнеры, могут открывать документы без страха случайно внести деструктивные изменения в мастер-файл.

Примечание Саши: В моей команде Абстракт не прижился. Мы в команде пока используем для этой цели Дропбокс, поскольку загрузка макетов в Абстракт занимает слишком много времени. Дропбокс тоже хранит версии документа, но их можно отслеживать только по времени сохранения.

11

Оверрайды (overrides)

Если в макете есть повторяющиеся элементы, такие как списки или контент плиткой, надо использовать символы. Когда вы меняете символ, он автоматически меняется по всему проекту.

В символах можно заменять контент: фото и тексты. Для этого используются так называемые оверрайды — поля в панели справа.

overrides

Вложенные символы

Иногда требуется заменить не только изображение или текст, но и символы внутри символа. Это мощный инструмент для настройки сгруппированных слоёв с динамическим контентом.

nested

Библиотеки

Рабочий процесс в команде отличается от процесса работы в одиночку.Скорее всего, у вас будет огромный стайл-гайд – скетч-проект с правилами дизайна). В нём будут сотни символов: кнопки, диалоговые окна, меню, поля ввода. С помощью новой функции Библиотек (Libraries) можно хранить символы в отдельном файле который будет синхронизироваться между дизайнерами через Дропбокс или Абстракт. Символы синхронизируются — можно менять символы библиотеки в облаке, и при этом их можно будет обновить при заходе в проект.

Допустим, у меня есть файлы Main и Styleguide. Второй из них добавим в список библиотек в настройках Скетча. Теперь можно вставлять все элементы из Styleguide в Main, менять их в Styleguide и они будут обновляться в Main.

libraupdate

Адаптивные макеты

Дизайн для разных размеров экрана теперь необходимость. Скетч эффективно решает эту проблему.

К примеру, вы можете установить ограничители (Constrains) с левой стороны от элемента, и при этом изменить размер контейнера, в котором он находится. При изменении контейнера отступ слева не изменится.
adattab

Продвинутая работа с ограничителями в плагине Auto Layout

Плагин Auto Layout чень полезен для работы с адаптивностью.

Стандартная функция расстановки ограничителей в Скетч пока весьма бедная на возможности. Она позволяет лишь зафиксировать объект на тех отступах, на которых он был и не даёт возможности задавать отступ объекта от краёв. С этим успешно справляется Авто Лэйаут.

Примечание Саши: Увы, Анима хитры и нужный и полезный плагин мешают с платным и довольно бесполезным сервисом, который занимает довольно много места интерфейса и раздражает.

Stack

Сглаженные углы

Иконки для iOs не имеют закруглённых углов в стандартном значении этого слова. Закругления в Sketch имеют название "Super Ellipse". Обычно дизайнерам приходится редактировать кривые безье, чтобы получить адекватный результат. Но получить аналогичный результат можно с помощью простого чекбокса "Smooth Corners".
Smooth-Corners

Экспорт изображений в нескольких масштабах

Одна из моих любимых возможностей — это экспорт изображений под различные экраны. Используя опцию "Make Exportable" в нижнем-правом углу экрана, вы можете экспортировать рабочие области в любом разрешении (1х, 2х, 3х) и форматах JPG, PNG, SVG, PDF, TIFF и EPS. Выгружать в PDF нужно для iOS, а SVG — фантастический формат для Web.

Кликните Make Exportable в нижнем правом углу, чтобы при экспорте этот слой сохранился отдельным файлом.

По умолчанию, нарезанные слои экспортируется в разрешении 1х, но если нажать снова, будут добавлены версии в 2х или 3х. Также можно установить максимальную ширину или высоту артборда. К примеру, если нужно сохранить артборд с шириной 800px, установите в поле экспорта 800W.
expoert

Примечание Саши: Увы, пока Скетч весьма плохо работает с выгрузкой SVG в формат Андроида и получившиеся SVG-файлы нужно внимательно тестировать на разных версиях Андроида, иначе иконки могут разваливаться. Особенно, капризна версия 5. Если экспортируете SVG для Андроида, не используйте маски, обводки (border) и разомкнутые линии (только замкнутые формы).

При помощи плагина Keys можно установить горячую клавишу, которая будет делать объект экспортируемым. Я использую Ctrl + E.

ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ

Изображения, которые импортируются из Sketch (или любого другого подобного приложения) имеют плохую оптимизацию для использования в Web. Вот почему плагины вроде ImageOptim — необходимость при экспорте в PNG или JPG. Исходя из моего опыта, вес оригинального изображения можно уменьшить на 80%. При этом вы практически не теряете в качестве конечного изображения.

Примечание: у меня плагин ImageOptim не работает в связке Sketch (не завёлся), но работает как отдельное приложение.

Start-ImageOptim

ПОДСКАЗКИ ПО ОПТИМИЗАЦИИ

Вы сможете сжать ещё до 50% файла, используя PNGCrush и JpegOptim. Оставьте в настройках 80% от качества оригинала. Если вы создаёте дизайн в разрешении 2х или 3х, потеря качества заметна не будет. По факту, этот сайт (прим. переводчика: имеется ввиду оригинал статьи) использует аггресивные методы сжатия. У меня было 30 мб изображений на страницу, после оптимизация я получил 5мб. Это все еще может казаться большой цифрой, но в статье есть несколько видео и изображений с высоким разрешением.

Примечание переводчика: при переводе я использовал сервис Ezgif, который дополнительно ужал на 20% каждое видео).

Start-ImageOptimSettings

ОПТИМИЗАЦИЯ ФАЙЛОВ

Иногда нам приходится работать со Sketch-файлами весом более 100 Мб. Это может сильно повлиять на скорость отклика и работы компьютера. Но нам не всегда нужны в файле изображения в полном разрешении. Вы можете использовать встроенный в Sketch File > Reduce File Size, чтобы уменьшить размер Sketch файла. Для еще большего сжатия вы можете использовать Reduce.
123

Стайл-гайд и передача в разработку

Документация проекта занимает много времени. Иногда приходится тратить дни и недели только на написание одной документации. Когда её нужно обновить, всё приходится обновлять вручную. И с каждым обновлением нужно рассказать об изменениях команде. Время, которое должно быть потрачено на развитие проекта и обратную связь пользователей, уходит впустую.

Здесь нам поможет Invision Inspect, Zeplin или Sympli. C помощью Sketch плагинов для них, вы можете с лёгкостью экспортировать все рабочие области, и получить готовые дизайн-спецификации. Когда ваша команда открывает дизайн-макеты, они получают последние обновления, видят все отступы, размеры, цвета, и начертания шрифтом. К тому же, при необходимости разработчики могут посмотреть CSS-код элементов, или оставить комментарии по вопросам дизайна.
Start-InvisionInspect

Сравнение

Чтобы посмотреть и сравнить рабочие области Sketch на iOs симуляторе, я рекомендую использовать Flawless. Вы можете перетащить sketch-файлы в симулятор, и он автоматически найдёт все артборды. Он отобразит ваши дизайн-макет в окне симулятора.
ezgif-4-4f962ed272

Показываем макеты

Когда вы закончите с дизайном, время показать его коллегам или заказчикудля обратной связи. С помощью интегрированного Sketch Cloud вы можете продемонстрировать все артборды, загрузив на сервер. После загрузки вы можете предоставить общий или персональный доступ к проекту. Здесь же другие пользователи могут оставлять комментарии. Это — отличная возможность быстро поделиться наработками.

Если вам нужно показать связь между экранами, используйте Invision или Marvel для создания интерактивных прототипов.
Start-Freehand

Отображение на iOS устройствах

То, что смотрится на экране компьютера, может плохо смотреться на экране iPhone. C помощью встроенного Sketch Mirror, вы можете отобразить дизайн на экране вашего телефона через Wi-fi или с помощью доступа по IP.

Артборды можно свайпить налево и направо. Свайп вверх и вниз переключает между страницами. Двойной щелчок — приближает или размещает на весь экран.
InVision-Marvel-Apple-Watch

Отображение на Android устройствах

Пользователи на Android могут использовать бесплатный Crystal. Другой фантастический инструмент — Skala Preview (необходим плагин под названием Sketch Preview)

Start-Android

Прототипирование в Sketch

В Sketch нет встроенного инструмента для прототипирования. Но с помощью Craft или Marvel, вы можете быстро прототипировать экраны, связав их между собой кликабельными зонами.

Примечание Ильи: автор восхваляет Invision по всей статье, но я предпочитаю использовать Марвел за счет его большей дружелюбности и скорости.
312312

Прототипирование анимации

Для тех, кто не хочет учить код, но при этом хочет показать анимацию, идеально подойдут Flinto или Principle. Они дают максимальный результат при минимальном вложении времени сил. Оба приложения дают возможность импортировать артборды в один клик и делать мощные анимации за минуты.
animation

Примечание от Alesia Jusfan: Перед тем как импортировать скрины в программу для анимации (Flinto или Principle), очень важно привести в порядок названия слоев. Это в последующем упростит вам жизнь при создании анимации. Для того, чтобы сэкономить время на переименовании слоев и артбордов, воспользуйтесь удобным плагином Renameit, который позволяет упорядочить или переименовывать выделенные слои, артборды в несколько кликов.

Прототипирование в Framer

Любителям кода с неограниченными возможностями в анимации больше подойдет Framer.

Он дружественен, и в нём можно создать элементы пользовательского интерфейса, которые напрямую импортируется в код.
target

Примечание от Саши: Фреймер — мой любимый инструмент для создания анимаций. Он позволяет делать всё, что позволяет JavaScript, и при этом в нём учиться писать код не скучно, потому что вы шевелите свои собственные макеты. В отличие от Принципл и Флинто, фреймер-прототип можно загрузить в облако в виде ссылки. Это огромный плюс.

Ссылки по теме:
#фреймер_кейс №1: Бесшовный переход между экранами
#Видео-курс Руслана Шарипова: Быстрый старт в основы Фреймера
#Фреймер-чат

Дизайн иконок

Часто требуется изменить существующие иконки, или нарисовать их с нуля. В арсенале вам потребуется огромная библиотека векторных иконок. Sketch — векторый редактор, поэтому вы можете с лёгкостью импортировать SVG-иконки, и редактировать их по своему желанию. Если вы плохо работаете с вектором, то как минимум сможете изменить размер и отредактировать цвета иконок.
icons

Клавиатурные сокращения

Дизайн легко изучить, но иногда им тяжело управлять. Горячие клавиши делают Sketch гораздо быстрее и эффективнее.
Здесь вы можете найти список горячих клавиш для Sketch: http://sketchshortcuts.com/
Sketch-Duplicate-Multiple

Ресурсы

Лучший способ изучить Sketch — это загрузить работы других людей и проанализировать их. Сообщество растёт стремительно, новые ресурсы появляются каждый день. SketchAppSources, Sketch Repo, Sketch App Hub and Sketch for Designers — это лучшие места для скачивания Sketch файлов. Совокупно на этих ресурсах лежит более 5000 исходников.

ЦВЕТОВЫЕ ПАЛИТРЫ

Цветовыми палитрами можно обмениваться как файлами, так что я приготовил одну, которую вы можете загрузить здесь. Установите плагин Sketch Palletes, чтобы устанавливать палитры по клику.
Start-Palette

МОКАПЫ И УСТРОЙСТВА В ВЕКТОРЕ

С помощью Sketch и векторной графики можно выгодно показать продукт, разместив на экранах реальных устройств. Скачайте свободные мокапы с Angle (здесь их более 260). Дополнительно вы можете скачать мокапы устройств на Facebook Design.
Start-Devices

СКЕТЧ ГРАДИЕНТЫ

Градиенты проще скачать, чем создавать. Мы предлагаем скачать библиотеку из 180 градиентов здесь.
Start-Gradients

Invision Ui Kits

У Invision есть большое количество бесплатных UI-китов для Скетча, которые вы можете скачать здесь.
Start-InVisionUIKits

Сайт с дизайн ресурсами UI8 также имеет раздел с бесплатными UI китами, мокапами и иконками для Sketch. скачать здесь

Перевод подготовлен Ильёй Дзенски (Канал в Телеграм Perfect Pixel), Сашей Окуневым (Канал в Телеграм Скетч-дизайнер) и Alesia Jusfan (Канал в ТелеграмДизайн в хлам).

Список ресурсов из статьи

Плагины и инструменты для Sketch

  • Runner — быстрый запуск команд, установка плагинов;
  • Content Generator — генератор динамического контента;
  • Auto Layout от Anima — плагин для создания адаптивных макетов;
  • ImageOptim — оптимизация изображений;
  • Reduce — сжатие Sketch-файлов;
  • Abstract — командная работа со Sketch-файлами;
  • Sketch Preview — превью для Sketch;
  • Sketch Palletes — плагин для быстрой установки палитр;
  • Renameit — удобное переименование слоёв.

Инструменты для прототипирования

  • Invision Craft — создание прототипов;
  • Marvel — создание прототипов;
  • Flinto — создание анимированных прототипов;
  • Principle — создание анимированных прототипов;
  • Framer — создание анимированных прототипов (с поддержкой кода);

Инструменты для отображения дизайн-макетов

Упомянутые ресурсы

comments powered by HyperComments
Илья Дзенски

Илья Дзенски

Проектировщик интерфейсов, дизайнер. Пишу о продуктивности, инструментах, и дизайне. Веду канал и чат Perfect Pixel в Telegram http://t.me/perfectpixels