#12 Фигма Make лезет в реальный код

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

Минутка обложки:

Дизайн обложки, которая вблизи кажется абстрактными пикселями, а с дистанции раскрывает тему номера.

📱 Эффект пиксель арта в иллюстраторе

Video is not supported

🧩 Какой способ управления размерами иконок в дизайн-системе реально работает

Если в дизайн-системе у иконок ограниченный набор размеров, это почти всегда превращается в отдельную архитектурную проблему. Снаружи всё выглядит просто: ну есть 12, 16, 20 и 24 пикселя, что тут обсуждать. А потом выясняется, что один подход удобен библиотекарю, но раздражает потребителя, второй красиво выглядит в теории, но ломается на вложенных компонентах, а третий требует больше ручной поддержки, зато лучше всего ведет себя в реальной работе. Алиса Пакард очень внятно разбирает эти варианты и приходит к практичному выводу: лучший компромисс сейчас это size-свойство на каждом icon-компоненте, а не отдельные компоненты на каждый размер и не обертка для иконок. Потому что этот способ дает больше контроля там, где он нужен, не ломает опыт потребителя и лучше сочетается с preferred swaps и другими паттернами внутри библиотеки. Внутри: – Почему отдельные компоненты под каждый размер иконки быстро захламляют библиотеку; – Зачем подход с variable modes выглядит заманчиво, но плохо масштабируется; – Чем icon wrapper удобен для поддержки, но неудобен в реальном UI; – Почему вложенные иконки внутри кнопок и других компонентов всё усложняют; – Как size-свойство на каждом icon-компоненте решает проблему гибче; – Почему этот подход лучше для preferred swaps и настройки конкретных компонентов; – Какой компромисс приходится принять библиотекарю при таком решении; – Почему в управлении размерами иконок сейчас важнее опыт потребителя, чем удобство внутренней поддержки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Pixel Icons
Файл содержит подборку редактируемых пиксельных иконок Install
♿️ Accessibility в приложении нужна не только людям, но и AI-агентам
Обычно AI-агенты работают с интерфейсом как человек: делают скриншот, пытаются понять по пикселям, где кнопка, и тыкают по координатам. Это медленно, дорого по токенам и довольно хрупко. Автор показывает более умный путь: использовать accessibility tree, который уже есть внутри iOS-приложения и который читают VoiceOver и XCTest. Если у элементов нормально заполнены identifier, label, hint, value и traits, агенту не нужно гадать по картинке. Он может детерминированно находить элемент, понимать, что он делает, и нажимать точно в цель. Плюс это полезно не только для AI: вы одновременно улучшаете доступность для людей и делаете приложение гораздо удобнее для автоматизации, тестов и агентной навигации. Внутри: – Почему навигация по скриншотам для AI дорогая, медленная и хрупкая; – Что такое accessibility tree и какие пять свойств в нем важны; – Какие SwiftUI-модификаторы стоит добавлять на кнопки, строки списков и экраны; – Зачем отслеживать координаты элементов, если у них уже есть identifier; – Почему строгий нейминг accessibility-id сильно помогает агентам; – Как populated accessibility tree меняет экономику токенов и скорость работы; – Почему AI-навигация полезна не только для тестов, но и прямо во время разработки; – Как accessibility и AI support здесь работают как одна и та же инвестиция. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: суетский канал
⭐️Ищем вдохновение в четверг и рассказываем про анимированные граффити на стенах солнечной Каталонии
Испанский райтер Ekemoon придумал способ оживить рисунки без единого пикселя. Он использует лентикулярную технику: наносит разную краску по обе стороны тонких прутьев забора. Угол обзора меняется — меняется и картинка, как в детской игрушке. Его маскот Ekegirl годами подмигивает прохожим на улицах испанских городов. Люди проходят мимо, и не сразу понимают, что только что увидели анимацию на заборе. Никакой электроники, только краска и физика.
Video is not supported
Изображение канала: Профессия Дизайнер
Превращаем видео в различные графические стили by leobeckerdesign
В этом видео покажет вам способ, как при помощи нейросети Domoai.app вы можете превратить ваше видео в пиксельарт, аниме и кучу других стилей. #нейро #туториал
Video is not supported
Изображение канала: Design Twist
X разрывается от новостей про Google Stitch (пост)
Meet the new Stitch, your vibe design partner. Here are 5 major upgrades to help you create, iterate and collaborate: 🎨 AI-Native Canvas 🧠 Smarter Design Agent 🎙 Voice ⚡️ Instant Prototypes 📐 Design Systems and DESIGN.md Я уже писал про Stitch несколько раз, потому что он на слуху. Сейчас они удивили сообщество тем, что теперь можно «вайбдизайнить» и сразу получать production-ready код Видно, что прогресс есть, но заголовки формата «DESIGNERS ARE COOKED» или «ITS SO OVER FOR DESIGNERS», которыми засран твиттер, пока что слишком громкие Дизайн выглядит все еще слабовариативным, я посмотрел, чего там эксперты нагенерили (возможно, поможет правильная работа с промптами и рефами) То, что презентуется как «дизайн-система», выглядит как простой ui-kit на переменных (к слову, вообще-то у самого подход к использованию дизайн-системы — то еще дерьмо, можно несколько экранов их продуктов собрать и сильно удивиться) Мне оч нравится направление, куда идет Stitch. Они могут соревноваться с фигмой, факт! Но давайте по-честному: Чуваки решили проблему «как нам быстро задизайнить что-то» Они не решили такие вопросы (и шанс, что решат, не очень велик): → Почему высокий процент отказов с главной страницы → Почему пользователи игнорят СТА, хотя ее видно → Как нам сделать конвертящий онбординг-флоу Разве когда-то проблема была только в пикселях? Stitch просто сделал думающих дизайнеров более ценными Короче, не переживаем, работу пока ai не заберет!
Video is not supported
Изображение канала: Дизайнер, привет
🕶 Почему интерфейс для умных очков нельзя просто взять с телефона
На телефоне у дизайнера есть экран. В очках его как будто нет. Интерфейс живет поверх реального мира, а пользователь должен физически перевести фокус примерно на метр перед собой, чтобы вообще начать его читать. Уже из за этого привычные паттерны начинают ломаться. Дэвид Аллин Риз из Google рассказал, как команда собирала Jetpack Compose Glimmer для очков с прозрачным дисплеем. Самый сильный инсайт: черный цвет здесь не черный, а прозрачность. Насыщенные цвета теряются на фоне реального мира, обычные шрифты читаются хуже, а слишком быстрая анимация просто моргает в периферии. Поэтому интерфейс пришлось пересобирать почти с нуля: темные контейнеры вместо привычных поверхностей, нейтральная палитра, новая система глубины и очень осторожная работа с движением. Внутри: – Почему интерфейс в очках воспринимается не на линзе, а примерно на расстоянии вытянутой руки; – Что меняется в дизайне, когда черный цвет становится полностью прозрачным; – Почему привычные компоненты и тени плохо работают на прозрачных дисплеях; – Как команда подбирала размер текста через угловой размер, а не пиксели; – Зачем в интерфейсе почти отказались от насыщенных цветов; – Почему уведомления появляются почти две секунды, а не мгновенно; – Как устроены глубина, перекрытия и темные контейнеры в Jetpack Compose Glimmer; – Что значит проектировать интерфейс, который должен появляться только тогда, когда он реально нужен. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Изображение канала: СПбГУПТД | NEWS
💻 Продукция с символикой профессиональной конференции для IT-сообщества в нефтегазовой отрасли – проект студентки Института графического дизайна СПбГУПТД Дарьи Кришталь
Студентка разработала систему сувенирной продукции, предложила новые позиции и подобрала реальные производственные компании для реализации. В основе концепции лежит цилиндр – базовый элемент системы, своеобразный "пиксель" физического и цифрового мира. На конференции он формирует волну – метафору трансформации отрасли. В мерч-продукции – становится модулем для создания новых форм, подобно данным, из которых рождаются решения, связи и энергия. Цилиндр в проекте трактуется как единица данных, кода или молекула энергии – простая и универсальная форма, из которой выстраивается все от алгоритмов до нефтяных платформ. Взаимодействие фигур формирует новые структуры – спирали, кольца, звезды и другие динамичные композиции, – сообщила Дарья. 🏆 С этим проектом студентка заняла третье место в федеральном конкурсе «Дизайн молодых». Напомним, что в этом сезоне победителями стали 9 студентов СПбГУПТД в 8 номинациях. Подробнее читайте на Дзене. 👻MAX | 📲ВК | 📝Дзен
Изображение поста
Изображение канала: Журналус лайт
🇬🇧 How to Design for Transparent Screens
Дэвид Аллин Риз рассказал, как команда Google проектирует интерфейсы для прозрачных дисплеев в ИИ-очках и почему для этого пришлось пересмотреть многие базовые принципы UI-дизайна. В статье он объяснил, как работают такие дисплеи, почему на них чёрный цвет, тени и насыщенные цвета ведут себя иначе и какие решения легли в основу фреймворка Jetpack Compose Glimmer для XR-интерфейсов. Получился подробный разбор того, как меняется цвет, типографика, глубина и анимация, когда интерфейс существует не на экране, а поверх реального мира. Главное: • Интерфейс в ИИ-очках не размещается на поверхности линзы, а проецируется примерно на расстоянии одного метра. Поэтому пользователь должен сознательно перевести фокус с реального мира на UI • Дисплеи очков могут только прибавлять свет к уже имеющейся картинке реального мира. При таком подходе чёрный цвет выполняет функцию прозрачности, а не заливки • Чёрный цвет выступает в качестве гарантированно читабельной подложки для контента • Светлые интерфейсы не получается использовать, потому что они создают отвлекающие блики на экранах и сильнее расходуют батарею • Типографика измеряется не в пикселях, а в углах зрения. Текст делают таким, чтобы его можно было прочитать одним взглядом. Минимальный размер для читаемости — около 0,6 градусов • Пространственная дистанция становится ключевым параметром при проектировании • Анимации медленнее, чем в привычных интерфейсах. Уведомления появляются почти за две секунды, мягко привлекая внимание пользователя • При действиях пользователя, наоборот, требуется мгновенная обратная связь. Для этого применяются фокус-индикаторы и подсветки • Вся система построена вокруг идеи «спокойного интерфейса». Информация появляется только тогда, когда она действительно нужна, и не мешает восприятию реального мира #статья@zhurnalus_lite
Изображение поста
Изображение канала: Retro Figma
Distribute Layers — плагин распределяет выбранные слои влево, вправо, вверх или вниз по указанному смещению пикселя
Install
Изображение поста
Изображение канала: Дизайнер, привет
🎓 Стажер потратил месяц на исследование, нашел 2 респондентов из 250 опрошенных и забыл включить запись разговора
Сергей Федоричев пришел практикантом UX-проектировщиком в команду S3 в Selectel. Первое представление о работе было романтизированным: главное уметь проектировать интерфейсы, знать паттерны, аккуратно работать с макетами. Практика расставила всё по местам. Реальные пользователи вели себя не как в учебных кейсах, любое решение требовало учитывать ограничения продукта, бизнеса и инфраструктуры. Первая задача: паттерн Show More для скрытия информации. Сергей собрал примеры использования по всем продуктовым панелям, сгруппировал по целям, обсудил с дизайнерами. Результат неожиданный: полный отказ от паттерна. Show More стал антипаттерном, который не рекомендуется использовать. Незачем скрывать информацию от пользователей и заставлять их совершать дополнительные действия. Первое полноценное исследование: изучение пользовательского пути при подключении утилит к S3. Сергей искал новых пользователей, которые заходили на страницу создания бакета. Опросил примерно 250 человек, нашел только двоих потенциальных собеседников, причем не самых репрезентативных. В обоих случаях забыл включить запись разговора. На рекрутинг и два интервью ушел месяц. Исследование пришлось прекратить. Сергей не зафиксировал результат своей работы, это была ошибка. Внутри: – Первые дни практики: подключал утилиты к бакетам, проходил основные сценарии, разбирался в терминологии вместо чтения документации; – Паттерн Show More: собрал все варианты использования, сгруппировал по целям, пришел к выводу что это антипаттерн; – Дизайн-система это не про пиксели, это про коммуникацию и синхронизацию между разными продуктами; – SSL/TLS сертификаты в S3: построил user flow, выявил места где пользователь терял контекст, предложил интеграцию с менеджером секретов; – Рекрутинг респондентов: 250 опрошенных, 2 собеседника, забыл включить запись, месяц работы без результата; – Даже неудачное исследование нужно фиксировать: отклик ЦА, использованные каналы рекрутинга, риски, что можно улучшить; – Факт отсутствия ответа от ЦА это данные, а не провал. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Изображение канала: DSGNERS!
Это нормально
Рубрика, в которой дизайнер в формате небольшого ответа нормализует разные состояния и ощущения креаторов. Сегодня Артём Мишенков, арт-директор креативного ателье «Пинк». Быть дотошным — нормально. Если есть причина, время и важность результата, то я спокойно сижу и добиваю работу до состояния, когда можно её отпустить. Кейсы, фестивали, важная сдача проекта — это как раз те ситуации, где нельзя «и так сойдёт». Я всегда стараюсь дополнительно узнать всю информацию от заказчика, потому что потом внезапно всплывает: «ой, это не финальный текст», «ой, у нас ещё один брендбук», «упс, это не то, что мы хотели». Не всегда спасает, все мы смертны. Не уточнил детали — получаешь больше правок в Фигме на финале проекта. Побыл дотошным — сохранил полнедели жизни. В артдирстве я часто выношу мозг своим ребятам, и это не из вредности (на самом деле только из неё). Просто рост команды чаще всего происходит через слова: «переделай», «попробуй по-другому». Первый вариант почти никогда не лучший. Дотошность — это про дойти до победного (иногда даже через психи), пока сделанное не начнёт работать. Ну и важный момент. Дотошность не равна пиксельдрочеству. Если заказчику нужно аккуратно и быстро закрыть задачу — делай рационально. Если проект для вау-эффекта, можно и попридираться к полпикселю. Контекст решает. Сейчас все ленятся, и я часто слышу фразу: «это и так хороший результат». А вопрос-то в другом — а что, если сделать ещё один подход? Ещё одну версию? Докопаться до себя сильнее обычного. Вот тут-то обычно и появляется работа, за которую не будет стыдно.
Изображение поста
Изображение канала: Саша из Анкóры. Дальше дизайна
Первые новости начала весны 🔥
Друзья, поздравляю вас с первыми днями этого прекрасного времени года. 🌱 Наконец официально зима закончилась, скоро будет всё зелено, ярко, можно будет гонять на велике, бегать по улице, кайф. А еще эта весна началась с приятной новости. ⚡️⚡️⚡️ Сегодня пришло уведомление от DProfile 🔥, что нам дали награду «Лучшие интерфейсы»🔥 за кейс для проекта ЕлиПили. Поздравляю нашу команду дизайнеров с очередной небольшой, но очень важной наградой. Это кейс, как мы создавали мобильное приложение для компании. Бренд объединяет несколько ресторанов с единой системой программы лояльности. Короче, это здоровый кейс на какое-то нереальное количество пикселей. Приложение реальное, сейчас работает, можно в Москве скачать, сходить в ресторан, заказать еду либо забронировать столики. Для нас это очень приятная награда, потому что кейсы на DProfile мы выкладываем редко. Руки пока до них не доходят. Тем ценнее такие печеньки 🔥🔥. Если вы ещё не видели этот кейс, вот ссылочка 👉🏼 https://dprofile.ru/case/160408/eli-pili-prilozenie Зайдите, оцените, ставьте нам лайки, а мы пошли дальше работать. У нас проектов еще больше прибавляется. Да, на этой неделе буду уже вакансии публиковать. Надеюсь, что год пройдёт так же ударно, как и начался. Мы с командой, по крайней мере, будем прикладывать все силы к тому, чтобы делать ещё больше, ещё лучше. Всё, обнял, пока. 🏆 Саша из Анкоры
Изображение поста
Изображение канала: Перасперадастра
второй проект по обучению в @perasperagram
в этот раз сделала лонгрид, посвященный истории нинтендо! безумно люблю всю их вселенную и не смогла пройти мимо при выборе темы в основе концепции лежит метафора "пиксель - маленькая точка, из которой выросла целая культура". графика построена на сочетании пиксель-арта и 3D, объединяя прошлое и настоящее. а ещё большая часть визула была сгенерирована! проект можно посмотреть на dprofile и behance
Video is not supported
Video is not supported
Video is not supported
Video is not supported
Изображение поста
Изображение поста
Изображение поста
Изображение поста
Video is not supported
Изображение канала: Дизайнер, привет
🍎 Apple в 1992: «Плохие иконки отвлекают и раздражают». Apple в 2025: добавила именно такие иконки везде
В macOS Tahoe компания добавила иконки к каждому пункту меню. Проблема: если иконка есть у всего, ничто не выделяется. Главная функция иконки в том, чтобы помочь быстрее найти команду. Но когда все пункты с иконками, это работает наоборот. Ник Тонский, программист и дизайнер интерфейсов, разобрал все ошибки и сравнил их с рекомендациями из собственного руководства Apple 1992 года. Оказалось, что идеальное знание уже было доступно 30 лет назад, но его полностью проигнорировали. Внутри: — Пятьдесят оттенков «Создать»: собрал все иконки для новых документов, папок, записей в одну картинку, абсурдность стала очевидной; — Одинаковые иконки для разных действий: стрелка может означать импорт, обновления, быстрый просмотр или показать выполненное; — Детализация в 12×12 пикселей: иконки размером 0,09 дюйма (2,4 мм) содержат камеру с видоискателем, окно с кнопками закрытия, букву i высотой 2 пикселя; — Нет консистентности: «Сохранить» имеет разные иконки в разных приложениях, стрелки указывают в разные стороны; — Текст вместо метафор: иконки Abc, BIU выглядят как текст, а не как символы; — Игра без подписей: убрать названия команд и попытаться угадать по иконке, что она делает. Провал. Apple взялась за невыполнимую задачу: добавить иконку к каждому пункту меню. Хороших метафор на всё не хватает. Но даже с учётом этого работа сделана плохо: нет консистентности, детали не видны, одинаковые иконки означают разное. Как вам иконочки? ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Изображение канала: Design Twist
Баланс между соло и командной работой
Часто слышал на собесах вопрос «Ты командный игрок или одиночка?» (и даже сам спрашивал) Наверняка есть роли, где перекос в одну из сторон — вполне ок. Но дизайн не про это. Думаю, дизайнерам важно уметь вовремя переключаться между этими режимами Всю деятельность дизайнера можно поделить на 5 слоев и выбирать нужный в зависимости от контекста: 1. Solo Скетчинг, сборка макетов, поиск рефов и дизайн-решений — все это лучше делать самому. Если пытаться штормить каждый пиксель толпой, получится франкенштейн, еще и ответственность размоется 2. Trio Дизайнер + Продакт + Техлид/Аналитик Здесь идет более глубокая работа над продуктом. Менеджер приносит проблему и цифры, дизайнер — UX, техлид или аналитик сразу говорит, где мы упремся в ограничения 3. Team Когда концепт/флоу готов, мы идем к разработчикам и QA для груминга. Тут нужно убедиться, что всё доедет до прода в том виде, как было задумано (или предстоит найти какие-то компромиссы) 4. Cross-functional group Если вы делает что-то новое/большое, то стоит сходить к сейлзам, маркетингу, саппорту и смежным командам. Порой 1 разговор с подобными ролями может заменить 10 интервью с клиентами, и вы можете узнать детали, которых нет в метриках 5. Visibility for company Демо, посты в общие чаты, рассылки. Нужно показывать, что вы делаете, почему и зачем. Не чтобы похвастаться, а чтобы команды в компании понимали, куда движется продукт и как это может на них повлиять Нет какого-то правила и верного порядка, как нужно перемещаться по этим слоям. Обычно с опытом мы просто начинаем понимать: - тут я закопался, надо идти к продакту - слишком много разговоров, надо пойти порисовать просто - надо сделать рассылку внутри, чтобы подсветить фичу
Изображение поста
Изображение канала: Retro Figma
Плагин «vga dithercore.exe» by 𝕵𝕮𝕹 А этот плагин использует пиксельные узоры и цветовые схемы 80-90-х годов, для создания эффекта старой компьютерной графики
📺 Попробовать плагин 📺 #plugin
Изображение поста