Есть несколько методов и скрытых функций, которые могут моментально улучшить ваш рабочий процесс в Sketch. В этой серии советов я не буду рассказывать, как использовать символы, стили или функцию Smart Layout – я уверен, вы уже знакомы с ними!
Давайте рассмотрим удивительно простые, но мощные приемы, которые помогут вам работать намного быстрее:
1. Как быстро найти слой, стиль или символ
Многие из нас рылись во всплывающих меню, чтобы найти определенный символ или стиль. Начиная со Sketch 64, в приложении появился реальный поиск. Он не только фильтрует контент, но и предлагает наилучший возможный результат.
Поиск доступен в трех точках ввода: чуть выше списка слоев или списка компонентов и в меню компонентов на панели «Инспектор». Посмотрите, как это работает для символов:
…а вот превью того, как это работает с хорошо спроектированной типографикой для стилей текста:
Все очень плавно работает! Попробуйте это со своей библиотекой интерфейса.
2. Перетащите изображения, чтобы заполнить фигуру
Вам не нужно открывать меню заливки и выбирать «Choose image», чтобы загрузить его. Есть более быстрый и удобный способ.
Выберите изображение из macOS Finder и перетащите его непосредственно в область заливки выбранного слоя на панели «Инспектор» (тот, что справа). Это также работает для символов и их переопределений.
3. Создайте адаптируемые фигуры
Вы уже знаете, что экземпляры символа могут красиво адаптировать внешний вид при изменении ширины и высоты. Вы наверняка знаете, что такого же эффекта можно достичь и с группами. Но знаете ли вы, что это также работает для сложных фигур (Combined Shapes)?
4. Измените цвет текста с помощью стиля слоя
Этот прием отлично работает, особенно для символов или групп, которые представляют элементы панели вкладок. Все, что вам нужно сделать, это объединить иконку с текстом с помощью функции булевой операции (Union). Теперь примените стиль слоя к созданной сложной фигуре. Вуаля!
Кстати, начиная со Sketch 64, вы также можете использовать для этой цели функцию Tint.
5. Создайте маску с текстом
Если хотите создать простую маску для цвета или изображения, вы можете просто добавить к тексту стиль слоя. Однако, если вам нужна более сложная маска, следуйте приведенной ниже инструкции.
Сначала выберите текстовый слой и слой (или слои), к которым хотите применить маску. Затем поэкспериментируйте с булевой операцией (Subtract, Intersect или Difference) для достижения желаемого результата.
6. Быстрая настройка многоцветного градиента
Настройка градиента с несколькими тонами может занять время. Тем не менее, есть удобный способ сделать это быстро и точно. Чтобы поместить тон в конкретную точку, выберите его и нажмите клавишу от 1 до 9. Если вы нажмете 3, цвет будет размещен на 30% от общей ширины градиента; если вы нажмете 5, он будет перемещен на 50% и так далее.
Этот метод работает для всех типов градиентов от линейного до радиального и углового. Он сэкономит вам много времени!
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». Готово!
Теперь вы можете рассчитать все необходимые значения и представить их на графике!
Примечание: Если вы измените размер (также масштаб), необходимо будет заново произвести расчеты.
8. Работа с вкладками вместо нескольких окон Sketch
Даже если вы работаете над одним проектом, вам часто приходится открывать несколько Sketch-файлов и библиотек и переключаться между ними. Если вам не нравится работать с несколькими окнами, у меня для вас хорошие новости – вы можете открыть все файлы в одном окне Sketch. Для этого необходимо активировать в Finder вкладки. Позвольте мне показать, как это сделать:
- Откройте системные настройки macOS
- Выберите опцию «Dock»
- Найдите «Prefer Tabs when opening»…
- Выберите «Always»
- Откройте Sketch.
- Откройте меню «View»
- Выберите опцию «Show Tab bar».
Теперь каждый новый или открытый файл будет показан во вкладках!
9. Экспортируйте несколько артбордов в одном изображении
Если вы хотите экспортировать артборды, сгруппированные в одно изображение (это может быть полезно для быстрого представления юзерфлоу), разместите артборды на холсте, как хотите, чтобы они отображались на изображении. С помощью инструмента «Slice» вырежьте все нужные артборды. Выберите необходимые параметры экспорта и вуаля!
10. Сделайте всплывающие окна и оверлеи в прототипах более естественными
Начиная со Sketch 65, в программе появилась функция, позволяющая вам скроллить элементы на разных артбордах.
Чтобы использовать ее, создайте прототип с прокруткой (например, со списком). Помните, что сколл включен. Вы должны использовать артборд из пресета! Это может быть предопределенный артборд любой формы или кастомный, который вы сохранили. Начните с пресета, а затем отрегулируйте его высоту для скролла.
Продублируйте артборд и создайте всплывающее окно или оверлей.
Функция расположена на панели «Инспектор» элемента, который перемещается на следующий артборд – она называется «Maintain scroll position after click».
Вывод
Sketch – это мощный инструмент, и его легко освоить. Я считаю, что представленные выше приемы помогут ускорить ваш рабочий процесс.
Перевод статьи uxmisfit.com
Найновіші коментарі (0)