Дизайн-системы

Статус.Хочется чего то вкинуть из рабочего.Сейчас решаю одну задачку интересную. Как из ТЗ для дизайнера получить готовый к продакшену код фронтенда. И я уже достаточно близок. Многие шероховатости стираются. Из фигмы в код уже получается практически без использования ИИ, на небольших шагах помогает только, там где есть проблемы с написанием скрипта прямого. Тут я отстроил пайплайн и показал демо после чего передал разработчикам наработки и архитектуру. Обучил по сути своему подходу работы с агентами.Компоненты как и писал выше уже можно править прям в проде. Цикл работы над компонентом сильно изменился. Сейчас примерно так получается. Делаю набросок компонента в фигме, собираю из него компонент в коде потом проверяю как все работает, по необходимости дорабатываю в коде сразу. После чего доработки через ИИ переношу в фигму и расширяю документацию тоже через ИИ. Все в чате. Так как каждый шаг записан в скил, ошибок почти не возникает в процессе + покрытие тестами + покрытие элементами доступности + нормально оформленные стори. Я очень хочу на каком то этапе заземлиться и оценить все с высока. Но пока я все еще вижу финальную цель, и она довольно близко. Давно думал о том что дизайнер должен отвечать за дизайн в продакшене, а не в фигме, кажется это время близко. На скрине один из проектов в работе который я попросил раскидать на холсте и проставить связи. Да, это холст который я навайбкодил для проекта который я вайбкодил чтобы не переносить все в фигму а отдельно оценить что там по экранам с высока. Каждую неделю мой шок в шоке от того что уже можно делать. И я понимаю что таких как я много и инструментов появляется еще больше под любые задачи. Консультации тут

Figma Slots for Repeating ItemsБудет полезно если раньше не знали что это такое, слоты. В целом базово правильные подходы описываетМатериал обсуждает внедрение новых нативных слотов в Figma для упрощения работы с повторяющимися элементами в дизайн-системах. Автор подчеркивает, что использование слотов позволяет избежать сложных обходных путей и улучшает компоновку компонентов, делая их более удобными для пользователей. Статья будет полезна командам, работающим с дизайн-системами, которые стремятся оптимизировать свои процессы и повысить эффективность работы с компонентами.— Новые нативные слоты в Figma позволяют более эффективно управлять повторяющимися элементами в дизайн-системах, улучшая компоновку компонентов.— Ранее существующие подходы, такие как использование скрытых слоев и свойств 'count', создавали сложности и ухудшали производительность файлов.— Использование слотов упрощает архитектуру компонентов, позволяя четко определять типы и ограничения настраиваемых дочерних элементов.— При добавлении слотов важно учитывать детали, такие как наименование свойств и слоев, а также минимальное и максимальное количество элементов.— Слоты в Figma открыты для любых дочерних элементов, что требует от систем внедрения методов проверки дизайна и кода.— Оптимальное количество элементов по умолчанию для слотов составляет три, что позволяет лучше различать выбранные элементы в компонентах.Оригинал

Ep 94: Tech DependenciesВ подкасте обсуждаются зависимости в дизайне систем, включая использование существующих библиотек и фреймворков, таких как Material и Shad Sien. Участники делятся мнениями о том, как эти зависимости влияют на разработку и эволюцию дизайна систем, а также о том, как важно осознанно подходить к выбору инструментов и библиотек. Материал будет полезен дизайнерам и разработчикам, работающим с дизайном систем и стремящимся понять плюсы и минусы использования зависимостей.— Зависимости в дизайне систем могут значительно влиять на их развитие и эволюцию.— Использование существующих библиотек, таких как Material и Shad Sien, может ускорить процесс разработки, но также накладывает ограничения.— Важно осознанно подходить к выбору зависимостей, понимая, что каждая библиотека может иметь свои плюсы и минусы.— Дизайнеры часто не осознают, сколько дополнительных библиотек они выбирают, когда устанавливают одну библиотеку.— Создание собственного дизайна системы с нуля может быть более предпочтительным, если это возможно, чтобы избежать избыточных зависимостей.— Понимание того, как фреймворки и библиотеки обновляются, важно для долгосрочной устойчивости дизайна системы.— Использование стандартов, таких как CSS, может обеспечить большую гибкость и устойчивость в будущем.— Темы и стили могут быть адаптированы для работы с различными фреймворками, что позволяет создавать более универсальные решения.Оригинал

