AI и большая дизайн-система

Знакомая боль: просишь агента собрать экран по твоей ДС. На первый взгляд всё аккуратно. Потом смотришь ближе: компонент не из библиотеки, цвет левый, отступы странные, состояние придумано на ходу. И уже проще руками пересобрать, чем чинить за ним. С маленькой библиотекой это ещё можно пережить. В большой ДС начинается цирк: сотни компонентов, варианты, токены, состояния, правила. Команда годами всё это собирала, а агент ведёт себя так, будто открыл первый попавшийся файл и начал импровизировать. Без подготовки он просто угадывает. Ему нужно нормально объяснить систему: где компоненты, какие состояния существуют, какие правила важны, что брать в первую очередь. Иначе зрелая дизайн-система превращается для AI в красивую папку, которую он почти не понимает. 😇 24 июня в 18:00 мск Даниил Шишко из Pixel Perfect покажет, как это настроить. Возьмёт одну из самых больших публичных дизайн-систем, подключит её к агенту и соберёт экраны прямо на эфире. Тем, кто будет онлайн, Даниил отдаст скилл, который сканирует дизайн-систему и готовит её к работе с агентом. То есть можно будет взять свою ДС и повторить у себя. Если у вас агент тоже каждый раз «немного дизайнер» и тащит в макет свои компоненты, я бы посмотрел. AI-навыки уже всё чаще всплывают в вакансиях, и лучше разобраться с этим сейчас, пока все ещё пытаются понять, как оно вообще должно работать. 🔠 Эфир в канале 🔠 Эфир в канале

Нажми Shift + M, чтобы измерять отступы. Так проще настроить высоту строки и размеры авто-лейаута.

Фигма 28 мая выкатила важный апдейт Make: теперь инструмент можно подключить к локальной кодовой базе. Открываешь существующий проект, выбираешь элемент на экране, правишь свойства, отступы, цвет, размер, раскладку, а агент уже находит нужное место в коде и вносит изменения. Пока это ограниченная бета в десктопном приложении для Mac. И сама Фигма честно пишет, что лучше всего это подойдёт дизайнерам, у которых уже есть доступ к кодовой базе компании. Раньше вайбкодинг в дизайне чаще был про быстрый черновик. Собрал экран, показал идею, выбросил половину, что-то утащил в работу. Вроде полезно, но всё равно чуть отдельно от настоящего продукта. А теперь Фигма Make пытается работать с тем местом, где продукт уже живёт. Самый важный вопрос теперь: кто имеет право двигать кнопку, если эта кнопка уже в коде? Потому что визуальная правка реального интерфейса звучит очень соблазнительно. Увидел, что отступ кривой, выбрал блок, поправил. Текст не тот, поменял. Цвет уехал, вернул. Не надо писать разработчику «можешь тут 8 пикселей вместо 12», ждать, объяснять, показывать скрин, потом снова смотреть, что получилось. Но чем ближе дизайнер подходит к коду, тем быстрее появляются взрослые вопросы: 1. кто проверяет такие изменения 2. что считается безопасной правкой 3. где начинается логика, а где просто внешний вид 4. кто отвечает, если агент поменял не тот компонент 5. как откатиться, если всё поехало Фигма это понимает, поэтому делает не «пуш в прод», а нормальный путь через разработку. Изменения сначала лежат как локальные коммиты. Можно создавать ветки, смотреть историю, откатываться, а потом открыть пулл-реквест, чтобы инженеры проверили правку как обычное изменение в коде. И это, по-моему, правильная часть новости. Не сам факт, что дизайнер может подвигать блок в живом проекте. А то, что Фигма пытается встроить это в нормальный процесс разработки. Через ветки, коммиты, проверку и возможность отката. Потому что без этого будет весело примерно два дня. Потом кто-то визуально поправит карточку, агент заденет общий компонент, уедет ещё десять экранов, разработчик откроет код и спросит, кто вообще это сделал. Но я бы не хотел, чтобы это стало режимом «дизайнеры теперь сами чинят фронт». Скорее это должно быть как быстрый слой для понятных UI-правок. Поправить отступ. Проверить состояние. Подкинуть вариант. Открыть пулл-реквест. Дальше уже обычная проверка. Ещё важная штука: Фигма разрешает копировать экраны из Make обратно на холст как слои, обсуждать с командой и потом приносить решения назад в код. Это уже похоже на нормальный круг: продукт живёт в коде, команда думает на холсте, изменения возвращаются через понятный процесс. Если Фигма сможет удержать этот круг без бардака, будет сильно. Потому что дизайнеру часто не нужен ещё один генератор красивого прототипа. А вот дизайн-ревью проводить и за качеством прода следить гуд, ибо разработчики лажают оч часто. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

