Индикация клика на стероидах в 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 #дизайнсистема

Hi, my name is Benoit. Quick #introduction :
I am a User eXperience designer, based in Bordeaux – France.
I craft products & services that satisfy users & businesses.
I enjoy transforming ideas into tangible products, refining problems, prototyping solutions & observing people using them.
I am interested in topics around #User_research, #Product_design, #A11Y, #Design_system, #Prototyping, #Front_end.
On my spare time, I do like #Photography, #Board_games, #Comics, & #Cooking.