Новости из подкастов и статейЗакончил работу над парсером, которого делал для себя — чтобы быть в курсе новостей, но не перечитывать всё подряд.Он работает не только со статьями, но и с подкастами и роликами на YouTube по теме дизайн-систем и ИИ.В текущем виде он меня устраивает. Хотел сделать его полностью бесплатным, но пока не вышло — посмотрим, во сколько в итоге обойдётся такой поток контента. Сегодня закину первый тестовый пост, дальше месяц постараюсь публиковать стабильно — поглядим, как пойдёт и какое будет качество. Сам тоже хочу следить за темой, но времени на всё не хватает.В последнее время очень загружен, и, если честно, этому рад. Помню, когда искал работу, было хуже — так что нагрузка это хорошо.Что получается — закину в следующий пост.

Все очень быстро меняется.Я тут идеи свои в жизнь воплощаю так сказать. И настолько инетерсно делать это сейчас, что нет времени рассказывать об этом ни в видео ни в постах. Но на консультациях я вас иногда жду, если сможете время поймать. ТыкПарсер делаю, пока источников не так много, для того формата который я хотел и не хватает даже на недельную подборку, к ней возвращаюсь иногда. Самое важное и крутое что сейчас в работе.Я уже сделал плагин для выгрузки всех токенов и принта этих токенов в фигму в зависимости от формата.Цвета печатаются прям сразу с настроенными модами и токенами, типографика с токеном типографики, отступы и размеры в виде превьюшек прямоугольников и вот это вот все. Но это уже скучно.Дальше я решил сделать парсер всей фигмы, о нем выше рассказывал. Теперь у меня локальная копия всех компонентов под рукой и агенту очень кайфово с ней работать (MCP очень тяжелые ответы дает) а у меня список всех компонентов по именам и легко можно выявлять детачи точнее чем было раньше.После чего я решил сделать систему создания компонентов. Она из мастера в фигме делает код и оформляет сторибук, плюс к этому, не так давно я научил ее доработать код после чего пойти и доделать в фигме то чего не хватает там и доку поправить, чтоб все окей было.Одновременно с этим пришли разработчики и сказали что хотели бы из фигмы в код макеты гонять побыстрее, вот это сейчас тоже строим, чтобы верстка макетов быстрее была. Сошлись звезды и я подумал что было бы круто дизайнерам прод актуальный в начале работы над задачей стаскивать. И не так что наскринить а вот прям прод собрать в фигме, чтоб актуальный был. Там ведь можно моки любые накидать и прям кейсы разные собрать в фигме. Тоже делаем.Ну и базу разную тоже делаем конечно. Анализ UX задач и верстка в фигме, тут пока сложно.На скилах, агентах, команда, со скриптами к ним в помощь, там где можно без ИИ что то сделать в процессе. В общем полный набор. И вот как об этом обо всем рассказывать, пока не могу понять. Потому что м