С AI в разработке почти у всех один и тот же цикл. В первой сессии он быстро собирает красивый экран, во второй начинает придумывать новые токены, в третьей путает отступы, а к десятой у вас уже ощущение, что продукт собирали три разные команды. Проблема не в том, что модель «плохая», а в том, что она не читает дизайн-систему так, как читает ее человек. В статье предлагают довольно практичный подход: сделать дизайн-систему понятной для LLM через спецификации, закрытый слой токенов, обязательный аудит и инструкции для каждой новой AI-сессии. То есть не надеяться, что модель сама догадается, какой у вас синий, какой радиус у кнопки и как должен собираться layout, а дать ей это в явном виде. На примере с Atlassian после такого подхода убрали 418 хардкодных значений из 28 файлов и свели их к системе токенов и спецификаций. Внутри: – Почему LLM не мыслят дизайн-системами и постоянно начинают с нуля; – Как из-за этого в прототипах копятся сотни мелких визуальных расхождений; – Зачем проекту нужны spec-файлы, которые модель читает в каждой сессии; – Почему закрытый слой токенов лучше, чем «разумные» догадки модели; – Как аудит ловит хардкодные цвета, отступы и другие нарушения до коммита; – Зачем связывать AI-инструкции, токены и CI в одну систему; – Как устроена структура спецификаций: foundations, tokens, components, patterns; – Почему такой подход особенно важен для больших прототипов и длинных AI-итераций. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

В журнале Tilda Education появилась новая рубрика «Вопрос-ответ». Теперь вы можете не только изучать образовательные материалы, но и задавать интересующие вас вопросы экспертам. Как это работает: вы задаёте вопрос, а мы передаём его специалисту, который разбирается именно в вашей теме. Получаем ответ и публикуем его в рубрике: https://tilda.education/questions 🚩 Небольшое уточнение: Вы можете задавать вопросы на темы: веб-сайтов, дизайна, маркетинга, фриланса и предпринимательства. Если у вас есть технический вопрос — лучше сразу обратиться в поддержку. ✅«Почему другим дизайнерам платят больше», «Какую стратегию продаж выбрать», «Стоит ли нанимать маркетолога» ⛔️ «Что делать, если не работает сайт», «Как настроить отступы в этом блоке», «Что делать, если я не могу зайти в личный кабинет»

Пока в проекте живут цвета вроде #0055FF и отступы, прописанные руками, все кажется нормальным ровно до первого большого изменения. Потом начинается боль: что где используется, что можно трогать, как менять тему, почему один и тот же цвет называется тремя разными способами. В этот момент токены перестают быть «темой для системщиков» и становятся базовой гигиеной продукта. Дима очень хорошо раскладывает это через три слоя: примитивы, семантику и компонентные токены. Самое полезное здесь не теория, а логика: семантика отвечает на вопрос «зачем», компонентный слой на вопрос «где», а правильный нейминг делает систему понятной и для дизайнеров, и для разработчиков. Плюс есть нормальный блок про темную тему, deprecated-токены и версионирование, то есть не только про создание, но и про жизнь системы после запуска. Внутри: – Как устроена трехслойная архитектура токенов и зачем нужен каждый слой; – Чем семантические токены отличаются от компонентных; – Как собирать нейминг от общего к частному, чтобы не путаться потом; – Какие категории и свойства чаще всего используются в системе токенов; – Почему состояние default обычно не нужно писать явно; – Как токены помогают нормально поддерживать светлую и темную темы; – Что делать с устаревшими токенами, чтобы не ломать прод; – Почему без токенов любая масштабируемость быстро превращается в технический долг. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

