Дизайн-системы: материалы и примеры
Подборка для тех, кто собирает или развивает дизайн-систему. Здесь есть практические разборы, библиотеки компонентов и примеры работающих систем.
- 01Автостопом по дизайн-системе. Путеводитель с оглавлениемБольшой путеводитель по устройству дизайн-системы: зачем она нужна, из чего состоит и как ей пользоваться.
- 02Design Systems For FigmaКаталог дизайн-систем и UI-китов для Figma, удобный для поиска готовых структур и компонентных референсов.
- 03Gravity UIОткрытая дизайн-система и библиотека компонентов от Yandex Cloud для сложных интерфейсов и сервисов.
- 04Material DesignДизайн-система Google с принципами, компонентами, токенами и рекомендациями по интерфейсным паттернам.
- 05Как мы строим дизайн-систему в ЮMoneyКейс команды ЮMoney о процессе развития дизайн-системы, роли компонентов и коммуникации с продуктами.
- 06Контур.ГайдыГайды Контура с принципами, паттернами и рекомендациями для проектирования интерфейсов.
- 07Design | Samsung DeveloperГайдлайны Samsung для проектирования интерфейсов и опыта в экосистеме устройств бренда.
- 08Design Systems Index | NotionNotion-база с подборкой дизайн-систем для быстрого сравнения подходов, структуры и документации.
- 09Дизайн-система Mail.ru ParadigmДизайн-система Mail.ru с документацией по визуальному языку, компонентам и интерфейсным паттернам.
- 10Почему стили в Figma - прошлый векМатериал о переходе от классических стилей Figma к более гибкой системе переменных и токенов.
- 11Design Systems Database & GalleryГалерея и база дизайн-систем для изучения примеров, визуального языка и организации документации.
- 12Fluent 2 Design SystemДизайн-система Microsoft с принципами, иконографикой, компонентами и рекомендациями для продуктов экосистемы.
- 13Кастомная дизайн система изнутриПрактический взгляд на внутреннее устройство кастомной дизайн-системы и решения, которые приходится принимать команде.
- 14Momentum DesignДизайн-система Cisco/Webex для изучения структуры продуктовой системы, компонентов и документации.
- 15Nova · SBER DesignПубличная страница дизайн-системы Сбера: полезна как пример визуального языка и презентации системы.
- 16МТС Design - Дизайн-системаДизайн-система МТС с принципами, компонентами и примерами оформления цифровых продуктов бренда.
- 17Atomic DesignКлассическая методология Брэда Фроста о сборке интерфейсов из атомов, молекул, организмов и шаблонов.
- 18Shopify PolarisДизайн-система Shopify для интерфейсов commerce-продуктов: компоненты, паттерны и контентные правила.
- 19Что такое дизайн-система зачем она нужна и какими отечественными решениями вдохновитьсяМатериал "Что такое дизайн-система зачем она нужна и какими отечественными решениями вдохновиться" с habr.com для раздела "Дизайн системы"; пригодится как практическая ссылка, пример или источник для изучения темы.
- 20Design - Apple DeveloperОфициальные материалы Apple по проектированию интерфейсов, платформенным паттернам и Human Interface Guidelines.
- 21Taiga UIБиблиотека компонентов и дизайн-система для Angular-продуктов с подробной технической документацией.
- 22ISP UIДизайн-система ISPsystem с документацией компонентов, паттернов и правил интерфейса.
- 23МегаФон UIПубличная дизайн-система МегаФона с примерами компонентов, правил и фирменного интерфейсного языка.
- 24Госуслуги.ГайдыГайды Госуслуг с правилами проектирования интерфейсов для государственных цифровых сервисов.
- 25VKUI styleguideБиблиотека компонентов VK для интерфейсов в экосистеме VK, полезная для изучения компонентной документации.
- 26Snack UI KitStorybook-документация UI-кита Cloud.ru: пример живой компонентной библиотеки с состояниями.
- 27MUI: The React component library you always wantedБиблиотека React-компонентов для создания пользовательских интерфейсов с фокусом на доступность и кастомизацию.
- 28Maersk Design SystemБиблиотека компонентов, токенов, гайдлайнов и иконок для создания согласованных и доступных пользовательских интерфейсов в Maersk.
28 материалов в подборке.