Как удесятерить свою продуктивность с возможностями Sketch 3.7

Sketch в 3 версии подарил нам символы. Вложенные символы в версии 3.7 — это более усовершенствованная форма оригинального функционала. Давайте разберемся, как ими пользоваться для максимально эффективного результата в дизайне.

Панель вкладок
Панель вкладок с 5 потенциальными состояниями

Практический кейс для вложенных символов: у вас есть верхняя панель с пятью вкладками. Вам нужно сделать макет множества состояний экрана. Как вы попытаетесь избежать огромной траты времени на дизайн? Можно создать символы для стандартно используемых компонентов и сделать свою собственную библиотеку компонентов. Но мы пойдем еще дальше.

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

Шаг 1: Сделайте базовый символ для верхней панели с 5 иконками.

все пять состояний активны

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

Шаг 2: Превратите базовую панель вкладок в символ

Превратить в символ Sketch

Шаг 3: Перейдите на страничку символов

Страница символов Sketch
Видите, “TabBar” стал фиолетовым, и в списке слоев отмечен фиолетовой иконкой.

Шаг 4: На страничке Symbols вставьте символ TabBar

Вставьте сущность символа с помощью кнопки Insert и сделайте пять копий. Важно: используйте insert, не копируйте символ. Когда вставите первый символ, можете его скопировать еще четыре раза.

Sketch - Insert - Symbols

Шаг 5: З Сделайте голубой прямоугольник с 50% непрозрачностью над неактивными вкладками

Это мой трюк для этого кейса; вы можете придумать свой собственный метод.

создайте голубой прямоугольник

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

Вставленный символ

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

Шаг 6: Выделите вставленный символ и голубой прямоугольник и превратите эту пару в новый символ.

Видите, создан новый символ справа после объединения двух элементов в символ. (Можете удалить теперь группу из двух слоев слева. Это не часть символа).

Создать символ Sketch

Вот и все, вы создали свой первый составной символ.

Я быстро закончу остальные 4 позиции и покажу вам, почему мой подход такой классный.

Базовый символ + 5 состояний вкладок в Sketch
Базовый символ + 5 состояний вкладок

В моей библиотеке Symbols теперь есть 5 состояний:

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

А теперь самое интересное!

Редактирование символов

Все, что мне нужно — просто редактировать базовый символ, и изменения отображаются в 5 состояниях панели вкладок. Хотите заменить иконку звездочки на сердечко? Просто отредактируйте базовый символ. Теперь можете использовать эти 5 символов столько раз, сколько нужно в дизайне, редактируя их все в одном месте.

Понравилась статья? Ставьте Лайк!