#design_system — Public Fediverse posts

Разработка возвращает макет: базовая гигиена Figma‑макетов

Грязный макет – грязный код. Чистый макет – адекватный код и отсутствие вопросов «что тут имелось в виду»: разработка получает то, с чем можно работать. Элементарщина, про которую забывают/не успевают, ведь это просто, примитивно, но страдают все… В СВОЙ Тех решили написать спецификацию по тому, в каком виде желательно отдавать макеты в разработку. Разработка получила аргументацию для возвращения макета. Потому в «сесть и сделать сразу хорошо» заинтересованы все – но это время, и его надо закладывать в процессы. Внутри – правила, советы, рекомендации и чек‑лист для краш‑теста, которые помогают собраться и сделать хорошо сразу. Из элементарного строится бо́льшее...

https://habr.com/ru/companies/svoi_ru/articles/1068604/

#designer #дизайн #design_patterns #desktop #design_system #figma #ai #мобильная_разработка

Эволюция токенов цветов в Туту: как навести порядок в дизайне и не уехать в дурку

Создание единой дизайн-системы для крупного кроссплатформенного продукта — это всегда вызов. А если процесс совпадает с масштабным ребрендингом компании, задача усложняется в разы. В этой статье мы разберем двухлетний кейс команды «Туту», которая прошла путь от полного отсутствия стандартов до гибкой, масштабируемой и строго контролируемой архитектуры токенов цвета.

https://habr.com/ru/articles/1048072/

#figma #design_system #design_tokens #palette #colors #json

Собрал мультибрендовую дизайн-систему аж для семи брендов

Я пришёл в компанию, где было семь брендов. С улицы и не скажешь, что под ними один шаблон — над разрозненностью поработали как следует: свои фоны, свои цвета, своя подача. Но в основе лежал один и тот же шаблон. А внутри файлов структуры не было никакой. Ни связи между брендами, ничего. Всё на группах и фреймах. Компоненты почти не использовались: под каждую новую задачу, в каждом новом файле кто-то рисовал новую кнопку — вот прямо под этот раздел. Ни о какой системности речи не шло. Ни внутри бренда, ни между брендами. Смотреть на это спокойно я не мог — и не из брезгливости. Я видел, сколько это стоит. Нарисовал флоу 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 стилизуем его под корпоративные стили. Структура получится такая:

https://habr.com/ru/companies/megafon/articles/1041500/

#frontend #react #mobx #design_system #uikit

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

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

Дизайн-токены: полный гайд по архитектуре и неймингу 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

Создаем UI-Kit на React: пошаговое руководство по настройке

Привет, Хабр. Я Сергей Осипов, архитектор дизайн‑системы в T2. Вместе с моим коллегой, Данилом — экспертом группы разработки — мы подготовили материал, в котором подробно разберем процесс настройки UI‑Kit на React — от установки зависимостей до сборки готового пакета. Ниже в статье вы прочитаете о полном цикле разработки: сборке, тестировании, линтинге и документации. Интересно? Переходите под кат!

https://habr.com/ru/companies/t2/articles/974508/

#дизайнсистема #storybook #typescript #javascript #дизайн #css #webразработка #webдизайн #design_system #frontendразработка

UI Kit как рычаг роста: как связать Figma и код

Как превратить UI Kit из дизайнерского артефакта в живую систему, где обновление стиля в Figma автоматически обновляет код на Android. В статье — наш путь от ручного копирования палитр до генерации типобезопасных токенов через KotlinPoet, Gradle-плагины и Figma JSON. Расскажу, как бизнес получает скорость и консистентность, как темная тема перестаёт быть болью, и почему iOS может безболезненно присоединиться к этой архитектуре.

https://habr.com/ru/articles/956130/

#ui_kit #design_system #android #kotlin_multiplatform #kotlin

Как «помыть банковского слона»: системный подход к UI/UX в финтехе

