1 800x440 - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Есть несколько методов и скрытых функций, которые могут моментально улучшить ваш рабочий процесс в Sketch. В этой серии советов я не буду рассказывать, как использовать символы, стили или функцию Smart Layout – я уверен, вы уже знакомы с ними!

Давайте рассмотрим удивительно простые, но мощные приемы, которые помогут вам работать намного быстрее:

1. Как быстро найти слой, стиль или символ

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

Поиск доступен в трех точках ввода: чуть выше списка слоев или списка компонентов и в меню компонентов на панели «Инспектор». Посмотрите, как это работает для символов:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

…а вот превью того, как это работает с хорошо спроектированной типографикой для стилей текста:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Все очень плавно работает! Попробуйте это со своей библиотекой интерфейса.

2. Перетащите изображения, чтобы заполнить фигуру

Вам не нужно открывать меню заливки и выбирать «Choose image», чтобы загрузить его. Есть более быстрый и удобный способ.

Выберите изображение из macOS Finder и перетащите его непосредственно в область заливки выбранного слоя на панели «Инспектор» (тот, что справа). Это также работает для символов и их переопределений.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

3. Создайте адаптируемые фигуры

Вы уже знаете, что экземпляры символа могут красиво адаптировать внешний вид при изменении ширины и высоты. Вы наверняка знаете, что такого же эффекта можно достичь и с группами. Но знаете ли вы, что это также работает для сложных фигур (Combined Shapes)?

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

4. Измените цвет текста с помощью стиля слоя

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Кстати, начиная со Sketch 64, вы также можете использовать для этой цели функцию Tint.

5. Создайте маску с текстом

Если хотите создать простую маску для цвета или изображения, вы можете просто добавить к тексту стиль слоя. Однако, если вам нужна более сложная маска, следуйте приведенной ниже инструкции.

Сначала выберите текстовый слой и слой (или слои), к которым хотите применить маску. Затем поэкспериментируйте с булевой операцией (Subtract, Intersect или Difference) для достижения желаемого результата.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

6. Быстрая настройка многоцветного градиента

Настройка градиента с несколькими тонами может занять время. Тем не менее, есть удобный способ сделать это быстро и точно. Чтобы поместить тон в конкретную точку, выберите его и нажмите клавишу от 1 до 9. Если вы нажмете 3, цвет будет размещен на 30% от общей ширины градиента; если вы нажмете 5, он будет перемещен на 50% и так далее.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Этот метод работает для всех типов градиентов от линейного до радиального и углового. Он сэкономит вам много времени!

7. Создание идеальных круговых диаграмм

Круговые / кольцевые диаграммы очень популярны. Есть прием, который поможет сделать их идеальными! Давайте рассмотрим его на следующем примере:

Нарисуйте круг, например, размером 200 × 200. Выключите «Fill» и настройте «Border». Вся магия творится в разделе настроек границы (Border Properties)!

Сначала нам нужно получить окружность круга. Ее формула 2πr, где «r» – радиус. Круг размером 200 × 200 точек имеет радиус 100 точек. Давайте округлим π до 3.14. Произведем расчет:

2 * 3.14 * 100 = 628

Теперь введите это число в поле Gap в разделе «Border Properties».

Какое значение вы хотели бы видеть в кольцевой диаграмме? Давайте это будет 56%. Произведем расчет:

628 * 0.56 = 351,68

Введите полученное значение в поле «Dash» на панели «Border Properties». Готово!

Теперь вы можете рассчитать все необходимые значения и представить их на графике!

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Примечание: Если вы измените размер (также масштаб), необходимо будет заново произвести расчеты.

8. Работа с вкладками вместо нескольких окон Sketch

Даже если вы работаете над одним проектом, вам часто приходится открывать несколько Sketch-файлов и библиотек и переключаться между ними. Если вам не нравится работать с несколькими окнами, у меня для вас хорошие новости – вы можете открыть все файлы в одном окне Sketch. Для этого необходимо активировать в Finder вкладки. Позвольте мне показать, как это сделать:

  1. Откройте системные настройки macOS
  2. Выберите опцию «Dock»
  3. Найдите «Prefer Tabs when opening»…
  4. Выберите «Always»
  5. Откройте Sketch.
  6. Откройте меню «View»
  7. Выберите опцию «Show Tab bar».

Теперь каждый новый или открытый файл будет показан во вкладках!

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

9. Экспортируйте несколько артбордов в одном изображении

Если вы хотите экспортировать артборды, сгруппированные в одно изображение (это может быть полезно для быстрого представления юзерфлоу), разместите артборды на холсте, как хотите, чтобы они отображались на изображении. С помощью инструмента «Slice» вырежьте все нужные артборды. Выберите необходимые параметры экспорта и вуаля!

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

10. Сделайте всплывающие окна и оверлеи в прототипах более естественными

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Чтобы использовать ее, создайте прототип с прокруткой (например, со списком). Помните, что сколл включен. Вы должны использовать артборд из пресета! Это может быть предопределенный артборд любой формы или кастомный, который вы сохранили. Начните с пресета, а затем отрегулируйте его высоту для скролла.

Продублируйте артборд и создайте всплывающее окно или оверлей.

Функция расположена на панели «Инспектор» элемента, который перемещается на следующий артборд – она называется «Maintain scroll position after click».

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 10 полезных приемов, которые улучшат ваш рабочий процесс в Sketch

Вывод

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

Свежие вакансии
                        Skywaylab Skywaylab After Effects- 2D аниматор на проектные работы удаленно! Фриланс Москва до 20 000 руб за ролик ₽
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
Все вакансии

Оригинал: uxmisfit.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Прощай Sketch…

Часто возникает вопрос: «Какой инструмент дизайна лучший?» И долгое время ответом был Sketch, но теперь это не так.

Что ждет Sketch в 2020 году?

2019 год был одним из самых важных в истории Sketch – от объявления первого раунда привлечения инвестиций до запуска публичной бета-версии Sketch for Teams

Sketch 60 — начало вашей дизайн-системы. Новая панель компонентов, Sketch for Teams и облачные библиотеки

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