Свежий мини-выпуск о дизайн-системах, которые цветут и пахнут — многие уже простудились на их похоронах:
 
1. Gov.uk: Переосмысление беклога. Как меняли ранжирование через опрос команд в организации.
 
2. Maximilian Speicher и Guido Baena Wehrmann: Формула расчёта ROI. Она достаточно сложная, но полезная точка зрения на проблему. Шаблон для расчётов.
 
3. Подкаст с Ben Callahan из Sparkox. Толковые мысли о их модели зрелости внедрения дизайн-системы и особенностях этого процесса.
 
4. Cole Peters: Разумные ограничения, реализованные через шкалы в токенах. Сказано не так много нового, но структурировано и подано удачно.
 
5. Salesloft: Адаптация под требования accessibility с помощью токенов.
 
6. Steve Dennis: Хорошие иллюстрации логики работы токенов. Он описывает только цвета, но общий подход понятен.
 
7. Docusaurus 2.0: Вышла вторая версия генератора сайтов-документаций и живых гайдлайнов. Много возможностей настройки, интеграция компонентов, тематизация и т.п.
 
8. Cloudscape: Команда Amazon Web Services опубликовала свою дизайн-систему.
 
9. System.css: Простой CSS-фреймворк, стилизованный под старые операционки MacOS.
 
#designsystems

Сегодня — всё, что попадало в дайджест о дизайн-системах за последние месяцы:
 
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
 
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
 
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
 
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
 
5. Intuit: Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
 
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
 
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
 
8. Wikipedia: Как искали единую сетку для редизайна.
 
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
 
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
 
#designsystems

Большие и маленькие статьи о дизайн-системах, ну и всякое такое на тему:
 
1. Brad Frost: Глоссарий терминов и понятий современной дизайн-системы в большой компании. Не везде нужно всё из описанного, но оно востребовано на масштабе. Его выступление на эту тему.
 
2. Josh Clark: Предлагает смириться с тем, что команда дизайн-системы не успевает за скоростью изменений в продуктах и пересмотреть её роль. Это инфраструктурная часть, которая должна быть надёжной и продуманной. Её роль ― не придумывать любые возможные решения, а курировать уже созданные в продуктовых командах. Сама мысль не новая, но предложение идти от этой реальности ― достаточно свежее и абсолютно разумное.
 
3. Material Web: Вышла первая версия библиотеки компонентов для веба.
 
4. Rama Krushna Behera: Памятка по созданию компонента. От проектирования логики работы до реализации и гайдлайнов. Шаблон в Figma.
 
5. Список конференций и митапов на тему в разных странах мира.
 
6. Wise: Доработка цветовой палитры под требования accessibility. Часть 2 говорит о типографике, иконках и других аспектах.
 
7. Deliveroo: Обновление цветовой палитры. Как она стала лучше в плане accessibility.
 
8. Odido: Запуск дизайн-системы (слияние голландских T-Mobile и Tele2). Как выбирали стратегию перехода на неё и организовали иерархию стилей.
 
9. zeroheight: Победители их награды этого года.
 
10. Jonathan Dallas: Советы по именованию переменных в CSS.
 
11. Netlify: Канонически обновили интерфейсы под ребрендинг через дизайн-систему с помощью инструментов Storybook.
 
12. Intuit: Инструкция по настройке синхронизации переменных в Figma и токенов их дизайн-системы.
 
13. Sam Gordashko: Шпаргалка по использованию токенов в Figma на основе множества сторонних материалов.
 
14. Вышел Storybook 7.5. На подходе версия 7.6 с развитием инструментов тестирования.
 
#designsystems

Небольшая, но жирнючая, как приближающийся оливье, подборка нового о дизайн-системах:
 
1. Rosenfeld Media выпустили книгу Dan Mall «Design That Scales».
 
2. Атомаро: Ростелеком сделал отчуждаемую версию своей дизайн-системы. Можно поставить её себе и настроить свою тему оформления. Под капотом React с токенами.
 
3. Design Systems Database: Ещё один каталог дизайн-систем.
 
4. StyleX: Фреймворк для токенов Меты, который используют все их продукты (Facebook, Instagram, Whatsapp, THreads).
 
5. Figma: Свежие обновления переменных. Что уже внедрили и как планируют развивать.
 
6. Luis Ouriach: Подробная инструкция по созданию компонентов в Figma и организации дизайн-системы в инструменте в целом. Он стремится создавать их для реального и широкого использования. Рекомендации по организации библиотек.
 
7. Виталий Капустьянов: Подгонка толщины линий иконок под разные размеры шрифта.
 
8. Вышел Storybook 7.6. Но уже есть ранняя версия 8.0.
 
#designsystems

Первая в этом году мини-подборка о дизайн-системах:
 
1. Adobe Spectrum 2: Вышла вторая версия. Они добавили эмоциональности к визуальному языку, дополнили цветовые схемы, срифмовали иконки к фирменному шрифту. Также добавили коллекцию компонентов на react без стиля, но с трушной поддержкой accessibility. Angelie Herreria-Tagle рассказывает, чем занимается program-менеджер в команде.
 
2. Streamline: Шикарная методичка по работе с сеткой для пиктограмм. Как балансировать набор иконок с её помощью.
 
3. Storybook: Планы на 2024 год. Выйдет версия 8.0 и расширится поддержка фреймворков помимо React.
 
4. Razorpay Blade: Как команда дизайн-системы отслеживает её использование и в целом связывает дизайнеров и разработчиков через Figma.

5. Zach Saucier: Шпаргалка по container queries и единицам размеров в них.

6. Brad Frost: Рассуждает об инициативе универсального фреймворка, который могли бы использовать любые команды в мире. Если такое и возможно, то это будет путь длиной лет в десять.
 
7. Zara Soltani: Советы по именованию токенов.
 
8. Nathan Curtis: Десяток мифов.
 
#designsystems

Нашёл несколько потеряшек про дизайн-системы в забытых вкладках, а то им было там одиноко:
 
1. Componly: Сервис помогает отслеживать покрытие продуктов. Это одна из главных метрик успешности, но сделать это по уму крайне сложно. Видео-презентация.
 
2. Ness Grixti: Методичка. Как создавать и поддерживать их.
 
3. Razorpay: Отличная памятка по организации дизайн-системы в Figma.
 
4. Storybook: Вышла бета 8 версии с улучшенной поддержкой мобильных, автоматизрованными визуальными тестами и в целом инструментами тестирования, серверными компонентами. Также обновилась версия для React Native.
 
#designsystems

Отложка неотложных новостей и свежих материалов про дизайн-системы:
 
1. Nathan Curtis: Новая серия статей посвящена смене поколения дизайн-системы. Первая часть даёт определение, вторая говорит о планировании, третья о выкатке, четвёртая о именовании и последняя о новом цикле.

2. Kevin Coyle: Собрал для Brad Frost примеры использования алгоритмических инструментов в дизайн-системах. Код компонентов, тестирование, документация. Его презентация на Smashing Conf.

3. Storybook 8 вышел из беты. Улучшенная поддержка мобильных, автоматизированные визуальные тесты и в целом улучшенные инструменты тестирования, серверные компоненты, отвязка привязки к React для других фреймворков. Также появилась бета-версия плагина Visual Tests для визуального тестирования компонентов.

4. Павел Киселёв: Подход к созданию дизайн-системы в Figma с гибкой тематизацией для разных брендов. Он сделал плагин Source Foundation, который помогает в этом, а также приложил кучу примеров.

5. VK для бизнеса: Генератор токенов и компонентов в коде на основе Figma.

6. Dave Rupert: Выделяет толковую мысль: настоящая ценность дизайн-системы проявляется в триггерные моменты. Он составил пример таких событий вроде обновления бренда.

7. Javier Cuello: Чеклист по дизайну и тестированию компонентов в Figma.

8. НЛМК: Дизайн-система металлургической компании. Есть компоненты в коде и Figma.

9. Supernova 2.0: Вышла вторая версия инструмента для описания дизайн-систем. Добавили совместную работу над документами и быстрый глобальный поиск.
 
#designsystems

Только я собрался собрать мини-подборку о дизайн-системах, как Figma провела мини-конференцию Framework на тему 16 апреля (и сделает ещё пару доп.событий 18 и 23 числа).
 
