Курс Практический UI: Дизайн-система Figma - Dannaway (2024)

Легкая и мощная система дизайна Figma и UI kit помогут вам разработать практически любой веб-сайт или приложение, которое вы можете себе представить.

Создавайте дизайн в 10 раз быстрее с предварительно собранными компонентами и стилями. Предопределенные стили для цветов, типографики и интервалов, плюс сотни вариантов компонентов.

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

Дизайн интуитивен, доступен и красив. Каждый компонент разработан с учетом удобства использования и полностью соответствует стандарту WCAG 2.1 уровня AA.

Настраиваемые стили

Используйте возможности переменных, чтобы быстро и легко изменять стили цветов и типографики в соответствии с вашим брендом.

• Переменные для цветов
• Светлый и темный режимы
• Переменные для интервалов
• Переменные для типографики
• Тени для уровней
• Сетки лейаута с шагом 4px

Простая, но мощная цветовая система

Сжатый набор цветовых переменных, названных и организованных в зависимости от их использования. Легко изучаемая, но достаточно гибкая для масштабирования в сложных системах дизайна.

Предопределенные цветовые переменные позволяют автоматически переключаться между светлым и темным режимом мгновенно.

Правильная глубина

Тени отлично указывают на разные уровни высоты в светлом режиме, но их трудно различить в темном режиме. Поэтому в темном режиме используются постепенно более светлые фоны, чтобы обозначить высоту.

Интуитивные компоненты

Получите доступ к обширной коллекции мощных компонентов, разработанных на основе многолетних исследований.

• Сотни вариантов
• Мощные свойства
• Дизайн лучших практик
• Легкость использования и настройки
• Состояния взаимодействия для прототипирования
• Включен авто-лейаут

Состояния взаимодействия

Для ускорения прототипирования интерактивные элементы изменяют свой внешний вид при взаимодействии.

Прозрачные слои состояния

Состояния наведения и нажатия обозначаются с помощью прозрачной наложенной поверхности, которая размещается на интерактивных элементах.

Этот систематический подход работает для всех типов компонентов, от кнопок до выпадающих меню, и не требует добавления дополнительных цветовых вариаций в палитру.

Идеально проработанные иконки

Используйте красивый, нейтральный и открытый набор иконок Feather или добавьте свои собственные.

• 300+ иконок с открытым исходным кодом
• Толщина линии 2px
• Сетка 24px x 24px

Создано с Practical UI

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

Основываясь на руководствах по дизайну из книги

Изучите логический подход к проектированию интуитивно понятных, доступных и красивых интерфейсов, используя быстрые и практичные руководства.

Материал на английском языке