На макете всё почти всегда выглядит хорошо. Проблемы начинаются уже в реализации: экран открылся не той анимацией, скелетон мигнул, чекбокс нажимается только в крошечной зоне, тень обрезалась, текст поехал, в темной теме картинка стала чужой. По отдельности это мелочи. Вместе именно они создают ощущение сырого продукта. В этом гайде ребята из Т-Банка хорошо разложили, как смотреть на дизайн-ревью системно, а не просто сверять экран с макетом. Не только статичное состояние, но и весь опыт целиком: переходы, загрузка, скролл, нажатия, выходы с экрана, типографика, иконки, поведение в светлой и темной теме. Внутри: – Как проверять переход к экрану и не путать типы презентации; – На что смотреть в загрузке: лоадеры, скелетоны и смену состояний; – Почему скролл и нажатия часто ломают впечатление от готовой фичи; – Какие жесты выхода должны работать по умолчанию; – Как сравнивать реализованный экран с макетом через скриншоты в Figma; – Что проверять в отступах, размерах, скруглениях и тенях; – Какие ошибки чаще всего всплывают в цветах и темной теме; – Почему типографика и редполитика тоже часть дизайн-ревью; – Что важно проверить в иконках, графике и видео до релиза. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

По отдельности вкладки работали нормально, но вместе интерфейс разваливался на детали: разные заголовки, слабая иерархия текста, неровные отступы. Критичной ошибки нет, но ощущение цельного продукта теряется именно так. Лиа Ли и Локеш Фулфагар показали, как команда перешла от разрозненных экранов к единой системе. Сначала сделали короткий спринт с четырьмя крайними направлениями, потом собрали рабочий баланс между целостностью и задачей конкретной вкладки. Результат уже вышел на iOS, Android в процессе. Внутри: – Какие четыре направления тестировали на старте: Punchy, Soft, Modular, Flat; – Почему единый стиль без функции может ухудшать восприятие; – Как они балансировали простоту интерфейса и ясность сценария; – Как собрали систему заголовков по уровням важности вкладок; – Как пересобрали типографику в минимальный, но управляемый набор стилей; – Почему убрали лишние контейнеры и сделали ставку на осознанные отступы; – Как внедрили совместный QA с разработкой и проверку через дизайн-оверлеи; – Какие продуктовые результаты получили после релиза на iOS. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Команды редко тормозят на этапе рисования экранов. Обычно проблема в другом: нужно быстро проверить идею, а потом не разгребать хаос. Сделали экран в Фигме, ушли в AI-инструмент, получили прототип, вернулись и начали менять случайные кнопки и отступы на свои. Полдня ушло. Ромина Кавчич хорошо объясняет, почему так происходит. Проблема не в AI, а в потере контекста. Figma Make дает результат, когда работает внутри вашего файла с дизайн-системой: компонентами, вариантами, переменными и правилами нейминга. Плюс можно подтянуть требования и контент из Notion, GitHub, Jira и других источников, чтобы прототип собирался не по догадкам. Внутри: – Почему без подключенной библиотеки Figma Make почти всегда генерирует общий и нерелевантный UI; – Что нужно сделать перед первым промптом: включить библиотеки, выписать точные имена компонентов, определить границы прототипа; – Как писать промпты, чтобы инструмент использовал ваши компоненты и состояния, а не придумывал новые; – Зачем сразу требовать состояния загрузки, пустого экрана, ошибки и успеха; – Как итерироваться быстрее: править по одному изменению за раз и не копить правки в один запрос; – Как подключать внешний контекст из Notion и GitHub вместо копипаста требований; – Когда есть смысл использовать живые данные и API, чтобы проверить плотность контента и крайние случаи; – Какие варианты выхода есть после сборки: оставить в Фигме, экспортировать код как референс или дать демо-ссылку. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Верстаю вторую книжку Андрея Шапиро, называется «Рабочие истории». О макете: 1. Первая книжка, «Карта процесса-опыта», получилась немного похожей на альбом, потому что сами карты потребовали увеличенного формата. В этот раз автор захотел, чтобы книжка была похожа на книжку и «честный труд». 2. Основной текст идет сплошняком, без искусственного разделения на страницы и развороты. Для монолитности я заменил швейцарский абзац на абзацный отступ и, немного посомневавшись (гротеск всё-таки), выключил основной текст по ширине. При этом «дополнительные» тексты внутри основного — примеры и списки — выровнены по левому краю. 3. На каждой странице есть широкое левое поле, куда встают заголовки, сноски, нумерация примеров (собственно «историй»), картинки и некоторые другие блоки. 4. От прошлого макета остался шрифт Formular, текстовые стили, ну и общий вайб (боже, что я несу). Планируем сдать в печать в апреле-мае.