Во-первых, запустили много фешенебельных новых функций: шрифтовые и градиентные токены, аналитика использования библиотек. И, самое главное — родная связка с реальным кодом компонентов через Code Connect, благодаря которой разработчики могут получить его прямо из макета (причём это не мусорная автогенерация).
 
Во-вторых, выпустили серию кейсов о командах дизайн-систем:
 
— Компонентный спринт в Washington Post. Дизайнер и разработчик в паре про прорабатывают все вопросы в течение 10 дней.
 
— Как переезжали на Figma в Carvana и Alaska Airlines.
 
Была ещё пара общепроцессных статей, но они водянистые. Зато неплохой обзор плагинов для связки кода и дизайна в Dev Mode.
 
Бонус — несколько статей о новых возможностях переменных в CSS:
1. Michelle Barker: Относительно новая функция color-mix(), которая помогает делать вариации цветов в токенах.
 
2. Bramus van Damme: Функция light-dark(), которая позволяет задавать цвета для обычной и тёмной темы оформления.
 
3. Lea Verou: Предлагает отличную идею групп для переменных. Они могли бы упростить описание шрифтовых наборов, цветовых градаций и других связанных токенов.
 
#designsystems

Мини-подборки тема — ваша дизайн-система:
 
1. Brad Frost: Концепция «рецептов». Это специфичные компоненты, которые нужны конкретному продукту в частной ситуации и добавлять их в общий каталог нет смысла. Хотя они должны строиться по тем же принципам.

2. Lukas Oppermann: Платиновая памятка по организации работы над дизайн-системой в Figma. Как вести версионирование, обновление компонентов, историю изменений — дотошно и основательно.

3. Завтра стартует ежегодная презентация Google I/O о будущем Android и Material Design. Liam Spradlin тизерит толковые рассказы от дизайнеров, James Williams показывает обновления компонентов для Android, а Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета).

4. Автомобильный интерфейс Snapp Automotive может иметь разные темы оформления для разных автопроизводителей. Casper Kessels рассказывает об архитектуре токенов и компонентов в Figma для этого.

5. Brad Frost: Мусор в дизайн-системе неизбежен из-за природы продуктовой работы. Но его можно минимизировать.

6. Andrea Zilibotti: Создание дизайн-системы Ritmo для музыкального сервиса Musixmatch.

7. Subframe: Инструмент позволяет собирать интерфейс из компонентов в коде, а потом докручивать его под себя.

8. Supernova: Опрос около 200 дизайнеров и разработчиков о том, как они используют токены.
 
#designsystems

Ежегодная конференция Google I/O 2024 прошла 14 мая в онлайне (в основном). Как и в прошлый раз, всё внимание ушло на битву ИИ-вооружений — выше крыши новостной пищи про Gemini, маловато про Android и Material Design. Но чуток есть:
 
ANDROID 15
Детальный обзор экранов и функций. Самое заметное:
— Визуальное облегчение статусной строки
— Можно делиться не всем экраном, а его частью
— Обновление интерфейса камеры
— Постоянная панель приложений на больших экранах
— Предиктивная логика возврата назад в истории навигации
— Пары приложений, которые сразу запускаются с разделением экрана
— Насильное включение тёмной темы даже для приложений, которые её не поддерживают
 
Что нового по функциям:
— Приватный раздел, где можно спрятать приложения под пароль.
— Защита данных от воровства (телефон определит, если его вырвали из рук и побежали наутёк).
— Отслеживание вредоносных приложений в реальном времени.
— Можно сфотографировать билет или карту лояльности -- Google Wallet отсканирует её и добавит в коллекцию.
— ИИ будет анализировать телефонный разговор в реальном времени, чтобы словить типичные вопросы мошенников и предупредить пользователя.
— Project Gameface позволяет управлять телефоном глазами и мимикой людям с ограниченными возможностями.
 
Gemini полностью встроен в Android. Он запускается как слой поверх текущего приложения. Можно обвести что-то на экране телефона и получить ответ. Можно задать вопрос о видео с YouTube или PDF. Ещё он будет искать внутри Google Photos, объяснять решение проблемы из видео-ролика.

Обновления компонентов Material Design.

Бета-версию уже можно поставить себе.
 
Немного новостей по другим платформам
— Анонсировали раннюю версию WearOS 5. Расширение возможностей для сторонних циферблатов и API для отслеживания здоровья, повышение энергоэффективности.
 
