Пространство и время
Kanalga Telegram’da o‘tish
Ko'proq ko'rsatish
Mamlakat belgilanmaganToif belgilanmagan
524
Obunachilar
+124 soatlar
+167 kunlar
+2030 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Ma'lumot yo'q
Muammo bormi? Iltimos, sahifani yangilang yoki bizning qo'llab-quvvatlash boshqaruvchimizga murojaat qiling>.
Taglar buluti
Ma'lumot yo'q
Muammo bormi? Iltimos, sahifani yangilang yoki bizning qo'llab-quvvatlash boshqaruvchimizga murojaat qiling>.
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Iyul '26
Iyul '26
+16
0 kanalda
Iyun '26
+48
2 kanalda
Get PRO
May '26
+32
0 kanalda
Get PRO
Aprel '26
+86
1 kanalda
Get PRO
Mart '26
+328
0 kanalda
Get PRO
Fevral '260
1 kanalda
Get PRO
Yanvar '26
+36
1 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 08 Iyul | 0 | |||
| 07 Iyul | +1 | |||
| 06 Iyul | +8 | |||
| 05 Iyul | +1 | |||
| 04 Iyul | +1 | |||
| 03 Iyul | +3 | |||
| 02 Iyul | 0 | |||
| 01 Iyul | +2 |
Kanal postlari
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 и Й.
| 2 | Шикарный пример от Николая Домнина, как показать максимально знакомую бытовуху для ребенка из постсоветского пространства в эстетике дорогих продуктовых шотов. | 254 |
| 3 | Pixel Point выложили видео про то, как делали ребрендинг Unkey — и это отличный повод накатать постец о студии, работы которой ты, скорее всего, видел, но, возможно, не знал её названия.
Это европейское дизайн‑агентство с русскими корнями (офис во Франции, команда распределена), которое уже лет восемь делает маркетинговые сайты и брендинг для западных технологических компаний. Если ты в любом поисковике или агрегаторе лендосов случайно рядышком складывал слова B2B, SaaS и FinTech, то с великой вероятностью видел их работы.
Вместе с брендингом они ещё навайбкодили несколько внутренних тулов: один генерирует обложки для постов блога, другие ускоряют работу с анимациями. То есть концептом и реализацией дело не обошлось — Pixel Point выстраивают систему, которая потом помогает клиенту получать предсказуемый результат из концепта и работать без помощи агентства. И это в очередной раз подтверждает мои тезисы в постах выше: сейчас дизайнерам можно и нужно врываться в новые инструменты, чтобы реализовывать свои самые отлетевшие идеи, как для себя, так и для клиентов.
Весь дизайн, иллюстрации, моушн и разработка выполняется инхаус, без аутсорса. Стек: Blender, Cinema 4D, Rive на стороне дизайна и WebGL, React, Next.js, Tailwind на стороне разработки. Одна из немногих студий, которая концепты дотаскивает до продакшена с минимальными потерями и формирует то, как выглядит современный «дорогой B2B». Из ближайших аналогов мне вспоминается студия Чулакова, но у этих ребят немного другой сегмент рынка.
Достаточно иронично то, что несмотря на узнаваемую стилистику их проектов — глубина пространства, много моушена, глоу-эффектов и тенюшек — их сайт выполнен в плоской векторной стилистике (аля плагин Newton), хоть и далеко не без приколов. Рекомендую посмотреть и видео, и их кейсы, но осторожно: можно прям залипнуть. | 356 |
| 4 | Из 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
Ну и традиционно — знаете сами, перешлите подруге или другу. | 988 |
| 5 | У 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 | 456 |
| 6 | Мне пришлось срочно осваивать Plasticity, потому что Миша Кац позвал поучаствовать в очень крутом проекте. Я человек простой: если Миша зовёт, то я иду. Кто знает Мишу, тот понимает, о чём речь. Plasticity очень понравилась. Она как игры Nintendo или Figma, easy to learn, hard to master. Кажется, это ровно тот инструмент и подход к моделированию, которые я ждал. А, ну и ещё пришлось вспоминать, с какой вообще стороны нужно подходить к Cinema 4D. Сделал пару тестовых шотов.
Про проект буду потихоньку рассказывать, пока скажу только, что это девайс. И у него, вы не поверите, есть экран. Поскольку у современных экранов очень высокая плотность пикселей, на крупном плане он выглядит почти как бумага, ну светящаяся разве что. А если это OLED, то и не полностью светящаяся. Но если его сииильно увеличить, всё равно можно будет разглядеть разноцветные диоды. Для экрана я быстренько собрал полупроцедурный материал, который при необходимости смогу использовать на разных клоузапах. А если не понадобится, то буду в интернетах хвастаться. | 377 |
| 7 | Очень приятно, когда выкладываешь что-то персональное, а тебя с душевным комментом репостит дизайн-директор 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 | 456 |
| 8 | Мне наконец приехал мой подарок самому себе на день рождения. Месяца два я думал и замучил буквально всех знакомых и друзей с выбором железа. Никогда не думал, что мы доживём до момента, когда топовый мак окажется дешевле, чем собрать кастомную печку. Я, как обычно, пересмотрел примерно ВСЕ обзоры, что сейчас есть в интернете, и понял, что под мои рабочие задачи, учебные проекты и всякие персональные приколюхи мак мне сейчас подходит больше, учитывая, что 3D всё же не моя основная деятельность, хоть я и любитель со стажем.
В итоге я взял MacBook Pro M5 Max 128 Gb Unified Memory. SSD не менял, оставил стоковые 2 Tb. Взял, как обычно, с запасом на несколько лет вперёд. Наконец я смогу открыть третью вкладку в хроме и ждать запуска After Effects ровно столько же, сколько и раньше на любом топовом железе.
По этому случаю снял для вас первый в своём роде анпакинг в жанре ASMeme, с оммажем классике (конечно же, я не проверял, но вы уж поверьте). Обязательно досмотрите, в конце будет полезная карьерная рекомендация от меня. | 391 |
| 9 | Учитывая, что на дворе почти буквально май месяц, я вспомнил, что ёлку уже можно было бы вынести. А вспомнил я к тому, что когда-то давно, ещё работая в Сбере, в (совершенно внезапной) предновогодней суете нам прилетела задачка: нарядить главный экран к Новому году. Ну и в такой ситуации самым низковисящим яблочком (прям вот плацкарт, нижняя полочка) обычно получаются снежинки. Понятное дело, снежинки можно сделать по-разному, но на практике чаще получается результат уровня сайтов на хосте narod.ru (опять возраст выдаю). Я подумал и предложил следующий концепт: пользователь дует в микрофон устройства, и экран постепенно покрывается изморозью. После этого, как на реальном «запотевшем» стекле в автобусе или трамвае, можно пальцем нарисовать или написать что-нибудь. И вот такую милую открыточку можно отправить любимому и близкому человеку. А если вы пользовались Сбером, то знаете, что мы когда-то запускали сервис отправки открыток, который очень хорошо завирусился. На мой взгляд, очень эмоциональная, тактильная, а главное интерактивная фича, почти фиджитал, хах.
«Огонь, давайте делать!» — сказали мне наши фронтендеры… где-то в моём воображении. Но в реальности я услышал: «Лёш, ты ебанулся?! У нас неделя на это максимум!»
В итоге идея пылилась в моей голове до этого декабря (да, забыл запостить, и что вы мне сделаете?). Собрал для успокоения собственной дизайнерской душенки демку. Первая версия была с масками и растровой текстурой, но мне итоговый лук не понравился — поэтому переделал под Metal-шейдер.
А теперь ироничная часть. Пишу я вчера этот текст и вижу новый пост в канале Ильи Пехтерева — про абсолютно такой же шейдер, разве что взаимодействие и продуктовая идея у нас разные. Ну похихикали с ним насчёт «одного мозга на двоих» (интерпретируйте как хотите).
Кстати, нас тут уже 400 человек, спасибо вам за доверие! <3 | 0 |
| 10 | Ко Дню Земли NASA запустили штуку под названием Your Name in Landsat: вбиваешь своё имя, а сервис собирает его из реальных спутниковых снимков. Каждая буква — это какая-нибудь река в Кентукки, ледник в Исландии или соляные пустоши в Питере Намибии, которые с высоты случайно сложились в нужную форму. По клику на букву можно узнать координаты, то есть это не картинки «по мотивам», а конкретные точки на Земле.
Под капотом — архив программы Landsat, который NASA и USGS собирают совместно с 1972 года. Полвека снимков планеты, превращённых в алфавит.
Поигрался, и тут вспомнил, что примерно по такой же логике недавно собрали территориальный бренд Бразильской Амазонии. 9 штатов, 28 миллионов человек, 60% территории страны — всё это жило с разрозненной айдентикой, как федерация фермерских рынков. Embratur (национальный туризм Бразилии) заказал ребрендинг агентству FutureBrand, а точнее их подразделению из Сан-Паулу и ребята сделали ход, от которого сложно отказаться.
Они взяли реальные спутниковые снимки русла Амазонки и её притоков — и построили на этой геометрии кастомный шрифт, Igaratipo. То есть изгибы букв — это буквально форма реки. Логотип — тоже карта, превращённая в знак.
Второй слой, который мне отдельно зашёл: они увели Амазонию от привычного нарратива «горящий лес под угрозой» к образу места, куда можно поехать. Экология никуда не делась, но перестала быть единственным сообщением. Это уже не «пожалейте нас», а «приезжайте к нам» — и для туризма это совсем другая стартовая позиция.
В итоге получилась айдентика, нарисованная самой природой, и нарратив, в котором регион — субъект, а не жертва. Хороший повод задуматься, на чём вообще строится бренд места — и почему всё чаще ответ лежит не в мудборде, а в реальных данных. | 0 |
| 11 | Если вы этим прекрасным утром решили, как любой нормальный человек, первым делом запилить что-нибудь вместе со своим ИИ-агентом, то вот держите пару полезных ссылочек по анимациям для веба.
https://transitions.dev
Якуб Анталик собрал несколько ходовых транзишенов для веб-приложений и оформил их для удобного копипаста в проект. Ресайз карточек, анимированные бейджи, модалки, дропдауны и транзишены.
Что мне понравилось:
• чистый CSS без зависимостей
• переменные --duration и --easing торчат наружу
• prefers-reduced-motion обработан везде (важно для доступности)
• интерактивные превьюхи, как в лучших домах Парижа
___________
https://pixelpoint.io/skills/animate-text/
Текстовые анимации от Pixel Point. Это не библиотека и не сниппеты, а скилл для AI-агента. Подключаешь его одной командой, и дальше просишь агента сделать анимацию текста, он берёт оттуда конкретные спеки по таймингам и кривым. Работает с большинством библиотек— gsap, motion, remotion, waapi.
Сам формат любопытный. Раньше дизайн-комьюнити делилось статьями, ссылками на Фигму и какими-нибудь UI-китами. Теперь у нас новая единица знания — скилл для агента. Это сильно меняет то, как мы можем упаковывать и передавать экспертизу. | 0 |
| 12 | Ребят, пятница же | 0 |
| 13 | Попал к Илье в пятничную подборочку. Подпишитесь на него обязательно, он очень крутой! | 0 |
| 14 | Matn yo'q... | 0 |
| 15 | 🔈 Видосы со звуком 🔈
Дорогой дневничок разработчика, давно не виделись. Я постепенно начал прикручивать звуки в игру, и это оказалось весьма непростой задачкой. Мой уровень познаний в техническом плане саунд-дизайна стремится к нулю, но на уровне ощущений я люблю подгонять звук к визуалу. Кстати, именно на основе моих концептов в Сбербанк Онлайн появились первые звуки и хаптик. Да и вообще, для создания максимально объёмного опыта не забываем использовать 3 канала: визуальный, тактильный и аудиальный. Если когда-нибудь у метро к вам подходила цыганка, а спустя 5 минут вы недосчитались косаря в кармане или часов на руке, то вот это прям «оно».
Для создания звуков я попробовал Eleven Labs. У сервиса 7 тиров подписки, есть бесплатный, на котором каждый месяц получаешь 10 000 токенов. Это прям ощутимый объём. Для примера: 1 луп на 4 секунды жрёт примерно 40 токенов, причём за одну генерацию вы получаете 4 варианта. Единственное ограничение бесплатного тира — права на использование звуков в коммерции.
Основная сложность (как и всегда с нейронками) — в серийности. Чтобы всё звучало убедительно, мне нужно сгенерить, например, «одно семейство» звуков двигателя на разных оборотах, причём они должны быть идеальными лупами, чтобы их можно было ставить на репит и кроссфэйдить между собой. В допустимых пределах ещё можно подрастягивать или ускорять, но тут как с картинками: больше 5–7% — уже палево. В идеале таких семейств ещё и несколько делать, чтобы повторяемость была не так сильно заметна.
И вот сижу я, тестирую звуки, и тут, крипово нависая через плечо (я же в наушниках), моя жена подкидывает мне UX-овую мудрость: «чувак, вообще многие любят в гонках сразу „тапку в пол" на старте, а не нажимать газ по светофору». Тут даже спорить тупо, хорошее UX-овое улучшение. Пошёл и сделал борзую анимацию газа до отсечки, ну и звуков нужных нагенерил тоже (Видос 1). А ещё очень рад, что удалось сделать звук объёмным за счёт эффекта приближающейся камеры (Видос 2).
P.S. Какой-то чувак на линкеде подкидывал идейку про мини-карту. Такая мысль у меня тоже была, прикрутил карту (ностальгия по Д2) с кайфовой анимашкой , не знаю, доживёт ли она до релиза и именно в таком виде, но пока я доволен (Видос 3). | 0 |