В финансовой сфере дизайн — это не только про красивый визуал Каждый неудачный экран, каждая неочевидная форма или лишний клик обходятся компании реальными денежными потерями: дополнительными часами поддержки, затянувшимися доработками и упущенными клиентами. В этой статье разберемся, как системный подход, работа на стыке аналитики и фронтенда и современные инструменты помогают не утонуть в рутине – и пока все внедряют фичи, дизайнер сохраняет целостность пользовательского опыта при пользовании глобальными банковскими продуктами. Узнать «как помыть слона»

https://habr.com/ru/companies/sovcombank_technologies/articles/937450/

#дизайн_система #design_system #ui_ux #ui_ux_design #fintech #интерфейсы #flow

Индикация клика на стероидах в Compose: пишем свою IndicationNodeFactory

При работе с Jetpack Compose разработчики часто не замечают, как элементы Material и Material 3 дизайн систем вплетаются в их код. Один из таких элементов - это индикация клика, реализованная в Material как круги на воде (англ. ripple effect). В этой статье мы разберем, в чем недостатки дефолтной реализации риппл-эффекта в Compose и как сделать свою.

https://habr.com/ru/articles/914506/

#compose #compose_multiplatform #jetpack_compose #material_design #design_system

Как я написать плагин для Figma, не написав ни строчки кода

Привет, я не программист, но я написал полезный плагин для Figma, не написав ни строчки кода. Плагин локализует перемещённые алиас-переменные. На всё ушло 23 часа (да долго, но сам бы писал ещё дольше). А это почти краткая история про то, как я это сделал, используя только своё желание упростить работу с переменными в Figma и парочку бесплатных AI Читать

https://habr.com/ru/articles/898972/

#Figma #figma_plugin #figma_design #figma_api #design_system #ui_kit #javascript #ai #gemini #нейросеть

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

Привет, Хабр! Меня зовут Вячеслав Таранников, я ведущий Android-разработчик в RuStore, и сегодня расскажу о нашей дизайн-системе, разобрав две ключевые темы: токены и компоненты. Эта статья основана на моем совместном докладе с Дмитрием Смирновым, руководителем команды разработки, — « Как мы создали дизайн-систему для мобильных устройств и ТV на Jetpack Compose ». Мы представили его на митапе «Coffee&Code ✕ RuStore | TechBrew» и теперь делимся основными идеями с вами.

https://habr.com/ru/companies/vk/articles/896134/

#ui #design_system #дизайн_система

Основные принципы создания иконок

Привет, Хабр! Я Маша, продуктовый дизайнер в ОТП Банке. Наш банк последнее время активно развивает дизайн, сегодня хочу поделиться опытом работы с иконками. Сразу скажу, большинство перечисленных принципов вам скорее всего знакомы, но есть некоторые неочевидные нюансы, на которые стоит обратить внимание 👇

https://habr.com/ru/companies/otpbank/articles/894162/

#icons #design_system #product #design #иконки #ux_ui #ux_ui_дизайн

«Да будет свет!», — подумали мы. И стал свет. Краткая история обучения нейросветодизайнера нейросветодизайну

Давным-давно, скажем, этим летом, нас посетила удачная мысль включить повсюду свет и озарить ночные города. Так родился проект по обучению нейросети сложному искусству светодизайна. Разумеется, мы были не первыми, кто до этого додумался, но поскольку бум ИИ удачно наложился на развитие инфраструктуры и появление новых зданий в разных городах РФ (а еще осень, темно, холодно) – было решено взяться за дело. Светодизайн зданий – сложная область, которая удачно сочетает в себе архитектурное проектирование, инженерные достижения, дизайн и человеческий гений. В помощь последнему мы решили добавить искусственный интеллект. Оказалось, что после долгих тренировок он способен:

https://habr.com/ru/articles/853552/

#ml #stablediffusion #design_system #нейросети

Show HN: MynaUI Icons – 1180 Beautifully Crafted Open Source Icons
https://mynaui.com/icons
#ycombinator #figma #tailwindcss #design_system #ui_kit

Мультипродуктовая дизайн-система: как сделать так, чтобы она реально работала