— Обновление Android Auto (платформа доступна уже на 200 млн машинах). Можно передавать медиа с телефона через Google Cast, есть новые приложения.
 
— Google Home открывает свою платформу для сторонних продуктов.
 
Другие новости про Gemini
— Новые версии модели Gemini 1.5: более компактная Flash и совсем портативная Nano для запуска на устройстве.
 
— Обновились модели Imagen и Veo для генерации картинок и видео.
 
— В Gmail и Docs появится боковая панель для работы с Gemini.
 
— Project Astra использует камеру телефона для анализа того, что видит пользователь. Они сделали демо с очками дополненной реальности.
 
— Gemini Live поможет подготовиться к презентации или собеседованию — с ним можно вести диалоги. Виртуальный коллега в Google Workspace сможет мониторить статус проектов, поможет раскопать контекст из предыдущей переписки, анализировать тренды и организовывать информацию.
 
— Генеративные ответы в результатах поиска Google теперь доступны в США.
 
— Цифровые водяные знаки для сгенерированного видео.
  
Полезные выступления (Liam Spradlin выделил толковые для дизайнеров):
— Адаптивность между разными устройствами в дизайне, на базе Material 3 и разработке
— Поддержка accessibility
— Новые возможности работы с Material Design на Compose
— Оптимизация интерфейсов для больших экранов
— Android Auto
— Нюансы реализации хорошего UX
— Работа с генеративным ИИ на телефонах
 
Abla Hamilton учит использовать умного помощника Google Gemini для анализа дизайна на базе Material Design (например, он подскажет какие компоненты нужно использовать для конкретного макета).

Вот такая окрошка новостей на тархуне (такая вся неоднородная), отправленная со смартфона Vivo (меметичная аналогия навязчивости Gemini). 10 июня сравним всё это с обновлением iOS.
 
#materialdesign #designsystems

Новости дизайн-систем подъехали:
 
1. Nathan Curtis: Как может быть устроена поддержка нескольких платформ в команде. Он приводит несколько характерных примеров.
 
2. Material Design: Добавили концепцию слот-компонентов. Это область компонента, в которую можно добавлять другие интерфейсные решения, не заданные изначально. Подход позволяет командам добавлять свои уникальные вариации под редкие задачи.

3. Figma: Как они привели в порядок свою дизайн-систему Figma Pattern Library для запуска нового интерфейса UI3 и обновлённого сайта.
 
4. Brad Frost: Как отрабатывать разные ситуации, где дизайн-система не работает для конкретного продукта.
 
5. Brad Frost: Большая сессия вопросов и ответов.
 
6. Новости инструментов:
— Figma: Большое обновление работы с токенами и параметрами компонентов в интерфейсе для дизайнеров и разработчиков.
 
— Storybook 8.4: Быстрое тестирование компонентов прямо на их странице (статус теста всегда на виду), сильное уменьшение размера самого фреймворка, теги и фильтрация по компонентам, поддержка Svelte 5 и запуск Storybook React Native 8.

7. Примеры:
— eBay Playbook. Дизайн интерфейсов и бренда. Правда, вместо реальных компонентов — скриншоты.
 
— Meta Horizon OS UI Set: Дизайн-система для платформы дополненной реальности от Меты. Пример инструкции по использованию.
 
— Yandex Cloud. Библиотека в Figma.
 
#designsystems

Небольшой подгон свежего о дизайн-системах:

1. Brad и Ian Frost: Курс по токенам в дизайн-системах. Они ушли из легендарной компании Big Medium, где делали историю с нереальным количеством консультаций по дизайн-системам и буду фокусироваться на обучении и развитии отрасли.

2. Nathan Curtis: Наглядно показывает проблемы с описанием состояний компонентов в Figma. Они плохо сочетаются с тем, как это описано в коде..

3. Figma: Советы дизайн-команд по созданию и поддержке «живых гайдлайнов».

4. Захар: Инструкция по определению цветовых токенов в Figma и экспорту в код.

5. D'Amato: Пытается разобраться, почему большинство дизайн-систем начинаются с компонента кнопки. И приводит критерии, по которым это лучший первый шаг.

