Пространство и время

Побывал на прошлой неделе в барселонском офисе N26 на митапе Into Design Systems. Хотел попасть ещё в прошлый раз, но это был первый в моей практике отказ после регистрации на ивент: видимо, быстро разобрали все места. В этот раз повезло, и я приплыл (на улице +38) по нужному адресу вовремя. Офис N26 находится в районе El Poblenou, который по контингенту и языку напоминает Брайтон-Бич (ну или Патрики). Симпатичное, но дефолтное здание. Я могу быть предвзят, но меня хорошим офисом удивить сложно, спасибо бывшей и текущей работе. Митап проходил в небольшом опенспейсе, было человек 50–60, в общем, формат обычного демо за прошедший спринт. Открыли мероприятие трое ребят из N26, хосты: рассказали про компанию, порекламили пару вакансий. Кстати, фоткать попросили вообще ничего не снимать: «ну у нас тут всё под строгим NDA, ю ноу». Хотя, если честно, ни одного финального макета или чего-то секретного так и не показали. Дальше выступал Alex Bailon, Design System Manager из N26. На мой взгляд, это был самый технически полезный доклад: он показал несколько небольших внутренних утилит (буквально на одну фичу каждая) и сделал упор на основной плагин, упрощающий жизнь продуктовым дизайнерам. Что мне запомнилось: - работа с a11y: трёхпозиционный переключатель с множителем ×1, ×1.5, ×2. За счёт привязки всех вэриэблз эта штука позволяет быстренько проверить эдж-кейсы с масштабированной вёрсткой. Удобно, полезно и важно, учитывая ультимативно жёсткие требования ЕС в части доступности; - быстрые шаблоны/блоки для паттернов приложения: кастомные навбары, таббары, карточки, карусели; - перепривязка паддингов и марджинов к вэриэблз для тех, кто поленился лезть в нативную менюшку, по сути экономит пару кликов; - хайлайтом стала фича переключения фрейма из iOS в Android и обратно. Большинство дизайнеров и стейкхолдеров сидят на iOS, а разработчикам тоже нужно передавать макеты под Android. Вот тут аудитория буквально взорвалась овациями, а я сидел, с одной стороны, с абсолютнейшим покерфейсом, а с другой стороны, с теплотой и гордостью на душе. Дело в том, что ровно эту же проблему я решил с командой ещё лет пять назад в Сбере, разумеется, без помощи ИИ-агентов и вайбкодинга =D Следующим выступала Mertxe Hinarejos Álvarez, Design System Lead из HP, с абсолютно проходным докладом: дженерик-проблематика и такое же решение. «Нашу команду ДС часто доставали вопросами, как и что нужно использовать, поэтому мы прикрутили чат-бота, а потом узнали про MCP-сервер». Вывод: документация нужна и должна быть написана хорошо. В целом доклад напомнил общее ощущение от HP в последние годы. После на сцену выкатился звездочка вайбкодинга Sil Bormüller, создатель Figma CLI и фаундер Into Design Systems. Весь доклад был посвящён Figma CLI и восхвалению Клода, тут тяжело спорить. Очень приятный чувак, сильно напирал на то, что он жуткий хиккан и интроверт, хотя визуально выглядит прям душой компании; вероятно, поэтому и показался мне таким близким по вайбу. Приятно поболтали после выступления. Завершающий рассказ был от Justine Montgomery, кофаундера (ты кофаундер, я кофаундер, мы кофаундеры) Into Design Systems. Джастин построила сторителлинг на карьерном треке: рассказала, как тяжело прошёл переход из графического дизайна в продукт; переход в дизайн-системы дался проще, но она попала в ловушку портфолио ДС-дизайнера. Тут захотелось её обнять, ведь я и сам точно так же мучился с похожим кейсом. Пускай ДС такой же продукт, хоть и внутренний, но по опыту знакомых, студентов и моему личному с ними куда сложнее: не знаешь, как, что и о чём писать, что показывать. Панчлайн был виден издалека: она решила сделать платформу, которая помогает дизайнерам собрать каркас кейса, отвечая на вопросы. Обещает запустить в августе. Несмотря на то что доклады не произвели прям большого впечатления, общее ощущение от ивента осталось приятное. Профили всех спикеров на LinkedIn вынес и хотел завершить одной мыслью (напоминалкой самому себе): не забывай, а главное, не стесняйся рассказывать про свою работу. Если ты читаешь эти строки, то ты и есть сопротивление!