Мультипродуктовая дизайн-система должна обеспечивать консистентность всех продуктов компании, а также ускорять и удешевлять их разработку. Однако в реальной жизни мы видим другое: мультипродуктовые дизайн-системы лишь отчасти выполняют свои функции и, помимо плюсов, имеют ряд существенных минусов. Главный минус — невозможность удовлетворить все потребности всех продуктов (особенно если речь идет о десятках и сотнях), в результате чего неизбежно возникают форки, собственные разработки и другие расхождения, постепенно отдаляющие продукты от единой дизайн-системы. Выходит, что мультипродуктовые дизайн-системы работают, но с большими оговорками. Можно ли сделать так, чтобы они работали лучше? Меня зовут Анастасия Кабалкина, я руковожу дизайном направления FinOps в VK Tech. В этой статье мы с вами разберем проблемы мультипродуктовых дизайн-систем и попробуем их решить небольшой доработкой архитектуры. А если не решить, то хотя бы минимизировать :)

https://habr.com/ru/companies/vk/articles/842412/

#дизайнсистема #design_system #designsystem

[Перевод] Фиаско Фигмы или тёмная сторона последних апдейтов

Этот пост в оригинале (eng) https://www.setproduct.com/blog/dark-side-of-figmas-updates Глава 1: В какой‑то момент всё пошло не так Смотря недавнюю конференцию CONFIG24 , я не мог избавиться от неприятного зуда. Чем сильнее зуд одолевал меня, тем больше приходило осознание – приоритеты Figma сместились с улучшения сервиса на увеличение прибыли. Я неустанно задавал вопросы: Что произошло с Figma, которую мы все так горячо любили? Почему в приоритете деньги, а не список фич от пользователей, которые мы просим? И если Фигма - ФСЁ, то что это сулит дизайн-инструментам в будущем? Провал сделки с Adobe, похоже, стал переломным моментом. Фокус Figma на создании функций с использованием искусственного интеллекта для увеличения количества пользователей - крутой поворот от первоначальной концепции сервиса. Не подумайте, я не против использования искусственного интеллекта, но больш усилий, похоже, затрачивается на что-то "модное", но не особо нужное. Функция автоматического переименования слоев была изюминкой Figma, но ее недостаточно, чтобы компенсировать недостаток внимания к запросам пользователей.

https://habr.com/ru/articles/839888/

#figma #ui_kit #дизайн_система #design_system #ui3 #обновления #интерфейс #интерфейсы #инструмент #дизайн

Большое UX/UI исследование мобильных приложений аптек

Hola, Amigos! На связи Вадим Кононенко и Станислав Дмитриев, руководители проектов агентства продуктовой разработки Amiga. Собрали в одной статье тренды и решения, которые следует учесть при разработке приложений аптек и e-com в целом.

https://habr.com/ru/articles/838726/

#flutter #design_system #дизайн #ux/ui #ux_design #uxисследования #мобильное_приложение #дизайн_приложений #исследование_рынка #исследование_пользователей

UI-дзен: как мы познали гармонию, обновив библиотеку компонентов для дизайн-системы Shoelace

Казалось бы, дизайн-система — это инструмент, который помогает ускорить процесс разработки продуктов, облегчает масштабирование и обновление, обеспечивает единообразие дизайна и пользовательского опыта на всех платформах. Однако мы убедились на собственном опыте, что это не панацея, и если все связанные с дизайн-системой процессы не будут налажены, то для компании она станет ахиллесовой пятой. Привет, Хабр! Меня зовут Виктория Марухняк, я дизайнер интерфейса продукта Polymatica Dashboards. Мы разрабатываем BI-платформу, и нам критически важно проектировать простой и удобный интерфейс, чтобы пользователи могли легко строить и читать аналитические отчеты. В этой статье поделюсь своим первым опытом рефакторинга и обновления дизайн-системы и тем, как это помогло нам наладить общение между дизайнерами и разработчиками. Без прикрас и розовых пони. Дальше много букв и картинок

https://habr.com/ru/companies/slsoft/articles/816289/

