Насыщенная мякоткой мини-подборка о дизайн-системах:   1. Ben | Дайджест продуктового дизайна

Насыщенная мякоткой мини-подборка о дизайн-системах:
 
1. Ben Callahan «Maturing Design Systems»: Smashing Magazine готовят к выходу книгу.

2. Figma: Вот-вот запустит пачку фундаментальных улучшений работы с дизайн-системами.

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

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

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

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

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

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

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