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

Компоненты, гайдлайны, брендбуки

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

Ресурсы о создании и использовании дизайн-систем

ivi — Витрина компонентов, доступен только просмотр Gestalt — Pinterest Auro Radix Polaris MUI Uber Semrush SAP Design System — Отдельные киты для iOS, Android, Web, watchOS, Wear OS Tetrisly Salesforce Garden VKUI Common Library — это библиотека адаптивных React-компонентов. С ее помощью вы сможете создавать веб-приложения и VK Mini Apps в экосистеме ВКонтакте. TAMAGUI Tailwind — Без фигма кита Shadcn Studio — A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. Flyon UI — Есть платная версия и Гибли тема Atlassian Додо Сбер Cuva super clean Porsche Avito Design Фигма IDS — Intuition Design System Primer Carbon Fluent 2 Web Gravity UI — Build modern interfaces with the Gravity design system and libraries Атомаро — Платный сервис и конструктор для создания дизайн-систем для любой задачи VKUI — это библиотека адаптивных React-компонентовдля создания веб-приложений.Библиотека основана на дизайн-системе VK и реализует её интерфейсы для различных платформ. Taiga UI — powerful set of open source components for • Angular tabler Госуслуги Ant Design Sigma

Курсы

Образовательные курсы по дизайну и разработке

Design System Course

Анимация

Ресурсы об анимации и моушн-дизайне

Easing Graphs — Можно создать свой

Figma и код

Ресурсы о взаимодействии Figma и кода

21st

Коллекции

Подборки полезных ресурсов

UI Guideline — Есть платный функционал The component gallery — Сборник типовых компонентов с отсылками на разные ДС Design Systems Database — Сборник ссылок на компоненты в разных ДС Коллекция от Figma — Discover all open design systems on the Figma Community Design Systems for Figma КОД — ДС из России Все ДС — Для детального изучения нейминга и состава ДС Storybook — Популярные открытые сторибуки Design Systems Index

Чертежи

Планы, схемы и архитектура интерфейсов

Контур Гайды Components — Learn how to use and customize system-defined components to give people a familiar and consistent experience. Blueprints

Киты

Наборы шаблонов и ресурсов для проектирования интерфейсов

Uxcel — В фигме лежат файлы для исследований, а UI кит надо отдельно импортировать (файл прикреплен) Манго — Вкусвилл Lab UI — Components, Icons & Guides — Lab UI (v2.0) Microsoft 365 UI Kit

Демо

Демонстрационные материалы и примеры

Пример вёрстки таблиц от AG Grid Vuexy — Демо всей библиотеки #1 AppMetrica — Демо Frest — Демо всей библиотеки #2 Materialize — Демо всей библиотеки #3 tabler

Apple

Ресурсы, связанные с дизайном продуктов Apple

iOS 18 Kit — Внутри: - Гайд по компонентам с иллюстрациями разных кейсов применения - Ui Kit Компонентов iOS 18 для iPhone - Переключение темы и языка в 1 клик Guide for Naming Assets in iOS Projects iOS 16. Разбор гайдлайна — На 2х языках Human Interface Guidelines — Learn how to design great apps and games that integrate seamlessly with Apple platforms iOS 26 iOS 18

Мобайл

Примеры и гайды по мобильному дизайну

A curated list of mobile design resources Fluent 2 iOS Fluent 2 Android

Material Design

Ресурсы о Material design

M2 M3 Expressive M3 M1

Тексты

О копирайтинге и текстах в дизайне

Гайд по текстам в интерфейсе Яндекс-драйв Либа — Библиотека экранов с текстами на русском языке Есть сортировка по ToV Яндекс Go (разные направления) Райффайзен Банк Яндекс Лавка МТС Контур Додо Плавучая редакция — Советы по интерфейсным текстам и редактуре, примеры, фейлы, контент-гайды Т-Банк Пицца на пышном тексте Редактору в Авито Советы и статьи о тексте, редактуре, информационном стиле и рекламе База знаний для UX-писателей

Доступность

О доступности и инклюзивном дизайне

Про доступность iOS WCAG 2.2 МТС Руководство по доступности продуктов VK МТС Не исключение: об инклюзии в цифровом и физическом мире — Канал об инклизии в цифровом и физическом мире Цифровая доступность

Windows

Примеры и принципы дизайна под Windows-среду

Windows UI

Брендинг

Ресурсы о брендинге и айдентике

Додо Альфа Лавка Daily branding The branding guidelines archive — Брендбуки THE DUOLINGO HANDBOOK Т-Банк — Некоторые разделы закрыты под корпоративный VPN Dropbox

SDUI

О Server-Driven UI

Statcounter — Статистика по браузерам, по разрешениям, по платформам Иви Ozon — Расскажем, как мы строили дизайн-систему в большом продукте, который постоянно меняется. Даже не так. Как мы набивали шишки и учились на собственном опыте. Что такое Server Driven UI? Чем этот подход отличается от классической разработки? Причём тут вообще дизайн?! Забудьте на время о Figma и готовьтесь взглянуть на тему шире Вкусвилл — Что такое SDUI? Как повысить скорость разработки и стабильность в несколько раз? Чем вариант ВкусВилла отличается от реализации похожих идей в других компаниях и почему верстальщик не нужен Альфа Яндекс

Разное

Различные ресурсы без категории

Your go-to for design systems — All the essential resources for setting up the design system The open-source design tool for creatives — Build custom design tools without writing any code. Create responsive components, pages, and sites that you can use in any type of web project. Style markup templates with curated themes or your own design tokens. Создание DS в Notion DS events — Справочник о всех мероприятиях, посвящённых ДСкам Есть RSS и iCal рассылки This Is Responsive. — Patterns and resources for creating responsive web experiences Redesigning design.systems — Инструкция по введению ДС Design System News — Рассылка о мире ДС Дока Glossary — Глоссарий Coss.com origin Библиотека элементов управления Ribbon Framework UX Collective