#классные_люди: Эш Торп

Эш Торп — талантливый моушн-дизайнер и иллюстратор из Сан-Диего, который делает графику для кино, организовал образовательную площадку Лён Скуэд и ведёт интересный подкаст.

https://medium.com/sketchdesigner/ash-thorp-22c531d5dcf3

behance.net/ashthorp

ashthorp.com

Шоурил: vimeo.com/163300654

Сегоднешний выпуск Классных Людей просто обязан взорвать, не пропусти. Я благодарен этому человеку за то, чему он меня научил, и продолжаю учиться по его курсам. Главный вопрос, который у меня возникает после всего этого: «Ого, а так можно было?»

Пробуем новый формат обучалок:

Union и Subtract #GIF

Как тебе формат быстрых обучающих гифок?
anonymous poll

Ваще огонь! – 150
👍👍👍👍👍👍👍 93%

Идея интересная, но качество жесть. Лучше всё-таки Ютюб и со звуком. – 8
▫️ 5%

Я ничерта не понял из гифки. И как её остановить? – 3
▫️ 2%

👥 161 people voted so far.

Sketch Palettes

Сохраняет палитры Global Colors и Document Colors в файл с расширением *.sketchpalette. Умеет загружать палитры из таких файлов обратно в Скетч. Умеет сохранять заливки, градиенты и даже паттерны.

Здорово, когда палитру можно отправить отдельным файлом. Например, загрузить утверждённую палитру проекта в облако и раздать всем дизайнерам, чтобы не пипетили. В этом он соперничает с Крафтом. В отличие от него, Palettes использует родное окошко выбора цвета, что гораздо удобнее.

Очень полезный плагин, проверенный в боевой работе. Доступен в Runner.

github.com/andrewfiorillo/sketch-palettes

#плагины

Sketch Wanderer

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

github.com/turbobabr/sketch-wanderer

Если не использовать его, выделять слои с клавиатуры сложно: Tab листает элементы одного уровня иерархии, Enter позволяет войти в группу или артборд, а Esc — выйти на уровень вверх. Постоянно нужно держать в голове, на каком уровне находишься.

Вандерер (от англ. — странник) позволяет использовать Ctrl + Alt + ↓ и ↑ чтобы выделять нижние и верхние слои. И это очень удобно, как будто все элементы находятся на одном уровне. Если нужно развернуть или свернуть группу, можно использовать Ctrl + Alt + ←→.

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

Плагин доступен в Runner.

#плагины

В Скетче есть пара клавиш, которая позволяет сортировать слои — Alt + Cmd + ↑↓. Она замечательно ложится в схему работы Странника: шагаем на Ctrl + Alt + стрелках, тащим на Alt + Cmd + стрелках.

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

Цикл «Создание Tinkoff Design System» будет полезен тем, кто пытается организовать дизайн крупного проекта. Если в работе нескольких дизайнеров нет единой системы и правил, возникает бардак. Эти посты рассказывают как удалось упорядочить дизайн в Тинькове.


Часть 1: Первые шаги goo.gl/z2fXFt

В вводной части дизайнер Никита Прилепский рассказывает, почему им нужна была дизайн-система и какие выгоды даёт её построение. Они решили использовать методологию атомарного дизайна. Из этого поста я почерпнул важную мысль, что дизайнеры и разработчики должны иметь одну и ту же систему названий. Дизайн-система — это единая типографика и стиль, компоненты, каркасы макетов (лэйауты), документация и котроль версий.


Часть 2: UI Kit, версионирование и витрина компонентов goo.gl/qb5q35

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

Что сделали:
- Уменьшили количество компонентов
- Зафиксировали сетку в пикселах
- Ввели контроль версий через сервис Abstract
- Каждому компоненту в системе дали версию
- Сделали внутренний сайт-витрину.

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

Ждём третью часть про бизнес-процессы.

#дизайн_системы

Вышел Sketch 47

В официальном релизе появились библиотеки символов. Также появилась возможность сглаживать стыки в скруглениях углов.

Подробнее в Медиуме Скетча: goo.gl/tWKkrj

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

Приятность: Новый Скетч 47 обратно совместим с предыдущей версией 46.2. Раньше надо было покупать обновление или идти лесом. Меня удивляет и радует это человеколюбие.

Скрываем вложенные символы

Символ А содержит вложенный символ Б. В макете есть несколько копий А. Если в них нужно скрыть Б, выделяем все А и ставим оверрайд Б в None (Shift + Alt + Cmd + N). #GIF

---


Нахрена?

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


Shift + Alt + Cmd + N скрывает верхний оверрайд

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


Оверрайд группой

Вдвойне красиво, что это можно делать с группой символов. Таким же образом можно прописывать в текстовые объекты символа новые надписи, а в растровые объекты картинок — новые картинки. Главное условие: все выделенные копии символов должны иметь общий мастер.


Убираем лишние поля из блока оверрайдов

Если заблокировать (Shift + Cmd + L) текстовый слой, изображение или символ в мастере, они не появятся в списке полей Overrides.


Глюк с оверрайдами в Зеплине исправили

Оверрайды используются для переключения иконок. Ещё совсем недавно в Зеплине был глюк, который не позволял скачать иконку, если она была установлена оверрайдом. Вместо этого верстальщики загружали оригинальную иконку, прописанную в мастер-символе. Это лишало смысла оверрайды для иконок и я долго не использовал их. Подтверждаю, что в актуальной версии Скетча (47) и Зеплина (1.20) это исправили и коммунизм стал чуть ближе.

#идеология_символов

Раннер обновился и теперь вставляет символы из библиотек. Можно настраивать, какие библиотеки будут показываться в меню. Насколько быстро будет работать список из 1000 символов — вопрос открытый.