6. Vishnu Haridas: Советует помнить не только о минимальном контрасте цвета, но и о максмальном. Иначе многе сайты с тёмной темой оформления выжигают глаза.

7. React 19: Он в том числе поддерживает веб-компоненты.

8. Storybook: Появилось встроенное тестирование компонентов на accessibility. А компоненты можно размечать тегами для поиска и статуса.
 
#designsystems

Выпуск о дизайн-системах №53:
 
1. On Theme: Подкаст с именитыми гостями.
 
2. Figma: Советы по анализу использования компонентов дизайн-системы от дизайнеров из athenahealth и Microsoft. Они обновили аналитику библиотек, которая даёт больше возможностей.

3. Ozon: Связка трёх локальных дизайн-систем в разных частях компании для покупатеелй, продавцов и складов.
 
4. Adobe: Как команда дизайн-системы работает с её пользователями внутри компании. Собирает обратную связь и пожелания, объясняет, помогает.

5. Michael Haggerty-Villa: Шаблон для подготовки описания гайдлайнов.
 
6. Сбер: Обзорный рассказ создании дизайн-системы Nova.
 
7. WhoCanUse: Универсальный анализ восприятия пар цветов людьми с разными ограничениями зрения.
 
#designsystems

Свежий пакет обновлений о дизайн-системах:

1. Design System Tactics: Серия методов и статей по менеджменту дизайн-систем от Ness Grixti из Wise. Анонс и обзор.

В одной из публикаций она просит помнить о том, что дизайн-система должна соответствовать зрелости самой компании. Если проталкивать более сложные внедрения там, где в них меньше потребности — можно сжечь зря кучу ресурсов и здоровья. Она предлагает оптимальный план действий для разных ситуаций.

2. Design Tokens Name Generator: Romina Kavcic запустила генератор названий токенов для разных категорий.

3. Ahmed Shadeed: Как работают относительные цвета в современном CSS. Он здорово продвинулся и позволяет даёт хорошую гибкость в цветовой системе, чтобы упростить токены.

4. ВкусВилл: Технологическое решение дизайн-системы мобильных приложений. Сергей Мухин описывает процесс работы над ней.

5. Figma: Много небольших, но полезных обновлений для работы с дизайн-системами. Они также собрали список рекомендуемых плагинов на тему.

6. eBay: Как работает команда дизайн-системы.

7. Alice Packard: Нетривиальные примеры использования режимов переменных в Figma для самых разных целей и задач.

8. Alex Williams: Как улучшить контраст цветов в тёмной теме оформления для пользователей с нарушениями зрения.
 
#designsystems

Material Design 3 в версии Expressive показали раньше срока — обычно все анонсы вокруг Android случаются на флагманской конференции Google I/O.
 
Дизайн-система стала намного более выразительной и эмоциональной. Больше ярких цветов, типографической гибкости и звонкости, пополнение коллекции форм-масок, новые компоненты с акцентом на разнообразии форм.
 
Одна из самых интересных частей — анимация с фокусом на «пружинках» и физике движения в целом. Особенно здорово это выходит в оркестровках — например, когда соседние уведомления в панели уведомлений немного отъезжают вместе с тем, за которое потянули пальцем.
 
В общем, всё с целью уменьшить однообразность приложений на платформе. Самый крутяк, что Google провели уйму пользовательских исследований эмоции. Это интересно ещё и как багаж методологий по проверке эмоционального дизайна — в статье достаточно подробно рассказано о ней и выводах. Хотя некоторые вроде «пользователи в 4 раза быстрее находили кнопку отправки письма» не сильно помогают защищать эмоцию — ясен-красен кнопку заметят, если она стала в разы больше, получила цветную подложку и переехала в более заметное место на экране.

Часы тоже обновились в этом стиле.
 
Больше деталей про Android 16 расскажут 20-21 мая. Но уже тизернули защиту от телефонных мошенников. А ещё — свою версию живых уведомлений. И прикрутили Gemini к часам, авто и ТВ.
 
#materialdesign #designsystems

Мобильное приложение для платежей

• 384 экрана премиум-класса (самое большое количество на рынке)
•  Светлый + темный режим. Мобильная + десктопная версия
• Персонализируйте свои проекты всего за несколько кликов (выберите семейство шрифтов, цвет, фирменную подсветку, иллюстратор, а затем перетащите более 100+ встроенных компонентов)
• Совместим с Figma, Sketch и другими.
• Встроенная дизайн-система