Кажется, что это простейшая задача — ну что мы, в самом деле не разберемся, куда кровать поставить? А не понравится, так передвинем! Но реальность быстро возвращает на землю. Когда вы начинаете раскладывать мебель в реальных габаритах, всплывают ограничения: розетки оказываются за шкафом, бра некуда подключить, выключатель перекрывается пеналом, а проход между диваном и кухней внезапно превращается в «боком протиснуться». Это как покупать продукты для сложного блюда без списка — вроде взяли то что нужно, но ошиблись с % жирности у масла или сливок, и результат совсем не тот. Да и передвинуть мебель часто не так-то просто — если уже выведены розетки и светильники, уложен тёплый пол, заказана встроенная мебель или кухня — любое смещение тянет за собой переделки, дополнительные расходы и потерю времени. На эту тему у меня есть два полезнейших материала в Потрясных находках: урок по теории планировок на 1,5 часа и гайд с перечнем стандартного наполнения каждой комнаты, чтобы ничего не забыть. Буквально как список покупок В уроке вы узнаете: • какие принципы лежат в основе эргономичной планировки, а не «интуитивной расстановки»; • какие минимальные проходы и отступы действительно критичны; • как учитывать открывание дверей, фасадов и сценарии движения по квартире; • как правильно привязать мебель к электрике и освещению; • как читать план БТИ и определить масштаб помещения, даже если у вас на руках только базовый чертёж; • как проверить планировку до начала ремонта, чтобы не платить за переделки. И также список приложений, в которых вы можете применить знания и сделать планировку понятной для строителей У всех есть бесплатный доступ, а также платная подписка для использования широкого функционала. Подойдет как для новичков, так и для среднячков и старичков Присоединиться к каналу можно по ссылке - https://u.to/TJOpIA А в комментариях оставлю список таймкодов из полного видео, чтобы вы увидели, насколько много вопросов закрывает ОДИН урок из канала 👇🏻

1. В режиме предпросмотра появляются временные прямоугольники, чтобы понимать будущие размеры с отступами. Изменить в коде скрипта цвет обводок: rectColor: [255, 0, 0] // RGB 2. Для помощи при вводе номеров артбордов появляются временные индексы. Изменить цвет или отключить показ индексов в коде: isShowIndex: true, indexColor: [255, 0, 0] // RGB Скачать DrawRectanglesByArtboards Скачать MaskArtboards #illustrator #artboard #draw #group #mask

