Как символы и общие стили ускоряют процесс UI-дизайна в Sketch
Наш канал в

В этом уроке на примере дизайна мобильной корзины покупок попрактикуетесь использовать две очень важные возможности Sketch – символы (Symbols) и общие стили (Shared styles).

 

символы и общие стили - финальный продукт

 

Символы Sketch

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

Чтобы создать символ из выделенных объектов, нажмите Create Symbol (Создать символ):

 

create

 

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

 

header

 

Вы увидите фон, статусную строку, метку заголовка и иконки. Все эти элементы показаны здесь в подпапках символа header-bar:

 

layerrs

 

Полоса загрузки не будет включена в символ, так как ее состояние изменяется на каждом скрине.

 

progress-bar

 

Также нужно активировать опцию Exclude Text Value from Symbols (исключить текстовое значение из символов) для каждого текстового слоя внутри вашего символа. Этим способом вы можете редактировать текст для каждого из дублированных символов индивидуально.

 

exludetextvalue

 

Общие стили в Sketch

Функция Shared styles также проста в использовании, как и символы. Полезно менять внешний вид разных элементов, в разных символах и объектах, в один клик. Давайте еще раз посмотрим на шапку и строку загрузки. Я изменил фон строки загрузки, но теперь она не очень хорошо смотрится вместе с фоном шапки.

 

sharedstyle

 

Чтобы избежать необходимости вносить изменения в каждую полосу загрузки вручную, вы можете задать для них всех общий стиль. Тут мы применяем стиль header-bg, который я заранее подготовил, нажав на Create New Shared Style (Создать новый общий стиль), когда был выделен фон шапки:

sharedstyle2

 

Затем мы применяем то же самое для каждого слоя, который должен отражать один и тот же стиль. Сейчас, когда вы редактируете фон строки загрузки, фон на всех элементах с общим стилем будет изменен:

 

sharedstyle3

 

Заключение

С этими двумя инструментами в своем арсенале ваш следующий проект по дизайну интерфейса в Sketch займет гораздо меньше времени!

Жду ваши вопросы и комментарии.

 

Перевод статьи webdesign.tutsplus.com автора Arnaud Schlupp.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете.

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Руководство дизайнера по DPI и PPI

Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс DPI и кросс-платформенном дизайне с самых азов. Никакой сложной математики и нечитаемых графиков, только простые объяснения, разбитые на короткие разделы для лучшего понимания и быстрого применения в вашем дизайн-процессе.