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

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

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

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

Архитектура дизайн-токенов: подход, который спасает от хаоса и сохраняет нервы

Привет, я Настя Кутина, дизайнер в студии Code Pilots. В этой статье я расскажу о том, как мы подходим к архитектуре дизайн-токенов, почему от неё зависит устойчивость всей дизайн-системы и как хорошо выстроенная структура помогает командам работать быстрее, чище и без хаоса. Если вы когда-нибудь открывали чужую Figma и пытались понять, почему один и тот же цвет назван по-разному, отступы живут собственной жизнью, а токены выглядят как «история эволюции проекта», — вы знаете, насколько важна правильная архитектура. Я покажу, как можно организовать токены так, чтобы даже при масштабировании не возникало дублей, конфликтов и «магии», понятной только автору. Разберём уровни, принципы, семантику, типографику и то, как всё это складывается в единую, предсказуемую систему, которая облегчает работу и дизайнерам, и разработчикам. Поглядеть

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

#токены #дизайнсистема #figma

Опросили 1000 пользователей о недочётах в интерфейсах, которые осложняют им процесс совершения покупок в интернете

Всем привет! Я Саша, арт-директор

https://habr.com/ru/companies/kislorod/articles/965036/

#uxисследования #ux_design #дизайн_интерфейсов #прототипирование #вебдизайн #usability #ui #опрос_клиентов #дизайнсистема #тренды

Грани полиморфизма в React: паттерн as

Всем привет! Сегодня я возвращаюсь с новой порцией TypeScript- и React-магии. Вместе разберем полиморфизм в React, а именно — паттерн as . Зачем он нужен, как его прикрутить без багов и почему это сделает ваши компоненты в разы круче. Как обычно — всё под катом. Посмотреть

https://habr.com/ru/companies/cloud_ru/articles/962798/

#полиморфизм #react #дизайнсистема

От проблемы к запуску: как превратить результаты исследований в реальные продукты

Привет! Я — Лёша, принципал дизайнер, решаю бизнес-задачи с помощью дизайна уже больше 15-ти лет. Это моя вторая статья из серии посвященной дизайн-процессам, и в ней мы поговорим о втором ромбе системы Double Diamond и о том как же нам теперь закрыть выясненную боль пользователя, и превратить наши идеи в живой, простой, понятный и удобный продукт. Поехали! В первой статье мы выяснили настоящие проблемы и боли наших пользователей, какие у нас есть технические, финансовые и временные ограничения. Благодаря этому мы обзавелись надёжным фундаментом для решения реальных проблем, подтвержденных реальными данными. Теперь пора перейти от проблем к решениям. Если первый ромб был про " Что ?" и " Почему ?", то второй — про " Как ?". Второй ромб так же состоит из двух, потенциально бесконечно повторяющихся внутри до нахождения нужного решения, фаз: Develop (Разработка) и Deliver (Доставка/Внедрение)).

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

#дизайн_интерфейсов #тестирование #прототипы #брейншторминг #дизайнсистема #гипотезы #скетчи #визуализация_данных

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

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

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

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

[Перевод] Как использовать любой CSS-фреймворк в вашем проекте — Часть 2

Переменные Bootstrap — мощный инструмент для управления стилями , но без правильной структуры их тяжело использовать. В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

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

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss #less

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

Меня зовут Света, я дизайнер интерфейсов в DNS. В этой статье хочу рассказать про то, как мы за 6 месяцев прошли путь от интерфейсного хаоса до целостной дизайн-системы, которая изменила не только продукт, но и процессы внутри команды.

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

#дизайн #дизайнсистема #продуктовый_дизайн #процессы_в_командах #дизайн_интерфейсов #компоненты_figma #внутренний_продукт #b2b_дизайн

Дизайн-система как тюрьма

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

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

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

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

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

https://habr.com/ru/companies/2gis/articles/939490/

#дизайнсистема #мультиязычность #арабский_язык #rtl #figma_plugin #ai #арабские_интерфейсы