Тема: редизайн экрана поиска билетов (мобильное приложение железных дорог «Сербовоз») Исходник: экран выбора направления и даты Цель — быстрее подвести пользователя к действию Задача Переосмыслить экран так, чтобы пользователь — сразу понял, куда нажимать — быстрее выбрал направление и дату — не отвлекался на лишнее Не «украсить», а сделать экран интуитивнее и собраннее Можно — менять структуру — перераспределять акценты — упрощать поля — усиливать CTA — работать с типографикой, отступами, цветом — добавлять микро-подсказки или состояния Нельзя терять — суть продукта (покупка билета) — читаемость — ощущение «официального сервиса», а не стартап-лендинга Фокус — первые 2 секунды внимания — иерархия полей — логика шага за шагом — минимум когнитивной нагрузки Он живёт в гос-сервисе, где всё синее и серьёзное Нужен ли тут сложный фон, куча логотипов и вторичных блоков Что можно убрать или спрятать до следующего шага Ограничения — 1 экран — статично или анимация — любой инструмент Время ⏱ 40–60 минут (подумать → собрать → остановиться) Результат — 1-2 финальных экрана — короткий комментарий: что поменяли и зачем 💛🖤🤓🤍💓 Система реакций — не лайки, а позиция каждый выбирает сам: сохранить порядок или нарушить Обсуждение t.me/Designwarmups_chat — в чате. Скрины, мысли, сомнения — приветствуются

По просьбе коллег написала код для растягивания блока «Смотрите также» в карточке товара на всю ширину экрана. 🧡 Первый вариант модификации для карточек в ряд: ❤️ Второй вариант для карточек в слайдере: ⭐️ Вставьте код в блок Т123 в шапку или подвал товара (карточка товара должна открываться как страница) ⭐️ Код работает только для десктопа от разрешения 1200рх ⭐️ Код растягивает блок с отступами по 40рх по бокам и с 20рх между товарами. Если вам нужны другие расстояния — поправьте соответствующие вычисления в коде. 💭 Если этот код конфликтует с вашими стилями по изменению внешнего вида карточек товаров — напишите мне в комментариях, попробую отдельно разобрать ваш случай. #тильда #модификации #магазин

Нажми Shift + M, чтобы измерять отступы. Так проще настроить высоту строки и размеры авто-лейаута.

Хуэй-Хсин Ванг и Меган Браун из Nielsen Norman Group взяли реальную задачу: переделать страницу профиля участника своих курсов. Они прогнали её через все популярные ИИ-инструменты для прототипирования и сравнили результат с работой живых дизайнеров. Выяснилось, что ИИ выдаёт приличные макеты только при очень детальном промпте или когда ему скармливают готовый скетч или ссылку на Figma. Без этого всё выглядит типично и серо, а в деталях куча промахов: элементы не сгруппированы, отступы гуляют, цвета конфликтуют, иерархия разваливается. Ещё ИИ часто путает контекст и лепит паттерны из соцсетей туда, где они не нужны. Внутри: – Почему только сверхподробный промпт даёт результат близкий к человеческому; – Как загрузка скетча или Figma-файла делает копию почти идеальной; – Какие именно мелочи ИИ пропускает даже при хорошем описании: группировка, отступы, контраст; – Почему без указания стиля всё выходит в сером минимализме с яркими цветовыми пятнами; – Как ИИ принял личный кабинет курса за профиль в LinkedIn и выделил не те акценты; – На каких стадиях сейчас реально полезно запускать ИИ-прототипы, а где только зря потратите время. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Всем привет! Это explorasha. Пришло время набардачить в верстке. Устали от «правильных» отступов и вылизанных макетов? На воркшопе мы устроим настоящий типографический хаос. Будем заниматься экспериментальной типографикой и верстать коллажи из всего, что попадется под руку (точнее, под курсор). Куратор воркшопа: Даша Эксплораша Что будет происходить: Мы превратим «скучный» текст в арт-объект. Будем резать слова, растягивать буквы, наслаивать смыслы и делать красиво. Что понадобится: Всё, что умеет печатать буквы и двигать слои. Подойдет любой софт, в котором вам комфортно хулиганить. 🚩 8 января в 16:00 📌 Ссылка будет в канале в день воркшопа