Как начать работать с Nuxt UI — библиотекой компонентов для Vue и Nuxt

Недавно UI-библиотека Nuxt UI получила серьёзное обновление — версию Nuxt UI 4. Это принесло два больших изменения. Во-первых, теперь можно использовать Nuxt UI не только с Nuxt, но и с Vue напрямую. Во-вторых, все ранее платные возможности (Pro-компоненты, стартовые шаблоны и Figma UI Kit) теперь полностью бесплатны. Всё это хороший повод разобраться, как же устроена Nuxt UI, в чём её преимущества и как начать с ней работать.

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

#nuxt #nuxtjs #vue #vuejs #nuxt_ui #uiбиблиотеки #typescript #ui_kit #web #timeweb_статьи

Open source-стратегии: с чего начать в открытом формате — дизайн-система телекома и мобильного оператора T2

На днях делился подборкой научных статей по open source — одна из них предлагает обращать внимание на определенные управленческие моменты при участии компаний в открытой разработке. Сегодня продолжим обсуждать тему, но в менее академическом ключе и сфокусируемся на примечательном практическом кейсе. В центре внимания — открытая дизайн-система Т2. Как уточняет Сергей @OsipovSV лид данного направления в Т2, разговором с которым я делюсь далее, новую дизайн-систему пока сложно считать полноценным open source-продуктом. Однако для меня этот кейс интересен с точки зрения первых шагов компании в данном направлении.

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

#open_sourceстратегии #открытая_дизайнсистема #ui_kit #интерфейсы #дизайнсистема

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

MutationObserver + React: меняем ошибки UI Kit без патча библиотеки

Привет, на связи снова я – React-разработчик Дмитрий. Сегодня отвлечемся от теории и разберем конкретный случай и какое решение для него использовалось. При работе с готовыми UI-библиотеками часто возникает небольшая проблема — компонент хорош, но его поведение нельзя настроить под требования конкретного случая. Я столкнулся с этим на практике, когда в используемой версии UI Kit не было возможности кастомизировать тексты выводимых ошибок, а бизнес-требования четко задали формулировки. В моём случае это был компонент для загрузки файлов. Он работал исправно — позволял выбрать файл, проверял его размер и формат и при ошибках показывал сообщение. Проблема была только в тексте этих сообщений. Нужно было использовать просто другую формулировку текста ошибки. Собственно, выглядит компонент загрузки файла вот так:

https://habr.com/ru/companies/gnivc/articles/949862/

#mutationobserver #javascript #Reac #reactjs #reactjs #ui_kit

The role of a user persona in UX and how to create it

A lot of articles and guides on how to create an effective UX design for a software product mention “sticking to a user persona” in order not to waste efforts and resources on a non-target audience. What is a user persona, how to define it, and how can it help the UX team in finding the best design solutions for a product?

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

#ui #uikit #ui_testing #ui_kit #uitableview #uicollectionview #uiтесты #uix #ux #ux_design

Рецензия на переводную книгу “Законы UX-дизайна, 2 издание”

Сегодня UX-дизайн уже не воспринимается как нечто «дополнительное» к разработке приложений и сайтов. Это ядро цифрового продукта, а UX-дизайнер — не просто оформитель, а архитектор пользовательского опыта. Этим ценны фундаментальные и хорошо структурированные знания из книги « Законы UX‑дизайна, 2 издание » Джона Яблонски. В ней автор пишет о том, как люди воспринимают интерфейсы, принимают решения и реагируют на взаимодействие с системами, — и эти знания , — как раз тот самый профессиональный минимум.

https://habr.com/ru/companies/ssp-soft/articles/917846/

#ux_design #uxкоманда #ux_для_новичков #uxстратегия #ux #ui #ui_kit #uix

Эволюция Angular с колокольни UI-Kit-разработчика

На этой неделе команда Angular отметила значимый юбилей в истории развития своего фреймворка — 20-ю мажорную версию! Лучше повода не найти, чтобы удариться в ностальгические воспоминания про путь развития Angular за последние 5 лет — за десять последних мажорных версий. Предлагаю нестандартный подход к изучению темы. Возьмем непопулярную точку зрения: мой многолетний опыт разработки огромной коллекции библиотек с компонентами под Angular — продукт под названием Taiga UI. В статье мы опустим многие заезженные фичи каждой мажорной версии Angular и сфокусируемся на кажущихся мелочах, которые стали значимыми шагами в истории развития нашего семейства библиотек. Я постараюсь на время статьи дать примерить шкуру разработчика Angular UI Kit!

https://habr.com/ru/companies/tbank/articles/914260/

#angular #taiga #taiga_ui #taiga_family #ui_kit #uikit #open_source

ИИ-челлендж. Май 1

Моему ТГ-каналу про веб-дизайн из нейронок уже больше двух лет. И я запустил челлендж для себя и всех желающих дизайнеров ) Подробнее

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