У меня появилась идея, очередного пет проектаЯ знаю довольно много крутых спецов по дскам, но все они пишут в таком же формате плюс минус. Нет вот этой единой линии рассказа и т.д. просто раз в сезон вылетает большая статья и она может быть немного оторвана от целевой направленности. Так вот.Попробуем в первом видео сделать парсер который все эти данные будет собирать и анализировать и выводить саммари. Будет лайв вайбкодинг где все сломается и ничего не запуститься по классике и я буду это фиксить всю ночь 😁Парсеры я еще не делал, часть из них в виде ютуб видео, часть в виде подкастов, аудио, часть статей. Может быть интересно и мне и вам.Вчера вспомнил что мне однажды сильно помог подкаст OVER-THE-SHOULDER (https://www.youtube.com/@sergey_andronov)Было бы круто его сделать на тему вайбкода и современного дизайна Вайб появился немного контента поделать, верим что он останется

Что по видео?Сейчас я активно внедряю ИИ в дизайн-систему, и всё крутится на каких-то бешеных скоростях. Информация устаревает за неделю, мгновенно обрастает новыми вводными, или вдруг появляется новый флоу, который просто убивает все предыдущие процессы. Изменений сейчас очень много, и происходят они молниеносно.Да, на текущей работе большинства это пока сильно не сказывается. Но это лишь потому, что новые флоу только обкатываются, а оптимальный процесс ищется методом перебора. Когда начнется затишье — все успокоятся и сядут писать методологии. Ну а пока мы просто вертимся в потоке данных, половина из которых в итоге может вообще не пригодиться.И всё же, я очень рад, что в это сумасшедшее время нахожусь ровно там, где и хочу быть.А видео — они обязательно будут. Но только когда буря немного уляжется и появится что-то объективное, о чем можно будет предметно рассказать.Либо... может, стоит придумать лайв-формат? Просто разговорные видео о том, что прямо сейчас варится в мире дизайн-систем. Что думаете?

Тестить нейронку на создание апки с одного запроса — максимально сомнительная идея.Удивляет, что дизайнеры почему-то идут туда же, как будто вообще не понимают собственный рабочий процесс. У всех в голове сидит иллюзия: напишу два слова, и всё будет готово.А ничего, что перед тем как получить что-то с визуалом, идет огромный пласт работы, связанный с UX? Продумывание каждого экрана, логика размещения, контент, понимание того, какой функционал оставить на странице, а какой — унести глубже. Люди просто кидают запрос «сделай красиво» и реально думают, что это так работает.На деле, если разложить процесс создания дизайна на этапы и изолировать контекст модели для каждого из них, на выходе получаются очень внятные макеты. Я уже делаю UX через нейронки, они отлично проходят утверждение с заказчиками, и все довольны.Потом эти макеты можно вытащить в Фигму через их новый MCP — и у тебя на руках готовый прототип, поверх которого можно рисовать. А можно продолжать итерировать дизайн через ИИ для каждого блока в отдельности (о ужас, точно так же, как мы это делаем в классическом дизайне: блок за блоком, элемент за элементом, подгоняя предыдущие, если новый на них влияет).

Фигма-апдейтыFigma продолжает расширять AI-возможности (MCP), подвезли много новых фич. В их числе — генерация компонентов из кода прямо в Figma и генерация дизайна с использованием ваших компонентов, много инструментов из комьюнити прям в официальном MCPТолько недавно обсуждали, что скоро запустится обратный процесс — когда мы будем тащить элементы из кода в дизайн, — и вот его уже выкатили.Хочется немного поразмыслить о будущем профессии. Кажется, ничего критичного с ней не случится, хотя количество вакансий будет постепенно уменьшаться. Но, по сути, профессия — это не инструменты. Продуктовому дизайнеру станет проще итерировать, дизайнеру ДС — проще заносить всё это в библиотеку и код, а разработчику — быстрее собирать готовый дизайн.Да, в теории всё это может сделать один человек, но это неэффективно из-за постоянного переключения контекста. Продуктивнее, когда каждый сфокусирован на своей области.В рамках JTBD это, по сути, «убийство» налоговых работ (рутины, которую мы вынуждены делать ради целевого действия). Задача продуктового дизайнера — не макет в Figma; его идея может быть хоть на салфетке. А задача дизайнера ДС — не жонглировать вариантами компонентов, а договариваться со всеми участниками процесса, чтобы системой было удобно пользоваться и дизайнерам, и разработчикам.На мой взгляд, огромное количество налоговых работ умирает каждый день. Скоро можно будет заниматься только тем, что действительно важно. Или уходить в соло и пилить свой проект.

$10 000Хочется немного поговорить о деньгах.10к (в месяц естественно)— это та сумма, к которой я хочу прийти в ближайшие 2–3 года. Чистыми в валюте. По подсчетам, этой суммы должно хватать на комфортную жизнь практически везде.Это количество денег, которое мне сейчас кажется адекватным на семью из трех человек, возможно, с питомцем. В эту сумму входит всё: комфортное проживание и питание, садики, кружки, игрушки, медицина, одежда, развлечения, путешествия, периодическое обновление техники и возможность немного откладывать на будущее. Цифра взята из опыта жизни в РФ, Испании, где у нас с женой родился ребенок, и Казахстане, где мы живем сейчас. Может показаться странным, но жизнь везде «стоит» примерно одинаково: где-то квартиры дешевле, а где-то дороже, но в сумме выходит одно и то же. А вот качество жизни за те же деньги везде отличается. Для моей семьи это и есть «база» — фундамент, без которого сложно двигаться дальше.На текущем этапе мне все еще не хватает до этой планки. И вместо того чтобы переживать о профессиональных задачах, я занимаюсь ерундой. Вместо того чтобы думать о приятном: как интересно провести выходные, куда еще можно сходить, как использовать грядущие праздники, чтобы куда-нибудь съездить, или наконец покрутить интересную идею на работе — приходится решать, когда мы купим корм собаке или порошок. И когда мы вообще сможем позволить себе сходить к врачу.Очень хочется посмотреть, на что я буду способен, когда этот «калькулятор» в голове наконец-то выключится.Поэтому я и пришел к цифре в $10 000. Этой суммы не хватит, чтобы жить «красиво», но точно хватит, чтобы обеспечивать себя сейчас и откладывать на будущее. К этой цели я планирую прийти в ближайшие 2–3 года.Уверен, что когда у меня будет 10к, проблемы не исчезнут — просто поменяются вещи, которые беспокоят. А вы думали о своей «сумме спокойствия», при которой вам стало бы проще? Когда-то для меня это было 100 000 рублей.