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

Огромное спасибо Lloyd Humphreys за вдохновение на этот метод глубокого вложения, особенно для текста. Когда Sketch запустил правила ресайза в Sketch 39, это было настолько кардинальной переменой, что я хотел испечь торт с лого Sketch, чтобы можно было отпраздновать это новшество еще раз лично. Само собой разумеется, из-за возможности редактирования сущностей символа (symbol overrides) в Sketch 41, я заливался йодлем в чистейшей эйфории и счастье. Это было довольно крупное нововведение. После множества проб и ошибок, я создал несколько наиболее гибких, кастомизируемых и удобных в сопровождении компонентов для работы со вложенными символами, их редактированием, и то, что я называю Cascading Symbol Styles (каскадные стили символов), или CSS. Вот что мы можем сделать с каскадными стилями символов в Sketch. Честно говоря, этот прием не особенно новый. Это просто набор вложенных символов, дотошно организованных в порядок в инспекторе Sketch. Но я подумал, что вы найдете этот метод интересным, так что располагайтесь поудобнее, запаситесь попкорном.

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

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

Слои:

Фото

Это переименованная сущность символа “Avatar Image”. Почему ее переименовали? Потому что это то, что показывается в панели инспектора, когда я где-либо использую этот символ. Мне бы хотелось, чтобы название символа было приятным и понятным, а не “Avatar/Image”, которое в конечном итоге еще и урезается. Во-вторых, чтобы покрыть случай, когда пользователь не загрузил фото профиля, я создал аватар по умолчанию, который хочу показывать. Теперь обратите внимание, потому что это важно: Так как размеры символов Avatar/Image и Avatar/Default одинаковые (смотрите выше), я смогу выбирать, какой символ хочу показывать в выпадающем меню инспектора: Заметьте, я не парюсь по поводу сотни других символов. Это потому что другие символы не совпадают по размерам с базовым, вложенным внутрь символа элемента списка. Имеет смысл?

Имя

Слой имени - это что-то парадоксальное, но невероятно мощное. Я создавал символы всех текстовых стилей в Sketch, чтобы я мог менять цвета внутри символов. Это заняло некоторое время: Но теперь, когда у меня все настроено, я могу менять цвет текста в символе без необходимости создавать полностью новую сущность: Так как текстовый символ - это...в общем-то… текст… поэтому у меня есть возможность редактировать контент. Я только что назвал сам текстовый слой в этом символе “↳?Content”, чтобы понимать, что он меняет этот контент. Снова, это все один символ, так что если я редактирую базовый символ, все сущности обновятся: Один символ. Три наследования! Просто волшебство.

Метка

Метка - это еще один символ, но и у него есть интересные свойства. Посмотрим: Внутри символа метки у меня есть текстовый символ (чтобы я мог позже его менять), и символ “Container”. Вот как все выглядит: Слой “Container” в символе метки - это переименованная сущность символа контейнера с закругленными углами. Каждый из этих контейнеров имеет символ состояния (чтобы я мог редактировать состояние метки)... …символ цвета (чтобы я мог редактировать цвет)… …и маска, которая определяет его фигуру.

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

Заметьте, что мои символы состояния и цвета имеют разную ширину. Это чтобы “защитить” их выпадающие списки в панели инспектора, когда я позже буду редактировать мой символ элемента списка. Если я выбираю цвет для фона, я не хочу видеть другие символы в этом списке. Мне нужны только цвета. [caption id="attachment_34295" align="alignnone" width="800"] Только цвета! Ничего более![/caption] [caption id="attachment_34294" align="alignnone" width="800"] Только состояния! Ничего более![/caption] Делайте все символы, которые хотите видеть в дропдауне вместе одного размера, и обязательно делайте все другое хотя бы на 1 пиксель больше или меньше. Вот почему они никогда не будут связаны вместе.

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

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

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

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

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

Контейнер

Последний слой! Это просто переименованная сущность символа цвета “Mixin/Fill”. Я добавил ее, чтобы можно было включать/выключать выбранное состояние: В правом краю вы видите, что выбран символ “Mixin/Fill/White-Disabled”. Это все! Как видите, все довольно непросто, требует продумывания и правильной организации, но факт, что сейчас мы можем применять буквально тысячи различных примочек к одному символу - настоящая инновация. Это самый крутой прием для экономии времени, который я когда-либо создавал.

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

Посмотрите на все эти каскадные символы в панели инспектора! Это довольно большой объем работы для одного символа, а в дизайне приложений их десятки, если не сотни. Я пошел дальше, и проделал всю черную работу для вас, так что все смотрится красиво: Если вам интересно, можете получить их через новый сайт UX Power Tools. Вы также можете просмотреть полное руководство по стилю на InVision или Marvel. Думаю, вам понравится. http://ux.pub/kak-ispolzovat-resajz-simvolov-v-sketch-po-polnoj/

---

Перевод статьи Jon Moore