#ui #ui_kit #uix #дизайн #вебдизайн #ии #ai #figma

Почему не дружат фронтендер и дизайнер: работающие техники общения между отделами

Привет! Меня зовут Алексей Песоцкий, я фронтенд-тимлид в AGIMA. Противостояние дизайнеров и разработчиков носит уже почти легендарный характер. Этой теме посвящены десятки статей, видосов и докладов. А отношения отделов ставят в один ряд с другими фундаментальными конфликтами: кошки и собаки, кому дует и кому душно, Хельга и Арнольд. Но мы в компании уверены: чтобы лучше понимать друг друга, нужно просто следовать элементарным правилам. Я провел небольшой аудит статей по теме, понаблюдал, как эта коммуникация устроена у нас — и решил напомнить всем, почему для дружбы фронтендера и дизайнера нет никаких препятствий.

https://habr.com/ru/companies/agima/articles/909032/

#frontendразработка #дизайн #управление_разработкой #webразработка #webдизайн #ui_kit #figma

Как я написать плагин для 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 #нейросеть

The role of microinteractions and small details in UX design

Microinteractions play a huge role in UX design despite being labelled “micro”. They include all the small details you can find in a software product, i.e. animations, emotive reactions, clicks, vibrations, etc. Not only do they make it more interesting and joyful for users to interact with a product, they also help ease the navigation process and make it more intuitive by providing important information. Which types of microinteractions can be used in apps, what makes them a vital part of software products, how to implement them correctly and which common mistakes to avoid when designing small details? Types of microinteractions

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

#ui #uikit #ui_kit #ui_testing #uitableview #uicollectionview #uix

Чем полезен Server Driven UI

Привет! Меня зовут Олег Иванов, я руководитель мобильной разработки в Московском кредитном банке. Сегодня поговорим о Server Driven UI вот по такому плану: - что это вообще за технология - из чего она состоит - рассмотрим наши подходы к ее реализации Начнем с терминологии: SDUI (Server Driven UI) — это пользовательский интерфейс, управляемый сервером. Что такое пользовательский интерфейс? Среда, с помощью которой пользователь взаимодействует с программным обеспечением через приложения. Обычно он состоит из множества экранных форм, которые и ведут пользователя по флоу до какого-то определенного результата. Если абстрагироваться от назначения экранных форм, то схематично User Flow можно представить так:

https://habr.com/ru/companies/mkb/articles/885648/

#SDUI #UI_kit #ios #android #moblie #мобильная_разработка

Дизайн и разработка — как передать макеты чтобы не было слёз

Привет, Хабровчане! Я Рома — продуктовый дизайнер Tomoru.Team. Дизайнеры и разработчики работаю вместе над перекладываем макетов из Фигмы в прод. В этой статье хочу рассказать как за полгода мы с командой смогли выстроить достаточно рабочую схему по передаче макетов без болей и горения пятой точки

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

#ux #ui #ui_kit #ui_testing #дизайн #дизайнеру #дизайн_интерфейсов #приложения #дизайнеры

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

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

Этот пост в оригинале (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 #обновления #интерфейс #интерфейсы #инструмент #дизайн

10 certain indicators of a well-done UX design

UX design is the backbone of any digital product like an app or a website. It’s like a “dark horse” of a product: it’s something that is not always visible to a naked eye, but without it a product would be very hard or even impossible to use. In the meantime, it’s very easy to tell apart an optimized, well-done UX from a poorly implemented one. The latter can not only turn users away from a product, but also make a negative impact on the brand perception as a whole, as it plays a great role in customer satisfaction. Of course, each product has its own UX quality criteria, as it depends on different factors like the theme of a product, age of the target audience and so on. But there are also a few general indicators of a well-done UX that are applicable to any product no matter what. Let’s discuss them:

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

#ui #ui/ux #uikit #ui/ux_дизайн #ui_kit #ui_testing #uitableview #uicollectionview #uix #uiтесты

Полный гайд по UI-китам: как их создавать, подключать и ничего не бояться

Привет! Я Леша Кузьмин, главный про фронтенду в

https://habr.com/ru/companies/agima/articles/825080/

#uikit #reactjs #ui_kit #css #headless

Taiga UI: итоги 2023 года

Заканчиваются рабочие дни уходящего года, а значит, самое время подводить итоги наших трудов. За 2023 год у проекта Taiga UI появилось более пятидесяти релизов, больше двух тысяч вмерженных PR-ов и свыше пятисот закрытых issue. Taiga UI — это огромный Angular UI Kit, который активно используется в сотне продуктов компании Тинькофф и популярен за ее пределами. Разработка проекта много лет идет в Open Source, собирая свою аудиторию по всему миру. Продолжу ежегодную традицию и напомню пользователям библиотек о самых интересных изменениях за последний год.

https://habr.com/ru/companies/tinkoff/articles/782924/

#taiga_ui #taiga #ui_kit #ui #taiga_family #angular #open_source