Как понять дизайн системы?

Одной из первых задач на моей текущей работе было собрать и описать все компоненты, которые используются в продукте, попутно дополняя и улучшая детали. То есть, по сути, создать Figma-файл с дизайн-системой, который впоследствии будет перенесен в код.
В первую очередь я задался поиском качественных примеров, чтобы спиздить переиспользовать лучшие практики. Сегодня хочу поделиться своим топом дизайн-систем, реализованных в Figma, на которые стоит посмотреть, если вы хотите понять, как грамотно выстроить свой Figma-файл так, чтобы все, кто туда заходят, сразу понимали, что к чему 🚬

Atomaro
Тут постарались ребята из Ростелекома. Отдельный лайк за классно выстроенную цветовую схему на variables, которая позволяет, меняя один цвет, переключать все связанные с ним цвета. Например, таким образом можно в один клик поменять брендовый цвет и всю структуру цвета Primary..
Также хочу отметить концепцию с слотами внутри компонентов. Слот — это пустой контейнер у которого внутри свойство swap instance. Если у вас есть компоненты с произвольным контентом (например, карточка), то с помощью слота вы сможете размещать внутри произвольный контент, не детача компонент

Taiga UI
Дизайн система от Т Банка. Есть светлая и темная тема, а также крутой сторибук в котором намного больше компонентов и все можно потыкать

EPAM UUI
Очень структурный подход от команды EPAM. Почти у всех компонентов есть ссылка на гайдлайны использования и, помимо этого, есть отдельный файл с паттернами Радует то, что дизайн система не прекращает развиваться, совсем недавно вышло свежее обновление

А какие дизайн-системы вы считаете эталонными? Поделитесь своими находками 🤨

💬 Тултип