Огромное спасибо Lloyd Humphreys за вдохновение на этот метод глубокого вложения, особенно для текста.

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

Само собой разумеется, из-за возможности редактирования сущностей символа (symbol overrides) в Sketch 41, я заливался йодлем в чистейшей эйфории и счастье. Это было довольно крупное нововведение.

После множества проб и ошибок, я создал несколько наиболее гибких, кастомизируемых и удобных в сопровождении компонентов для работы со вложенными символами, их редактированием, и то, что я называю Cascading Symbol Styles (каскадные стили символов), или CSS.

Cascading Symbol Styles
Вот что мы можем сделать с каскадными стилями символов в Sketch.
Честно говоря, этот прием не особенно новый. Это просто набор вложенных символов, дотошно организованных в порядок в инспекторе Sketch. Но я подумал, что вы найдете этот метод интересным, так что располагайтесь поудобнее, запаситесь попкорном.

Давайте погрузимся в символ:

символ Sketch

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

Слои:

Фото

Это переименованная сущность символа «Avatar Image». Почему ее переименовали? Потому что это то, что показывается в панели инспектора, когда я где-либо использую этот символ. Мне бы хотелось, чтобы название символа было приятным и понятным, а не «Avatar/Image», которое в конечном итоге еще и урезается.

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

Теперь обратите внимание, потому что это важно: Так как размеры символов Avatar/Image и Avatar/Default одинаковые (смотрите выше), я смогу выбирать, какой символ хочу показывать в выпадающем меню инспектора:

Avatar Image

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

Имя

Слой имени — это что-то парадоксальное, но невероятно мощное. Я создавал символы всех текстовых стилей в Sketch, чтобы я мог менять цвета внутри символов. Это заняло некоторое время:

Текст кнопок Sketch

Но теперь, когда у меня все настроено, я могу менять цвет текста в символе без необходимости создавать полностью новую сущность:

Изменения текста в Sketch

Так как текстовый символ — это… в общем-то… текст… поэтому у меня есть возможность редактировать контент. Я только что назвал сам текстовый слой в этом символе «↳🖊Content», чтобы понимать, что он меняет этот контент.

Снова, это все один символ, так что если я редактирую базовый символ, все сущности обновятся:

Редактировать символ Sketch
Один символ. Три наследования!
Просто волшебство.

Метка

Метка — это еще один символ, но и у него есть интересные свойства. Посмотрим:

Символ метка Sketch

Внутри символа метки у меня есть текстовый символ (чтобы я мог позже его менять), и символ «Container». Вот как все выглядит:

Символ метка Sketch - 2

Слой «Container» в символе метки — это переименованная сущность символа контейнера с закругленными углами. Каждый из этих контейнеров имеет символ состояния (чтобы я мог редактировать состояние метки)…

Слой “Container” Sketch

…символ цвета (чтобы я мог редактировать цвет)…

Слой “Container” Sketch - 2

…и маска, которая определяет его фигуру.

Примечание для Sketch: было бы здорово использовать символы как маски.

Заметьте, что мои символы состояния и цвета имеют разную ширину. Это чтобы «защитить» их выпадающие списки в панели инспектора, когда я позже буду редактировать мой символ элемента списка. Если я выбираю цвет для фона, я не хочу видеть другие символы в этом списке. Мне нужны только цвета.

Только цвета! Ничего более!

Только состояния! Ничего более!
Делайте все символы, которые хотите видеть в дропдауне вместе одного размера, и обязательно делайте все другое хотя бы на 1 пиксель больше или меньше. Вот почему они никогда не будут связаны вместе.

Индикатор ввода

Это маленький символ, который появляется, когда кто-то печатает.

Совет от профи: Настраивайте все иконки как маски и используйте символ цвета поверх. Таким способом вы можете редактировать символ цвета, если нужно изменить цвет. Один символ иконки… и любой цвет на выбор 🙂

Этот прием был впервые представлен Free&Willing:
Sketch: Иконки со вложенными символами

Я всегда хотел создать одну версию иконки и применять к ней разные цвета, или затенять ее, чтобы задавать различные состояния — активная или…medium.com

самый крутой прием в Sketch - 1

самый крутой прием в Sketch - 2

Контейнер

Последний слой! Это просто переименованная сущность символа цвета «Mixin/Fill». Я добавил ее, чтобы можно было включать/выключать выбранное состояние:

самый крутой прием в Sketch - 2
В правом краю вы видите, что выбран символ «Mixin/Fill/White-Disabled».
самый крутой прием в Sketch - 3

Это все! Как видите, все довольно непросто, требует продумывания и правильной организации, но факт, что сейчас мы можем применять буквально тысячи различных примочек к одному символу — настоящая инновация. Это самый крутой прием для экономии времени, который я когда-либо создавал.

Здорово, не так ли? Я проделал то же самое с массой других символов:

Символы Sketch
Посмотрите на все эти каскадные символы в панели инспектора!
Это довольно большой объем работы для одного символа, а в дизайне приложений их десятки, если не сотни.

Я пошел дальше, и проделал всю черную работу для вас, так что все смотрится красиво:

Выпадающие списки Sketch

Выпадающие списки Sketch - 2

Вложенные символы - это, вне всякого сомнения, самая крутая фишка Sketch

Иконки Sketch

Если вам интересно, можете получить их через новый сайт UX Power Tools. Вы также можете просмотреть полное руководство по стилю на InVision или Marvel.

Думаю, вам понравится.

Как использовать ресайз символов в Sketch по полной