#дизайнсистема #ui/ux #uikit #design_system #figma #интерфейсы #polymatica

Автостопом по дизайн-системе. Путеводитель с оглавлением

Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы. - Делать свою или взять готовую? Прыг. - Платформенная или универсальная? Прыг. - Версионировать компоненты или всю библиотеку? Прыг... И ещё много таких «прыгов». Давайте подготовимся к сложному контенту. Закроем глаза, успокоимся и представим идеальную дизайн-систему. Представили? Умные компоненты, продуманные паттерны, подробная документация. Автоматическая генерация кода. Кайф? А то! Только такая дизайн-система оставит нас без работы. Сидит себе бизнес, кормит нейросетевой движок дизайн-системы джобс-ту-би-данами да си-джи-эмами и на выходе получает готовые экраны. Ни дизайнеров, ни фронтов нанимать не нужно. DON'T PANIC!

https://habr.com/ru/companies/ozontech/articles/797311/

#дизайнсистема #ui/ux #uikit #design_system #figma #figma_plugin #ozon_tech

Гайд по работе с ветками (Figma Branch)

Figma Branch (или «ветка») — это функционал, который позволяет создать копию проекта и изменять его независимо от основной версии. Когда работа завершена и нужно внести изменения в основной проект — ветка сливается с master-версией. Всё как у разработчиков. Но чтобы использовать Branch, ваш тариф должен быть Organization или Enterprise. Предпосылки При коллективной работе над проектом, всегда встречаются классические проблемы: что/когда/кем было добавлено в проект и почему компоненты сломались. Я часто видел костыльное решение — складывать готовые экраны и компоненты куда-то в угол канваса, тегать лида комментом, а после ревью — чистить за собой, мрак. Проще, быстрей, дешевле использовать функционал Branch, тем более они идеально подходят для следующих сценариев:

https://habr.com/ru/articles/793772/

#figma #branch #design_system #designer #дизайнеру #дизайн_интерфейсов #фигма #ветки

Подбор цветов для палитры визуализации данных

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

https://habr.com/ru/companies/bimeister/articles/785272/

#визуализация_данных #графики #цветовая_палитра #ux/ui #design_system #uikit #дизайн_система #промышленная_автоматизация #itкомпании

Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн системы

Привет! Меня зовут Ксения Гаврилова, я дизайн-менеджер в Selectel . Определяю, поддерживаю процесс и качество дизайна продуктов в компании, занимаюсь поиском и онбордингом людей в команду, помогаю дизайнерам развиваться. В 2022 году мы создали свою дизайн-систему. Это был сложный и интересный путь. Вместе с командой мы прошли через многое и решили несколько ключевых проблем: наладили коммуникацию между дизайнерами и разработчиками так, чтобы все говорили на одном языке, сделали опыт пользователя в ключевых сценариях консистентным и обновили устаревший фреймворк. В этом тексте я хочу поделиться главными уроками, которые извлекла в процессе. Они будут полезны дизайнерам и разработчикам, лидам и линейным специалистам. Надеюсь, мой опыт поможет вам при создании вашей дизайн-системы и в работе над ней, и вы не допустите моих ошибок.

https://habr.com/ru/companies/selectel/articles/782422/

#selectel #design_system #дизайнсистема #design #ux_design #кейс

[Перевод] Анатомия shadcn/ui

Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui . Вместо того, чтобы распространяться в виде пакета npm , компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui . "Почему код для копирования/вставки, а не библиотека? Идея заключается в том, что вы полностью владеете и контролируете код. Это позволяет вам решать, как именно будут построены и оформлены ваши компоненты. Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды. Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации". На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода. Цель этой статьи — немного изучить архитектуру и реализацию shadcn/ui . Если вы еще не использовали shadcn/ui , я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

https://habr.com/ru/companies/timeweb/articles/781346/

#timeweb_статьи_перевод #shadcn/ui #tailwindcss #react_table #react_hook_form #radix_ui #reactjs #reactjs #react #js #css #design_system #дизайнсистема