Легкая и мощная система дизайна Figma и UI kit помогут вам разработать практически любой веб-сайт или приложение, которое вы можете себе представить.
Создавайте дизайн в 10 раз быстрее с предварительно собранными компонентами и стилями. Предопределенные стили для цветов, типографики и интервалов, плюс сотни вариантов компонентов.
Создано с использованием новейших функций Figma и лучших практик 2024 года. Легко и быстро настраивайте компоненты с помощью оптимизированного авто-лейаута, переменных, свойств и вариантов.
Дизайн интуитивен, доступен и красив. Каждый компонент разработан с учетом удобства использования и полностью соответствует стандарту WCAG 2.1 уровня AA.
Настраиваемые стили
Используйте возможности переменных, чтобы быстро и легко изменять стили цветов и типографики в соответствии с вашим брендом.
- Переменные для цветов
- Светлый и темный режимы
- Переменные для интервалов
- Переменные для типографики
- Тени для уровней
- Сетки лейаута с шагом 4px
Простая, но мощная цветовая система
Сжатый набор цветовых переменных, названных и организованных в зависимости от их использования. Легко изучаемая, но достаточно гибкая для масштабирования в сложных системах дизайна.
Предопределенные цветовые переменные позволяют автоматически переключаться между светлым и темным режимом мгновенно.
Правильная глубина
Тени отлично указывают на разные уровни высоты в светлом режиме, но их трудно различить в темном режиме. Поэтому в темном режиме используются постепенно более светлые фоны, чтобы обозначить высоту.
Интуитивные компоненты
Получите доступ к обширной коллекции мощных компонентов, разработанных на основе многолетних исследований.
- Сотни вариантов
- Мощные свойства
- Дизайн лучших практик
- Легкость использования и настройки
- Состояния взаимодействия для прототипирования
- Включен авто-лейаут
Состояния взаимодействия
Для ускорения прототипирования интерактивные элементы изменяют свой внешний вид при взаимодействии.
Прозрачные слои состояния
Состояния наведения и нажатия обозначаются с помощью прозрачной наложенной поверхности, которая размещается на интерактивных элементах.
Этот систематический подход работает для всех типов компонентов, от кнопок до выпадающих меню, и не требует добавления дополнительных цветовых вариаций в палитру.
Идеально проработанные иконки
Используйте красивый, нейтральный и открытый набор иконок Feather или добавьте свои собственные.
- 300+ иконок с открытым исходным кодом
- Толщина линии 2px
- Сетка 24px x 24px
Создано с Practical UI
Вы будете удивлены, как быстро и легко можно создать практически любой веб-сайт или приложение, которое вы можете себе представить.
Основываясь на руководствах по дизайну из книги
Изучите логический подход к проектированию интуитивно понятных, доступных и красивых интерфейсов, используя быстрые и практичные руководства.
