Обзор новых возможностей дизайн-систем в Figma и других инструментах

Насыщенная мякоткой мини-подборка о дизайн-системах:

  1. Ben Callahan «Maturing Design Systems»: Smashing Magazine готовят к выходу книгу
  2. Figma: Вот-вот запустит пачку фундаментальных улучшений работы с дизайн-системами

Во-первых, гибкая работа с темами оформления на базе стандартных переменных.

Во-вторых, слоты в компонентах — это область внутри стандартной обвязки, в которой можно разместить плюс-минус любые элементы.

В-четвёртых, родной импорт/экспорт переменных.

А также визуальная привязка компонентов в Figma и коде, выход MCP-сервера из беты, генерация и импорт компонентов в Figma Make, улучшение производительности.

  1. Nathan Curtis: Смысл слотов в компонентах. Как они позволяют добавить гибкости дизайн-системе и как их будет делать Figma
  2. Nathan Curtis: Подход с абстрактным описанием компонентов дизайн-системы через структуру их свойств, стилей, состояний и вариантов. Это может позволить генерировать компоненты на основе такой спецификации для любых фреймворков, чтобы не создавать их вручную — аналогично идее с генераторами токенов

Anova: Плагин от Nathan Curtis для Figma, который описывает спецификацию компонентов через структуру их свойств, включая состояния и варианты. Как он работает.

  1. Storybook 10: Полный переход на версию ESM для модулей JavaScript помог снизить размер фреймворка. Удобная возможность посмотреть или отредактировать компонент в стороннем инструменте и другие улучшения.  
  2. Яндекс 360: Дизайн-команда рассказывает о своей дизайн-системе Орбита. Как она устроена, как создавалась, как развивается. 
  3. Razorpay: Процесс поддержки компонента. Это детальная памятка по всем этапам и краевым ситуациям. 
  4. Tony Ward: Размышляет на тему измерения главного показателя дизайн-системы — покрытия реальных продуктов. Его идея — визуально отмечать части экранов, которые используют компоненты, а не опираться на абстрактные метрики. 
  5. Figmentation: Плагин для Figma автоматически собирает спецификацию компонента на основе токенов. 
  6. Ness Grixti: Типичные проблемы с цельностью дизайн-системы, которые возникают по мере роста количества её пользователей среди продуктов

Подписывайтесь на Telegram Дайджест продуктового дизайна.

Начать дискуссию