Когда я только начала изучать дизайн-системы, то столкнулась с большим количеством информации. В этой статье собрала полезные ссылки, с которых легко начать погружение в мир визуального языка.
Что же это такое и для чего нужно? Дизайн-системы создаются с целью повышения узнаваемости бренда, автоматизации процессов и экономии времени дизайнеров и разработчиков. Состоит из UI-kit, гайдлайнов и готовых элементов интерфейса в коде.
Статьи о дизайн-системах
Для общего понимания при первом погружении.
Базовые дизайн-системы от Google и Apple
Это основные гайдлайны, которые необходимо знать и уметь ими пользоваться.
- Material Design читать сайт. Готовые стили и компоненты в фигме открыть
- Human Interface Guidelines читать сайт. Готовые стили и компоненты в фигме открыть
Design tokens
Дизайн-токены — это набор базовых переменных визуального языка — отступы, цвета, типографика, стили объектов, анимация — представленный в виде данных (источник).
Дизайн-системы компаний в общем доступе
Система отступов, размеров и сетки
Пространственные системы, сетки и лейауты предоставляют правила, которые дают дизайнам постоянный ритм, ограничивают принятие решений и помогают командам оставаться на одном уровне (источник).
Accessibility
Доступность — это концепция создания веб-контента, адаптированного под людей с ограниченными возможностями. Для проверки цветового контраста в фигме я использую плагин Able - Friction Free Accessibility.
Есть чат в телеграмме, полностью посвященный обсуждению дизайн-систем.