#DesignSystems #UIk 

Открыть в Figma

Источник

👨 Дизайн-телега

Понедельничный подгон свежего о дизайн-системах:
 
1. Figma: Запустили свой сервер для подключения через протокол MCP, который помогает ИИ-продуктам и сервисам общаться между собой. Например, редакторы кода VS Code с Copilot, Cursor, Windsurf и Claude Code могут собрать код на основе макетов. Помимо сборки прототипов это упрощает работу с дизайн-системой — вот, например, быстрое создание компонента в Storybook на основе его версии в Figma (на основе инструкции по настройке MCP Figma от Colin Matthews). MCP — одна из самых крутых вещей, которая случилась с интернетом за последние годы и Microsoft считает этот протокол новым HTTP за его простоту и масштабируемость.

2. Шикарная коллекция простых кусков интерфейса в виде wireframes, которые отлично подходят для документации дизайн-системы. Версия для Figma.

3. SAS: Мощный пример работы с локализацией в дизайн-системе в Figma. Помимо работы с текстом они адаптировали базовые токены вроде размеров, чтобы учесть особенности разных языков.

4. Diataxis: Фреймворк помогает грамотно структурировать и понятно писать гайдлайны и техническую документацию в целом.
 
5. Storybook 9: Встроили инструменты тастирования Vitest: тесты взаимодействия, accessibility и визуальные, а также сделали карту покрытия тестами. Так же ужали код наполовину, сделали работу с React Native удобнее и добавили глобальные состояния (например, можно посмотреть компонент в тёмной теме, нужном размере экрана или локали),
 
6. Adobe: Как работает дизайн-система Consonant для маркетинговых материалов, которая связана с их основной дизайн-системой Spectrum.
 
7. Brad Frost: Примеры ситуаций, которые может объединять дизайн-система. Разные продукты, подбренды, маркетинговые кампании, цветовые режимы, технологические фреймворки.
 
#designsystems

Дизайн-система DECATLON

• Темный режим

#DesignSystems #UIk

Открыть в Figma

👨 Дизайн-телега

Немного свежего о дизайн-системах:
 
1. Brad Frost: Запустил сертификацию по своему фреймворку дизайн-систем «атомарный дизайн». Это курс, который подтверждает знания. Он также работает над вторым изданием своей книги.
 
2. Figma добавила в интерфейс эффект жидкого стекла, который точно повторяет гайдлайны Apple. Сами Apple выпустили официальный UI Kit для Figma.
 
3. Material Expressive 3: Как задавать свои стили анимации. Они будут переиспользоваться во всей дизайн-системе.
 
4. Magic Patterns: Инструмент алгоритмического дизайна может создать прототип сайта на основе текстового запроса, скриншота или просто скопировать существующий сайт. Он создаёт библиотеку компонентов, которые также можно генерировать и дорабатывать по текстовому запросу. Есть расширение для браузера, где можно выделить элемент на экране и создать компонент для него.
 
5. Colin Matthews: Инструкция по созданию прототипов для проверки продуктовых гипотез с помощью ИИ-инструментов. Он показывает, как сгенерировать компоненты разными способами и дальше собирать из них прототипы.
 
6. Storybook: Как работают новые встроенные тесты компонентов в версии 9. Они покрывают взаимодействие, визуал и accessibility.
 
7. DOC: Цель, смысл и природа целостности в дизайне. Что она даёт и для чего к ней нужно стремиться.
 
8. Obra: Библиотека иконок на React и Svelte, которую можно подключить к дизайн-системе.
 
9. SmoothUI: Фреймворк дизайн-системы на React и TailwindCSS, где компоненты мощно прокачаны анимацией.
 
10. 9ui: Фреймворк дизайн-системы на React на базе Tailwind. Он даёт компоненты без стиля, которые можно докручивать под себя.
 
11. Julia Wong: Токены для тактильной (haptic) обратной связи в млбильных приложениях.
 
#designsystems

70+ модальных и всплывающих окон UI K

• Чекбоксы и всплывающие окна
• 100% auto layout
• Цвета и типография

#DesignSystems #UIk 

Открыть в Figma