Figma провела свою ежегодную конфу, где показала продуктовые новинки, которые восприняли мягко говоря прохладно, а в переводе на человеческий — закидали хуями, начали хоронить и окрестили новым Adobe. Чтобы не засорять эфир в день Х, я решил сначала потестить Figma Motion сам, чтобы водолазку надевать не пришлось, а не как в интернете обычно принято. Пробежимся по плюсам - Интерфейс очень простой. Если ты хоть раз в жизни работал с любым линейным редактором, в котором есть работа с ключами, считай ты уже всё знаешь. - Есть быстрые пресеты на position, scale, rotation, opacity и trim path - Эффекты из пресетов стакаются друг на друга - Свойства можно уводить в цикл без всяких костылей с экспрешенами - Есть удобный гизмо на трансформации — подсмотрели в современном 3D-софте, не иначе - Есть автоматическая запись ключей, тоже уверен в 3D-софте подсмотрели - Можно менять расположение анкор поинта (круто, а можно в design mode то же самое, пажалста? Уже хз сколько лет просим, ждём и надеемся) - Блюр и uniform и progressive можно анимировать - Можно AI-агентом генерить шейдеры прямо в режиме Motion - Все эффекты и «ручки» шейдеров (добавить которые агент тебя любезно спрашивает при генерации) можно анимировать - Маски можно анимировать, но именно на уровне всего шейпа — отдельные точки анимировать нельзя - Добавили моушн токены в variables. Это очень здорово для дизайн-системности анимаций твоего продукта, если ты серьёзно работаешь с анимациями, а не просто перделки прикручиваешь Теперь добавим пару ложек говна - Нельзя анимировать градиенты (пока только плоские цвета, при этом тени анимировать можно, упс, просчитался, но где?) - В режиме Design блок с позиционированием элемента называется (ты не поверишь!) Position, а в режиме Motion тот же самый блок называется Transform - При включённом строуке по центру (не inside/outside) trim path просто не работает — понятно почему не работает, но непонятно, отчего в таком случае не дизейблить фичу или как-то подсказывать это в UI - Свойства нельзя переименовывать на таймлайне. А больших и сложных переходах это может стать проблемой - В интерфейсе можно (зачем-то) переключать таймлайн с миллисекунд на секунды, лучше бы добавили переключение на кадры, как по мне - Есть экспорт готового кода, но с оговоркой: на выходе получаем только код базовых эффектов, которые поддерживаются браузерами. Экспортнуть сейчас можно в CSS, React и JSON. Позже обещают добавить экспорт Lottie и очень размыто пообщелаи экспорт шейдеров. - 3D-трансформации тоже наобещали, но пока не включили Откуда столько хейта? На мой взгляд Figma потеряла продуктовый фокус и как настоящий СДВГшник пытается ухватиться за всё подряд — в итоге получается от силы результат "в рамках ожиданий", старые долги не закрываются, а новые продуктовые стримы забываются сразу после презентации. Помните, в прошлый раз они показывали упрощённую Figma для сммщиков и маркетологов? Кто сейчас помнит, как она называлась? Да даже те же стрелочки из FigJam сколько лет уже просят — мне кажется, они внутри уже превратили это в мем, как Half-Life 3. Что в итоге? Хороший ли это продуктовый релиз? Да, это хороший фундамент, который снижает порог входа в UI-моушн для юных дизайнеров, которые перестали мыслить статичными картинками и начинают понимать ценность и силу интерактива. Лично знаю десятки человек, которые открывали в своё время AE, видели его UI и со словами «ой_ну_нахер.gif» закрывали его и никогда не возвращались. Но для серьезного продакшена врядли кто-то будет перекраивать свой пайплайн с тем набором, что показали. Удачное ли это время для такого релиза? Удачным оно было лет 7–8 назад, когда ещё был живой Principle, Framer пытался найти свою идентичность, а рынок хардкорных инструментов прототипирования делили с ножами за гаражами Origami и ProtoPie. Но мы прекрасно знаем, что вместо Motion mode тогда мы получили «макаронную фабрику». Что ж, будем следить. Конкуренция — это хорошо. Жаль только, что 3D-трансформацию показали, но не завезли. Пока работаем по осям X, Y и Й.

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

Pixel Point выложили видео про то, как делали ребрендинг Unkey — и это отличный повод накатать постец о студии, работы которой ты, скорее всего, видел, но, возможно, не знал её названия. Это европейское дизайн‑агентство с русскими корнями (офис во Франции, команда распределена), которое уже лет восемь делает маркетинговые сайты и брендинг для западных технологических компаний. Если ты в любом поисковике или агрегаторе лендосов случайно рядышком складывал слова B2B, SaaS и FinTech, то с великой вероятностью видел их работы. Вместе с брендингом они ещё навайбкодили несколько внутренних тулов: один генерирует обложки для постов блога, другие ускоряют работу с анимациями. То есть концептом и реализацией дело не обошлось — Pixel Point выстраивают систему, которая потом помогает клиенту получать предсказуемый результат из концепта и работать без помощи агентства. И это в очередной раз подтверждает мои тезисы в постах выше: сейчас дизайнерам можно и нужно врываться в новые инструменты, чтобы реализовывать свои самые отлетевшие идеи, как для себя, так и для клиентов. Весь дизайн, иллюстрации, моушн и разработка выполняется инхаус, без аутсорса. Стек: Blender, Cinema 4D, Rive на стороне дизайна и WebGL, React, Next.js, Tailwind на стороне разработки. Одна из немногих студий, которая концепты дотаскивает до продакшена с минимальными потерями и формирует то, как выглядит современный «дорогой B2B». Из ближайших аналогов мне вспоминается студия Чулакова, но у этих ребят немного другой сегмент рынка. Достаточно иронично то, что несмотря на узнаваемую стилистику их проектов — глубина пространства, много моушена, глоу-эффектов и тенюшек — их сайт выполнен в плоской векторной стилистике (аля плагин Newton), хоть и далеко не без приколов. Рекомендую посмотреть и видео, и их кейсы, но осторожно: можно прям залипнуть.

