Обучение ui/ux дизайну

Обзор новых возможностей Sketch 3.4

В этой статье я хочу рассказать о новых возможностях Sketch 3.4.

Локальное расшаривание

 

Визуализация новых возможностей в Sketch 3.4

 

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

Эта возможность совсем не нова для тех пользователей, которые имеют приложение Sketch Mirror на iOS. Однако новая опция — это как более улучшенная версия стандартного «зеркала». Когда вы начинаете локальное расшаривание, то все ваши артборды будут показаны в вашем веб-браузере по умолчанию. Для меня это очень полезная опция, поскольку я пользуюсь Nexus 5 (а для Android пока еще не выпустили Sketch Mirror!), я могу просмотреть, протестировать артборды в своем мобильном веб-браузере по аналогичной localhost URL. Очень удобно!

Вдобавок, Local Sharing можно хакнуть, сделав его доступным практически везде. Для этого надо лишь немного кода.

 

Копирование и вставка

 

Визуализация новых возможностей в Sketch 3.4

 

Улучшенные, намного более предсказуемые функции вставки и копирования.
Многие дизайнеры не довольны опцией копирования-вставки в программе Sketch. И тут их, к счастью, есть, чем обрадовать, — Sketch ее значительно улучшил. В приложении Sketch изменили опцию Paste in Place (Вставить в место) на опцию Paste Over Selection (Вставить над выделенным местом). В случае если вы посмотрите на гифку выше, то увидите, что я выделил и скопировал три разные фигуры/слоя, потом выделил фигуру-маску на еще одном артборде. Command + Shift + V вставляет на фигуру-маску фигуры. Все три фигуры вставились именно на те позиции, на которых они были еще в «родном» артборде.

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

На гифке можно также заметить, что артборд слоя при выделении слоя будет расширен таким образом, чтобы было видно все слои на артборде. Когда я выделяю какой-то другой артборд, то перечень слоев предыдущего артборда сразу сворачивается. Это очень удобно, потому что мне бы не хотелось постоянно отвлекаться. Раньше мне надо было использовать функцию Collapse Artboards and Groups для того, чтобы каждый раз прятать слои. Если вы желаете, чтобы артборд показывал каждый раз перечень слоев, можете кликнуть на карет слева от наименования слоя или артборда.

Еще одно важное визуальное нововведение в Sketch — специальный индикатор маски. Его заменили на значок в форме стрелочки вниз. Похоже на такой же индикатор в программе Adobe Photoshop.

 

Визуализация новых возможностей в Sketch 3.4
Старый скриншот из документации Sketch, возможно, настало время им его обновить?

 

Отключение автосохранения

 

Визуализация новых возможностей в Sketch 3.4

 

Отныне вы можете отключить автосохранения в пункте Preferencess > General.

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

Как дизайнеру, мне автосохранение помогает. Иногда Sketch виснет — и тогда я не знаю, почему это происходит. Но в ряде случаев именно функция автосохранения спасала всю мою работу.

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

 

Значки Material Design

 

Визуализация новых возможностей в Sketch 3.4

 

Новый дизайн значков Material Design вы можете найти в меню File > New From Template, а также все новые пресеты артбордов в панели инспектора.

Шаблоны новых значков Android Icons, а также пресеты артбордов включены в Sketch 3.4! Дизайн под Android теперь сильно упростился, поскольку больше не надо вручную импортировать шаблоны.

 

Quick Mask (Быстрая маска) для растра

 

Визуализация новых возможностей в Sketch 3.4

 

Теперь можно создать быструю маску для выделенного растра, кликнув на клавишу Mask в панели инструментов.

Не знаю, зачем мне может потребоваться такая функция… Ну да, она реально быстрая, однако фигура-маска не “pixel perfect” (обратите внимание на панель инспектора на гифке выше). Желательно создать маску, нарисовав фигуру вручную и выделив ее с растровым изображением, после этого кликнуть на Mask.

 

Измерение расстояния в группе

 

Визуализация новых возможностей в Sketch 3.4

 

Измерение расстояний между слоями работает теперь в сочетании с ⌘ (Command) для замеров внутри группы.

Измерение расстояния между слоями — это одна из наилучших возможностей приложения Sketch. Вы, при измерении дистанции между слоями, выделяете слой, при этом удерживаете кнопку ⌥ (Option) для того, чтобы начать измерение. Sketch эту опцию усовершенствовал: теперь можно делать измерения и между слоями прочих групп, удерживая для этого клавишу ⌘ (Command) совместно с ⌥ (Option). За счет этого можно замерить любой слой, какой желаете, даже слои из выделенной группы.

Значки Hide (Спрятать) и Lock (Заблокировать)

 

Визуализация новых возможностей в Sketch 3.4

Можно удерживать кнопку ⌥ (Option) для того, чтобы переключиться между опциями Hide и Lock в перечне слоев.

 

Шахматная заливка

 

Визуализация новых возможностей в Sketch 3.4

 

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

Лично для меня данная функция крайне полезна. Я регулярно забываю, добавил ли я на артборд цвет фона. Есть ли на значках белый или прозрачный фон? Теперь, с шахматной заливкой на превью экспорта я уже могу не проверять это по десять раз. Отлично!

 

Замена картинки

 

Визуализация новых возможностей в Sketch 3.4

Функция “Replace Image…” доступна с одного клика ПКМ.

 

Управление установленными расширениями

 

Визуализация новых возможностей в Sketch 3.4

 

В Preferences теперь есть панель для управления установленными расширениями.

Это поможет управлять расширениями, которые вы установили. При помощи данной вкладки можно отключать или включать установленные расширения, также есть специальная кнопка Get Plugins…, которая перенаправляет на них новую папку плагинов.

 

Визуализация новых возможностей в Sketch 3.4

 

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

 

Зуминг

 

Визуализация новых возможностей в Sketch 3.4

 

Измененное выполнение масштабирования при удерживании кнопки Z и растягивании курсором. Инструмент для масштабирования остается полностью активным и после отжатия клавиши Z.

Масштабирование теперь больше похоже на поведение в программе Photoshop, и это отлично!

В случае если вы нажмете и удержите кнопку Z, пока уже перетаскиваете что-либо курсором, то масштаб не сработает. Это сочетание срабатывает лишь при включенном инструменте и нажатой клавишей Z перед перетаскиванием.

Я отключил функцию Animate Zoom в настройках зуминга, поскольку это повышает комфорт. Я также включил функцию Zoom In on Selection. Когда вы нажимаете кнопку Z и кликаете на позицию, до которой собираетесь сжать объекты. Это поможет быстро перейти на необходимую позицию.

 

Мой вопрос

Теперь можно перетаскивать SVG из веб-браузера в Sketch.
Приложение Sketch включило данную функцию в последний релиз, правда я не могу понять, как же выделить и перетащить SVG из веб-браузера. К примеру, я хочу перетащить значок к себе, но не могу даже сдвинуть его с позиции в веб-браузере.

Единственная возможность это сделать — это скачать значок SVG, скопировать его (Command + C) и затем вставить (Command + V) в приложение Sketch, без перетаскивания в Sketch с десктопа.

Вывод

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

Перевод

Понравилось? Расскажите друзьям: