Vladyslav Hryhorenko in DS × AI

Моё первое приложение в App Store

Судоку прошло ревью. Почти месяц ожидания, и вот оно в сторе.

Это судоку с обучением. 19 уроков по техникам решения и подсказки, которые не ставят цифру, а показывают паттерн на доске и объясняют, почему. Без рекламы, без аналитики, без аккаунта. Бесплатная версия — полная игра, премиум — одна покупка навсегда, без подписки.

Теперь оно живёт, и я могу его развивать. Идей много, посмотрим, как пойдёт. С распространением ещё надо разобраться, но это сейчас не главное.

Если знаете кого-то, кто любит судоку, — покажите ему. Буду благодарен.

https://apps.apple.com/app/id6795653595

31

до 45 еще больше времени чем до 20. И это замечательно

Следующее начинание это блог на английском. Желаю себе не забросить его, собрать дома мини студию и выпускать контентик.

Спасибо всем, кто поддерживает меня в моих начинаниях

Сделал ещё один плагин для Figma — [renk · paster]. Массовая вставка текста в слои.

Задача старая как сама Figma: есть список — названия, цены, номера — и есть двадцать текстовых слоёв, куда его надо разложить. Руками это двадцать раз Cmd+V. Начиналось как своя замена Many Paster, а по дороге обросло тем, чего мне в нём не хватало.

Буфер — одна строка, один слой. Скопировал текст из выделенных слоёв или вставил любой список из буфера обмена, выделил целевые слои (можно целые фреймы — плагин сам найдёт текст внутри), нажал Paste. Направление обхода — по строкам или по колонкам, порядок — прямой, обратный, случайный. Если слоёв больше, чем строк, буфер зацикливается. Последние десять буферов лежат в истории.

Вкладка Table появилась из реального запроса. Дизайнер копировал из гугл-таблицы колонку: сверху заголовок, под ним цифры. Нужно было к каждой цифре приклеить заголовок и вставить одной строкой. Теперь плагин понимает буфер обмена Sheets и Excel как таблицу, а строка собирается по шаблону: {1} — значение колонки, {h1} — её заголовок, {Price} — колонка по имени. Для одной колонки с заголовком шаблон подставляется сам — {h1} {1}. Результат уходит в тот же буфер со всеми опциями вставки.

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

Стилистика и цвета как у renk · palette, тёмная тема, окно тянется за угол.

Плагин тут: https://www.figma.com/community/plugin/1669083772655056779

Дошел до того что баги и небольшие доработки попадают в репку ДС примерно за 30 минут.

Настраиваем автобилд ДС, после чего такие фиксы будут прилетать в прод в течении часа.

Кайф же?

Пишите если хотите так же

Если что, раньше это могло занимать месяца, сейчас моего личного времени уходит минут 10-15, отдать задачку, сделать ревью что все нормально работает и не ломается.

активность потому что я видео готовлю, но не обещаю что я его сниму, микрофон меня добьет 😢

DESIGNmd файл и компонентные токены, просто хайп без ценности. Очень сильно юзлесс подходы.

Если собрать криво и руками. Но если собрать правильно, то дизайн мд файл не нужен

Обновил renk · palette — теперь плагин показывает имена переменных до того, как их создаст.

С первой версии тянулась проблема которую я забывал пофиксить, и вот время пришло. Имена рамп собирались неявно: пока хрома одна — токен называется hue-265. Добавил вторую (а их можно сколько угодно — vivid, muted, кто вам запретит) — и все рампы молча становятся hue-265-vivid. А фигма матчит переменные строго по имени. Итог — вместо обновления коллекции получаешь полный дубль. Классика: инструмент что-то решил за тебя и не сказал.

Что поменялось.

Рампам можно давать свои имена — blue вместо hue-265. Ключевые цвета продолжают попадать куда надо.

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

И главное — панель Naming & Figma match. Паттерн имени, все итоговые группы и живой дифф с выбранной коллекцией: зелёное обновится на месте, синее создастся новым, желтое совпало частично. Отдельно подсвечены группы, которые в коллекции уже есть, но не совпадут — их видно до того, как наплодились дубли.

Апдейт мелкий но должен лучше показывать что именно произойдёт когда ты нажмешь обновить.

Я надеюсь вы пользуетесь. Если да, какие еще у вас проблемы возникают?

Плагин тут:
https://www.figma.com/community/plugin/1645914413045494772

Переезд на новый макбук

Мне выдали рабочий макбук, и я переносил на него всё со своего мака. А накопилось, если что, много.

И вот когда я настраивал клод на новом компе и сворачивал его на старом, в какой-то момент стало даже немножечко грустно. Он мне так помогал, мы столько всего вместе сделали — а теперь я его тут вырубаю. Да, все данные переедут на новое устройство, но всё равно словил ощущение расставания.

Кринж? Возможно. Но с этим типом мы много всего сделали рабочего.

Вот, собственно, что мы с ним собрали (то, о чём писал раньше):

— Мастер-компонент в фигме превращается в рабочий компонент в вашем проде минут за 20 в среднем.

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

— Артефакты — это задачи на вашей доске, которые сами создаются и делаются. С вас только ревью готовых рабочих артефактов.

Это то, куда сейчас смещается моя работа: меньше собирать руками, больше ревьюить.

Осталось пофиксить входящие макеты, там пока больно. Но путь от «нам нужен такой компонент» до готового компонента сильно сократился.

А какой у вас компонентный процесс?

Kasper

1 июля Каспи презентовал Kasper — ИИ-ассистента в Каспи Магазине. Меня позвали на ивент, как сотрудника который участвовал в работе над ним, и это тот случай, когда видишь на большой сцене то, что до этого месяцами собирал руками. Хочу поделиться, что такое Kasper со стороны дизайн-системы.

Kasper стилистически сильно отличается от Каспи: другой шрифт, другие шейпы, другие цвета. Рисовать под него отдельный кит — крайне глупо, хоть это и первое что приходит на ум. А давайте сделаем еще один репозиторий, у нас их всего 2 и будем так делать каждый раз, и руками правки вносить во все файлы с токенами. Было понятно, что максимум надо сделать через токены, причем единые для всех кейсов. Проблема: есть легаси, и это легаси нужно расширить чтобы оно хорошо приняло новые цветовые темы, типографические и темы для форм объектов.

Что делал я:

— архитектура тем и контроллер тем — собрать
вложенные токены в единую структуру так, чтобы то что уже сейчас работает, работало и дальше.

— пересобрал внутренности цвета и подключил extended collections от Фигмы — они и закрыли вопрос «перекрасить всё»

— коллекции шейпов: режимы, в которых скругления всего интерфейса переключаются одной темой

— тема шрифтов, чтобы типографика менялась так же быстро ну и внутрь заложить динамик тайп, чтобы в фигме проверять доступность через темы.

Кейс примечателен ещё и тем, что интерфейс комбинированный. Внутри Kasper живёт полноценная Каспи-тема — например, в карточках товаров. Плюс нативные и веб-технологии на соседних экранах. То есть темы должны не просто существовать, а сосуществовать.

Моя зона как дизайнера дизайн-систем — архитектура, упаковка и передача токенов разработке. Команде разработки отдельное спасибо: решение непростое, и они его дотащили. Главный итог даже не Kasper, а фундамент — следующие темы мы будем поднимать сильно быстрее. А учитывая, что я работаю в супераппе, вероятность этого довольно большая.

А после презентации удалось лично встретиться с Михаилом Ломтадзе. Не ожидал — и был очень рад впервые увидеть его вживую. И совсем не ожидал встретить Майкла Калви: пересмотрел кучу интервью с ним, а тут он стоит рядом. Тоже был рад увидеть лично.

Горжусь, что я часть этой команды.

Обновил renk · palette — теперь он строит не только примитивы, но и слой семантики поверх них.

Примитивы — это ещё не дизайн-система. Матрица из двухсот ровных оттенков сама по себе ничего не значит, пока сверху не лёг слой смысла: какой цвет — это «фон», какой — «основной текст», какой — «опасное действие». Этот слой обычно собирают руками: заводят токен, привязывают к нужному примитиву, повторяют для светлой и тёмной темы. Десятки токенов в двух темах вручную. А при смене бренда всё это перетыкать заново.

Теперь это делает плагин. Новая вкладка Semantic генерит слой токенов, которые ссылаются на твои примитивы.

Токены по понятной модели — {domain}/{layer}/{category}/{intensity}/{state}, отдельно для интерфейса, графиков и продуктовых акцентов. Не плоская свалка, а структура, в которой видно, что за что отвечает.

Категория задаёт цвет, интенсивность — акцент. neutral, brand, success, warning, negative, system — а внутри каждой тона разложены ровно по рампе, с настройкой диапазона и кривой. Тот же принцип ровных шагов, что и в примитивах, только теперь на уровне смысла.

Светлая и тёмная тема сразу. Каждый токен алиасится на примитив в каждом режиме — тему не нужно собирать вторым проходом. (На free-плане Figma — один режим.)

Не хочешь думать с нуля — есть пресеты Minimal / Standard / Full. Хочешь по-своему — категории, слои, интенсивности и состояния редактируются руками.

Видно результат до создания. Живой превью обоих режимов; если для токена не нашлось примитива — подставится сырой цвет, перепривяжешь потом.

И та же одна кнопка — всё это Figma Variables. Новая коллекция или обновление существующей на месте, без дублей.

В итоге из одного плагина теперь собирается весь костяк: примитивы на OKLCH → семантика с тёмной темой сверху. То, на что у меня раньше уходило шесть файлов и ручное обновление.

Если тема близка — у меня есть курс по токенам цвета, как раз про то, как этот слой устроен.

Зырьте чо (мопед не мой, я на другом этаже сижу)
https://spb.hh.ru/vacancy/133786927
#вакансия

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

База данных дизайн-системы.

Помните парсер, которым я вытащил все компоненты из фигмы через Rest API? Вот во что он вырос. Component Collector — единая база данных компонентов из фигмы, на которой сейчас держатся почти все мои DS-проекты.

Мастер остаётся в фигме, она — источник правды. Но фигма хранит компоненты для людей, а не для машин. Коллектор превращает их в данные: каждое опубликованное изменение библиотеки попадает в базу. С версионированием — что добавили, что переименовали, у каких компонентов поехал визуал, вплоть до пиксельного сравнения превью.

Главное в базе — JSON-контракт на каждый компонент и каждый вариант. Пропы, варианты, токены, вложенность, превью. Это формат, который агент берёт и делает что угодно:

— аналитика по пропсам: как названы, какие есть, где разнобой;
— Code Connect, настроенный скриптом, а не руками — в JSON уже лежит всё, что для этого нужно; или натравливаешь локального агента, и он проходит покомпонентно;
— JSON-импорт обратно в фигму, где экраны собираются прямо из контрактов.

Один раз описал — дальше переиспользуешь под любую задачу.

И отдельный бонус — весь каталог как на ладони. 118 компонентов — видно целиком: кто кого содержит, что переиспользуется постоянно, а что лежит мёртвым грузом. Граф вложенности рисуется прямо в интерфейсе.

Без этого у тебя есть только фигма и медленный MCP, который надо дёргать на каждый вопрос — и он отвечает тяжёлыми простынями. С этим вся система лежит локально и отвечает мгновенно. Разница примерно как между «спросить» и «знать».

Фигма остаётся местом, где дизайнят. Но источником правды для машин становится база.

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

Сделал визуализацию: как компоненты связаны между собой и как перетекают друг в друга.

Интересно, что это и откуда?

Сделал плагин для Figma — генератор цветовых палитр. Называется renk · palette.

Палитру обычно подбирают руками: взяли основной цвет, накрутили рядом оттенков посветлее и потемнее — вроде ровно. А потом жёлтый-500 оказывается светлее синего-500, тёмный жёлтый уходит в оливковый, серые гуляют по теплоте. И в файле постепенно заводится двадцать оттенков синего.

Плагин строит палитру как матрицу: оттенки × светлота × насыщенность. Внутри OKLCH, поэтому рампы выровнены по восприятию — 500-й тон любого цвета ощущается одинаково тёмным.

Брендовые цвета сетку не ломают. Кидаешь свои хексы, можно сразу списком — плагин сам находит каждому место в матрице и помечает как ключевой.

Нейтральные рампы — с тёплым или холодным подтоном, сколько нужно. Плюс альфа-рампы белого и чёрного. То, что обычно собирается руками. (добавил после первой публикации пока на ревью оттенки нейтралей)

Дальше одна кнопка — и всё это Figma Variables. Запустил второй раз — переменные обновились на месте, без дублей и битых ссылок в макетах.

Для въедливых есть тонкая настройка. Bias светлоты на каждый оттенок — чтобы жёлтый оставался жёлтым даже в тёмных тонах, а не превращался в коричневый. Несколько уровней насыщенности. Свои имена слотов.

Палитра — фундамент дизайн-системы. Когда она построена по правилам, а не по вкусу, всё остальное — токены, темы, доступность — становится сильно проще.

Если тема близка — у меня есть курс по токенам цвета на ютубе, там про всё это подробнее.

Ищу работу

Выхожу на рынок, откликаюсь, собираю портфолио.

Больше всего мне страшно столкнуться не с отказами, а с равнодушием. С тишиной, с обесцениванием опыта. Поэтому решил делиться процессом тут в виде небольшого сериала.

Юля сказала, что будет интересно будет наблюдать как «большой дизайнер выходит на рынок». Хотя я себя не считаю себя большим. Однако у меня есть опыт, тревога и есть аудитория — то есть вы. И есть гипотеза, что вам будет полезно за этим понаблюдать, а мне будет проще пройти это не в одиночку.

Покажу как собрал резюме, как выбираю и пишу кейсы, делаю версии портфолио, откликаюсь, сомневаюсь, переписываю всё по новой и прокрастинирую.

А вдруг это кому-то поможет и в своём найме.

Если вам интересно наблюдать за таким процессом — поставьте эмодзи любую

П.С. Буду безумно благодарен за рефералки и рекомендации!
Резюме | Презентация

С Антоном знакомы больше 4х лет. Я занимался в комьюнити где Антон менторил еще в 2022 (DL pro). Но в 2022 это я туда попал, думаю менторил он раньше)

Вдруг кто-то тут дизайнера ищет, обратите внимание пожалуйста 🙏

Автоматическая поставка компонентов.

Сейчас настраиваю в DS автоматическую поставку компонентов. Агенты, которые хорошо делают компоненты в нашем контексте, у нас уже есть — я с их помощью закинул довольно сложные штуки в ДСку с нуля, они уже на проде.

Первым было изображение — база, которой не было. Со стейтами загрузки и пустым состоянием.

После — инпут-слайдер: два поля ввода и слайдер с одной или двумя точками. С логикой анимаций и высчитыванием значений.

Дальше пачка: инпут-тайм, инпут-дата, календарь с респонсивом, попап, комбобокс. Часть с нуля, часть рефактор. Кучу API поправлено. Инпут рефакторил, чтобы визуально нигде не сломался. Это не считая микро-коммитов по стилям и отступам.

Довольно много получается всё-таки. Я думал, меньше свои руки вкладываю.

Хочу завернуть это в автоматический процесс. Дизайнер DS открывает тестовую ветку Storybook по PR, видит, что агент изменил, и сверяет — действительно ли эти изменения нужны. Пайплайн сборки превью на PR в репозитории уже настроен.

Техническую реализацию которая не влияет на дизайн оставляем на разработчиков, потому что мы как дизанеры все же отвечаем за визуал и за UI, иногда за поведение но не за вариант технической реализации и инструменты.

Понимание есть. Ограничивает инфра — серваки выбивать тяжело, доступы к CI/CD не сразу дают. Но это мелочи. Решаемо.

Качаем софты.

Сложно описать словами, чем я сейчас занимаюсь. Однажды доделаю — и смогу. А пока хочу написать про софты.

Уверен, многие не поймут, о чём я. Я бы не понял. В начале пути думал лишь об одном: как бы скорее найти работу и начать делать. Вот дадут — а я точно сделаю. И да, когда давали — делал. Но найти тех, кто бы доверился, было не так просто. Вот это и есть проблема софт-скиллов.

Если пробовать описать, это твой облик в общем. Как ты ощущаешься в обществе, приятно ли с тобой взаимодействовать. Стоит присмотреться к тому, кто ходит в офисы — как они выглядят и ведут себя. Мы все разные, и каждый зацепится за свои детали. Не скопировать, а найти себя.

У меня было много ситуаций, в которых я рвался к задаче. Считал, что она срочная, что клиент очень ждёт. Из-за этого опускал процесс выстраивания доверия и упускал работу. Иногда ловлю себя на том же и сейчас.

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

Есть и другой вариант, он сложнее.

Можно круто и быстро делать то, что вы делаете. Например, дизайн. Если вы сильны в хардах и это видно — может сработать. У вас будет много фактуры, от которой уже можно вести диалог. И постепенно — качать софты. Потому что в большой компании растёшь через продажу: демонстрацию того, что и как ты делаешь.

Поэтому — качаем софты.