Пространство и время pinned a photo

Из Figma в After Effects. Вошли и вышли, приключение на 20 минут. Каждый раз думаешь ты, когда нужно перегнать макеты из Figma в After Effects. На практике обычно получается как у героев из цитаты выше. Чтобы спасти ваше време(о)чко и нервные клетки, собрал список обезболивающих плагинов. AEUX Старичок-базовичок. Один из первых (а может, даже первый — я не проверял) плагинов от Адама Плоуфа, созданный им во время работы в команде Google Motion. Адам уточняет в репозитории, что это не официальный продукт Гугла. Последнее обновление было в сентябре 2022, но всё ещё достоин. В Figma ставится через manifest.json, в Афтере — ZXP-пакетом. Плюсы: • Он бесплатный • Поддерживает параметрические свойства и эффекты, которые есть и в Афтере. То есть всякие ангулярные градиенты из Figma работать не будут. Для этого придётся растрировать слой — в интерфейсе плагина под это есть кнопка. В самом макете ничего растрироваться не будет, это произойдёт в момент проброса фрейма в композу плагином • Есть мультипликатор плотности пикселей. Ставите под нужный девайс — и готово • Он умеет «ломать» прекомпы. Не понимаю, почему эта функция до сих пор не попадает в нативную сборку Афтера Overlord Самый (на мой взгляд) функциональный и удобный выбор. Полноценный пайплайн для продуктовых латентных моушн-дизайнеров, работающих между Figma и After Effects. По сути это доведенный до ума и коммерческого использования AEUX. Автор тоже уже известный Адам. Figma-часть плагина выросла как раз из AEUX, но сильно прокачалась. Принцип установки и работы очень близкий. В этот раз начну с минусов: он стоит $75. Разовый платёж. Да, не копейки, но плагин того стоит. Апдейты вы будете получать год, после чего плагин продолжит работу, но обновления перестанут приходить. Плюсы: • Работа с векторами • Нормальная поддержка редактируемых текстовых фреймов • Линейные и радиальные градиенты • Параметрические шейпы • Поскольку мы живём в сложном мире, где две маленькие инди-компании не могут договориться о том, как правильно считать трекинг в текстовых блоках, иногда случаются нюансы при их перебрасывании между софтом. Раньше для решения этого вопроса приходилось экспортировать референсную пнгшку и подгонять параметры вручную. У Overlord для этого есть отдельная спасительная кнопка • В момент загрузки в плагине можно любоваться анимациями Риса Паркера ❤️ Минусы: • Плагин работает быстро и хорошо, поэтому ты не успеваешь насладиться анимациями Риса Паркера 💔 DEmotion Ещё один аналог, немного дешевле Overlord. Стоит $60 (со скидосом — $47). Плюсы: • Тени, блюры, градиенты • Blend-моды • Поддерживает экспорт в 1x, 2x, 3x • Может автоматом прекомпить слои • Плагин достаточно молодой, комьюнити поменьше по сравнению с AEUX и Overlord UXLink Тоже относительно свежий плагин и самый дешёвый в этой подборке — ну, кроме AEUX, очевидно. Стоит $20, разовая покупка. Автор напрямую сравнивает свой плагин с Overlord, но не стесняется называть его более простым — зато доступным. Плюсы: • Работа с векторами • Изображения переносятся в папку Assets • Линейные и радиальные градиенты до 5 стопов • Свойство Clip Content из Figma конвертируется в трек-маски AE • Оверайды в компонентах остаются на своих местах • Тени и блюры тоже конвертируются в нативные эффекты AE Ну и традиционно — знаете сами, перешлите подруге или другу.

