botFigma AI 시각 검색: 대규모 디자인 프로젝트를 위한 혁신
Figma AI의 시각 검색 기능은 스크린샷을 통해 대규모 디자인 프로젝트에서 특정 화면이나 컴포넌트를 빠르게 찾아주는 혁신적인 도구입니다.
HabrЭволюция токенов цветов в Туту: как навести порядок в дизайне и не уехать в дурку
Создание единой дизайн-системы для крупного кроссплатформенного продукта — это всегда вызов. А если процесс совпадает с масштабным ребрендингом компании, задача усложняется в разы. В этой статье мы разберем двухлетний кейс команды «Туту», которая прошла путь от полного отсутствия стандартов до гибкой, масштабируемой и строго контролируемой архитектуры токенов цвета.
Собрал мультибрендовую дизайн-систему аж для семи брендов
Я пришёл в компанию, где было семь брендов. С улицы и не скажешь, что под ними один шаблон — над разрозненностью поработали как следует: свои фоны, свои цвета, своя подача. Но в основе лежал один и тот же шаблон. А внутри файлов структуры не было никакой. Ни связи между брендами, ничего. Всё на группах и фреймах. Компоненты почти не использовались: под каждую новую задачу, в каждом новом файле кто-то рисовал новую кнопку — вот прямо под этот раздел. Ни о какой системности речи не шло. Ни внутри бренда, ни между брендами. Смотреть на это спокойно я не мог — и не из брезгливости. Я видел, сколько это стоит. Нарисовал флоу KYC один раз — иди рисуй его ещё семь, и каждый раз почти с нуля, потому что переиспользовать нечего. Вот где горело время. Это история о том, как я собрал из этого хаоса дизайн-систему и возглавил переход на неё: про фундамент и токены, про стену в 28 тем и про миграцию трёхсот тысяч слоёв. Начну с того, почему так продолжаться не могло.
https://habr.com/ru/articles/1044196/
#дизайнсистема #design_system #figma #Token_Studio #мультибрендовость #design_tokens #компоненты #дизайнпроцессы #figma_variables_api
Компонентная разработка (reusable)
Это не разбор, не рекомендация, а скорее ценный опыт фронтовой команды с полей российского IT. Все что описано ниже - общий результат нашей работы. Перед любой командой со стороны менеджмента и бизнеса стоит одна и та же задача «давайте быстрее - надо было еще вчера». Нас эта судьба также не миновала. Первое, с чего начинается оптимизация, своя дизайн-система. У нас уже была своя дизайн-система, она выручала нас во многих кейсах, но она была старая, подходы к разработке давно изменились, и UI Kit уже не отвечал требованиям. Поэтому было принято решение параллельно разрабатывать новую, с учетом всех последних требований и подходов. Переезд не должен доставлять проблем и быть плавным. План такой: разрабатываем новый компонент, тестируем его, и как только результат радует, старый удаляем и внедряем новый. И так до тех пор, пока не останется ни одного старого компонента. Разработка имеет такую очередь: архитектурно наш UI Kit лежит в закрытом artifactory npm пакетом. Также есть шаблон со всеми необходимыми зависимостями и UI Kit’ом. Когда приходит время нового проекта, делается fork заготовки. Это дает быстрый старт. Начинаем Давайте посмотрим, как бы начиналась разработка приложения. Возьмем для примера компонент Select. Не будем писать сами, возьмем Antd Select и через обертку emotion стилизуем его под корпоративные стили. Структура получится такая:
Impact Analysis в дизайн-системе: как мы сделали CI осмысленнее, а review понятнее
Меня зовут Даниил, я Android-разработчик в «БКС Мир инвестиций». В первой статье мой коллега рассказывал, как мы использовали Kotlin IR Compiler Plugin, чтобы автоматически добавлять testTag и semantics в Compose-компоненты: Kotlin IR Compiler Plugin в дизайн-системе: автотесты с Compose без ручной разметки . Эта статья — следующий шаг: как мы начали использовать информацию о структуре дизайн-системы, чтобы понимать область влияния изменения.
https://habr.com/ru/companies/bcs_company/articles/1039404/
#Android #Design_System #Jetpack_Compose #CI #Impact_Analysis
bot파워 유저가 싫어한 리디자인: 정보 밀도와 접근성의 균형 잡기
에너지 소비 데이터를 다루는 웹 앱 리디자인 과정에서 일반 사용자용 접근성과 파워 유저용 정보 밀도 사이의 충돌이 발생했다.
LazyWeb: 257 тысяч экранов реальных приложений как контекст для AI-агентов
Если вы хоть раз просили Claude Code, Cursor или Codex сделать интерфейс — то знаете эту проблему. Код модель пишет неплохо, но визуально результат выглядит как “сайт, сгенерированный AI”. Одинаковые карточки, одинаковые градиенты, одинаковый набор паттернов из топа поиска. Несколько недель назад вышел LazyWeb — MCP-сервер, который даёт агенту 257k экранов реальных приложений как визуальный контекст. Установил, прогнал на pricing-странице для своего пет-проекта, разбираю, что получилось.
https://habr.com/ru/articles/1033376/
#MCP #Claude_Code #AIагенты #дизайнресёрч #UI #LazyWeb #Cursor #design_system
UikitRails: Rails를 위한 "Copy in, Not Lock in" 방식의 UI 컴포넌트 라이브러리
UikitRails는 shadcn의 철학을 Rails에 도입하여 외부 라이브러리에 종속되지 않고 프로젝트 내부에 직접 코드를 생성해 자유로운 커스텀을 지원합니다.
Дизайн-токены: полный гайд по архитектуре и неймингу c примерами и задачками
Дизайн-токены — это язык, понятный как дизайнерам, так и разработчикам. Без него продукт получается разрозненным и неповоротливым. Токены и правильный нейминг помогают создавать новые разделы быстрее, а дизайнерам больше думать о сценариях и создавать визуал в рамках продукта, а не заниматься рутиной. Если в вашем коде и макетах до сих пор живут значения типа #0055FF — вы копите технический долг, ведь если понадобится изменить этот цвет на другой, придется менять и все компоненты, где используется это значение. А про разные темы вообще можете забыть... В конце статьи будут ссылки на доп. материалы из реальных дизайн-систем, откуда я брал информацию. Изучить тему
https://habr.com/ru/articles/1012980/
#дизайнсистема #дизайн #figma #tokens #токены #дизайнтокены #variables #design_system
Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор
В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).
https://habr.com/ru/articles/1006248/
#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma
