Познакомившись всей командой дизайнеров со Sketch менее, чем год назад, мы не на все 100% перенесли свою работу в Sketch. Ранее мы использовали комбинацию Photoshop, OmniGraffle и Illustrator. Sketch упростил и ускорил процесс создания дизайна, и я хочу поделиться 5 советами, которые каждый день помогают мне в работе.

Совет 1. Используйте 1px прямоугольник вместо линий

Для всех разделителей я пользовался линиями. В итоге, если мне нужна линия, я и пользовался инструментом для рисования линий. Если вы рисуете линию толщиной 1px, то вам либо придется задать ей полупиксельную координату y (А) или же садить линию на целый пиксель, но при этом на макетах она будет выглядеть размытой (В).

Совет 1. Используйте 1px прямоугольник вместо линий

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

Вместо использования линий, если нужно нарисовать линию, рисуйте прямоугольник (С).

если нужно нарисовать линию, рисуйте прямоугольник

Прямоугольники, даже те, что 1px в высоту, начинаются и кончаются на целопиксельной координате, в результате получается четкое изображение с простой математикой для разработчиков.

Совет 2. Закругленные углы

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

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

Поле радиуса закругления угла требует значение в формате a/b/c/d. Используя этот формат, вы можете указать, как конкретно хотите закруглить каждый угол.

Совет 2. Закругленные углы

Используя этот трюк, очень легко создать закругленные углы в нужном месте. Внизу есть несколько примеров квадратов со значениями закругления углов.

Внизу есть несколько примеров квадратов со значениями закругления углов

Совет 3. Передвижение и ресайз элементов стал простым, как 2+2

Используйте простую математику, чтобы передвигать и масштабировать ваши элементы, настраивая значения в полях Position и Size.

Это особенно полезно, когда вы передвинули что-то на, скажем, 27 пикселей вверх, и нужно настроить соответственно и сам контейнер. Это не суперсложно — вычислить значение позиции в уме, но есть более простая альтернатива. Вы можете просто ввести +27 в нужном поле координат, и Sketch сам посчитает новые координаты. Такой же трюк применим и для поля Size.

Совет 3. Передвижение и ресайз элементов стал простым, как 2+2

В примере выше, я увеличил высоту серого блока на 27 пикселей и передвинул все вниз. В результате белый контейнер стал слишком коротким, так что я воспользовался знаком +, чтобы увеличить его. Теперь все отлично вмещается.

Совет 4. Символы — используйте их

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

Чтобы создать символ, выделите слои, которые планируете повторно использовать и нажмите “Create Symbol”. Чтобы вложить символы, используйте такой формат названий: Имя символа/состояние.

Совет 4. Символы — используйте их

Когда вы задали символы, можно использовать их в любом месте документа. Если нужно менять символ, можете изменить любую его сущность, и изменения автоматически подтянутся во все остальные сущности данного символа. Вложение символов позволяет быстро переключить состояния кнопки, как показано на примере выше.

Если нужно, чтобы кнопки не имели фиксированной высоты или ширины, вместо символов используйте стили слоя (Layer Styles).

Совет 5. Текстовые стили

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

Чтобы создать текстовый стиль, выделите текст и над атрибутами шрифта кликните “No Text Styles”. Затем прокрутите до конца вниз и кликните “Create New Text Styles”, чтобы создать текстовый стиль. Вы можете редактировать название, сейчас или потом, а также можете упорядочивать и управлять текстовыми слоями в том же дропдаун.

Совет 5. Текстовые стили

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

Это 5 приемов, которые я чаще всего использую в своей повседневной работе. Дайте знать в комментариях, какие приемы используете вы для оптимизации своей работы!