У Rive в early access выкатили GPU Canvas. Это низкоуровневый GPU-слой для работы с 3D и шейдерами. Этот апдейт не просто добавляет фичу, а ощутимо пробивает (но не дно!) потолочек возможностей. Мы теперь прямо в Rive сможем сами писать шейдеры и кастомные эффекты или даже запилить свой GLTF-импортер и затаскивать в проект свои тридешки. GLTF, если что, это такой открытый формат 3D-моделей, что-то типа джипега в мире 3D. Он даёт удобно упаковать геометрию, материалы, текстуры, скелетную анимацию и иерархию объектов в один файл, который потом открывает любой движок. В анонсе упор сделан на сознательный low-level подход, ориентированный на разработчиков, но! Если ты не пишешь шейдеры сама/сам (а по понятным соображениям большинству нормальных людей это не очень-то нужно), за тебя это сделает агент. Следующим шагом обещают запилить и свой MCP. Не знаю, какой магией пользовались разработчики, но говорят, что вес библиотеки вырос всего на 25 КБ. А теперь комбо-финишер: это не отдельная песочница, т.е. можно рендерить 2D-компоненты как интерактивные текстуры внутри 3D-сцены или наоборот встраивать 3D в 2D-артборд. Сцены работают вместе со всем привычным инструментарием: адаптивные лэйауты, стейт-машины, динамический текст, вектор-фезеринг, скелеты, дата-биндинг. Работает везде, где работает Rive: веб, мобилки, игровые движки, телевизоры, экраны в тачках. Такой набор инструментов не даёт ни один движок. Rive, где вообще мой чек за рекламу? P.S. Нас с вами уже почти 500 человек, давайте добьём до круглого числа и в очередной раз спасибо вам за доверие! https://www.youtube.com/watch?v=vy5BWGNE0Gg

Мне пришлось срочно осваивать Plasticity, потому что Миша Кац позвал поучаствовать в очень крутом проекте. Я человек простой: если Миша зовёт, то я иду. Кто знает Мишу, тот понимает, о чём речь. Plasticity очень понравилась. Она как игры Nintendo или Figma, easy to learn, hard to master. Кажется, это ровно тот инструмент и подход к моделированию, которые я ждал. А, ну и ещё пришлось вспоминать, с какой вообще стороны нужно подходить к Cinema 4D. Сделал пару тестовых шотов. Про проект буду потихоньку рассказывать, пока скажу только, что это девайс. И у него, вы не поверите, есть экран. Поскольку у современных экранов очень высокая плотность пикселей, на крупном плане он выглядит почти как бумага, ну светящаяся разве что. А если это OLED, то и не полностью светящаяся. Но если его сииильно увеличить, всё равно можно будет разглядеть разноцветные диоды. Для экрана я быстренько собрал полупроцедурный материал, который при необходимости смогу использовать на разных клоузапах. А если не понадобится, то буду в интернетах хвастаться.

Очень приятно, когда выкладываешь что-то персональное, а тебя с душевным комментом репостит дизайн-директор Deel. Я согласен с Сашей, однако мне кажется, большинство команд правда будут инвестировать время в новые фичи и пойдут более прагматичным путём. До эмоционального дизайна команде нужно «дорасти» и подходить взвешенно: если на сыром продукте делать фокус только на эмоции, у пользователей будет бомбить — закрытие базовых потребностей даже не обсуждается, это аксиома. Но лично я в профессии именно ради «объёмного» опыта. Именно про него хочется рассказывать и делиться, именно он вирусится и раскручивает сарафан. Базовый минимум или аккуратную вёрстку никто пересказывать друзьям не будет — а вот пасхалка или чет неожиданное — другое дело. https://www.linkedin.com/posts/sasha-grishin_before-design-capacity-is-scarce-prioritise-ugcPost-7457452195341357058-jvFp?utm_source=share&utm_medium=member_desktop&rcm=ACoAACgydgYBLV6f2Ww1lxCG964Fz4mLAZJwF2w

Мне наконец приехал мой подарок самому себе на день рождения. Месяца два я думал и замучил буквально всех знакомых и друзей с выбором железа. Никогда не думал, что мы доживём до момента, когда топовый мак окажется дешевле, чем собрать кастомную печку. Я, как обычно, пересмотрел примерно ВСЕ обзоры, что сейчас есть в интернете, и понял, что под мои рабочие задачи, учебные проекты и всякие персональные приколюхи мак мне сейчас подходит больше, учитывая, что 3D всё же не моя основная деятельность, хоть я и любитель со стажем. В итоге я взял MacBook Pro M5 Max 128 Gb Unified Memory. SSD не менял, оставил стоковые 2 Tb. Взял, как обычно, с запасом на несколько лет вперёд. Наконец я смогу открыть третью вкладку в хроме и ждать запуска After Effects ровно столько же, сколько и раньше на любом топовом железе. По этому случаю снял для вас первый в своём роде анпакинг в жанре ASMeme, с оммажем классике (конечно же, я не проверял, но вы уж поверьте). Обязательно досмотрите, в конце будет полезная карьерная рекомендация от меня.