CourseHunter
  • Категории
    • Frontend logo Frontend
      • Angular logo Angular
      • HTML logo HTML
      • CSS logo CSS
      • JavaScript logo JavaScript
      • Vue logo Vue
      • jQuery logo jQuery
      • React logo React
      • AngularJS logo AngularJS
      • Backbone logo Backbone
      • TypeScript logo TypeScript
      • Ember logo Ember
      • Next.js logo Next.js
      • Elm logo Elm
      • Svelte logo Svelte
      • Single SPA logo Single SPA
      • Three.js logo Three.js
      • D3.js logo D3.js
      • RxJS logo RxJS
      • WebGL logo WebGL
      • barba.js logo barba.js
    • Backend logo Backend
      • PHP logo PHP
      • Python logo Python
      • Ruby on Rails logo Ruby on Rails
      • Yii logo Yii
      • Laravel logo Laravel
      • SQL logo SQL
      • Ruby logo Ruby
      • Symfony logo Symfony
      • Java logo Java
      • Scala logo Scala
      • Node.js logo Node.js
      • MongoDB logo MongoDB
      • Golang (Google Go) logo Golang (Google Go)
      • Slim logo Slim
      • Silex logo Silex
      • Firebase logo Firebase
      • C Sharp (C#) logo C Sharp (C#)
      • Deno logo Deno
      • Redis logo Redis
      • Django logo Django
      • NestJS logo NestJS
      • Spring logo Spring
      • Spring Boot logo Spring Boot
      • Spring Data logo Spring Data
      • Spring Cloud logo Spring Cloud
      • Spring Security logo Spring Security
      • Spring Integration logo Spring Integration
      • Spring HATEOAS logo Spring HATEOAS
      • Spring MVC logo Spring MVC
      • Elixir logo Elixir
      • Phoenix logo Phoenix
    • System programming logo System programming
      • Rust logo Rust
      • WebAssembly logo WebAssembly
      • C++ logo C++
    • Marketing logo Marketing
      • SEO logo SEO
    • Video and 3D logo Video and 3D
      • Blender logo Blender
      • Cinema 4D logo Cinema 4D
      • ZBrush logo ZBrush
    • Graphic logo Graphic
      • Figma logo Figma
      • Sketch logo Sketch
      • Photoshop logo Photoshop
      • After Effects logo After Effects
      • Illustrator  logo Illustrator
      • Adobe XD logo Adobe XD
      • Lightroom logo Lightroom
      • CorelDRAW logo CorelDRAW
    • DevOps logo DevOps
      • AWS logo AWS
      • Azure logo Azure
      • Docker logo Docker
      • Git logo Git
      • GitHub logo GitHub
      • Gitlab logo Gitlab
      • Google Cloud logo Google Cloud
      • Grafana logo Grafana
      • Kubernetes logo Kubernetes
      • Jenkins logo Jenkins
      • Terraform logo Terraform
      • Другое logo Другое
    • Tools logo Tools
      • GraphQL logo GraphQL
      • Flux logo Flux
      • Webpack logo Webpack
      • Ansible logo Ansible
      • Gulp logo Gulp
      • Grunt logo Grunt
      • Visual Studio Code logo Visual Studio Code
      • VIM logo VIM
      • OpenCV logo OpenCV
      • Salt logo Salt
      • SVN logo SVN
      • Atom logo Atom
      • Elasticsearch logo Elasticsearch
      • Сборки, готовые решения logo Сборки, готовые решения
      • Electron logo Electron
      • Chrome DevTools logo Chrome DevTools
      • Yarn logo Yarn
      • Babel logo Babel
      • Grep logo Grep
      • npm logo npm
      • Vite logo Vite
      • Gatsby logo Gatsby
      • PhpStorm logo PhpStorm
      • Webflow logo Webflow
      • Hibernate logo Hibernate
      • Socket.io logo Socket.io
      • Bash logo Bash
    • Разработка мобильных приложений logo Разработка мобильных приложений
      • React Native logo React Native
      • Ionic logo Ionic
      • Swift logo Swift
      • Progressive Web App (PWA) logo Progressive Web App (PWA)
      • Core Data logo Core Data
      • Xamarin logo Xamarin
      • NativeScript logo NativeScript
      • Dart и Flutter logo Dart и Flutter
    • Gamedev logo Gamedev
      • Unreal Engine logo Unreal Engine
      • Unity logo Unity
    • CMS logo CMS
      • Wordpress logo Wordpress
      • OpenCart logo OpenCart
      • Drupal logo Drupal
      • Joomla logo Joomla
      • 1C-Bitrix logo 1C-Bitrix
      • MODX logo MODX
      • Magento logo Magento
      • Shopify logo Shopify
    • Blockchain logo Blockchain
      • Криптовалюты logo Криптовалюты
      •  Decentralized Applications (dApps) (Web 3) logo Decentralized Applications (dApps) (Web 3)
    • Тестирование logo Тестирование
      • Postman logo Postman
      • Selenium logo Selenium
      • Appium logo Appium
      • Protractor logo Protractor
      • WebdriverIO logo WebdriverIO
      • Cypress logo Cypress
      • Playwright logo Playwright
    • Другое logo Другое
      • Linux logo Linux
      • WebRTC logo WebRTC
      • OpenGL Shading Language (GLSL) logo OpenGL Shading Language (GLSL)
    • Подготовка к собеседованию logo Подготовка к собеседованию
    • Обработка и анализ данных logo Обработка и анализ данных
    • Информационная безопасность logo Информационная безопасность
      • Этический взлом / Тестирование на проникновение logo Этический взлом / Тестирование на проникновение
    • Английский язык logo Английский язык
    • Конференции logo Конференции
  • Источники
  • Все курсы
    • Популярные
    • Бесплатные (100+ Курсов)
  • Разделы
  • Книги
    • Бесплатные
    • Популярные
  • Краудфандинг logo Краудфандинг
English
Русский
Українська
Голубая
Фиолетовая
Cветлая
Терминал
Norton
Войти
Используй промокод SUMMERUP - экономь на горячем, трать на холодное! 🍧 🍸 🍋 🍉 🍹
Главная страница Категория figma Практический UI: Дизайн-система Figma

Практический UI: Дизайн-система Figma

Figma design system - Figma UI kit and style variables

Adham Dannaway logo Adham Dannaway
Практический UI: Дизайн-система Figma logo Начать Сейчас
Категория
Figma
Дата добавления
7 авг. 2024 г., 02:50
Язык
Английский

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создано с Practical UI

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

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

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

Посмотреть больше

Автор - Adham Dannaway

Изображение источника Adham Dannaway

Adham Dannaway

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

Автор
Посмотреть
+4
Категории
Figma logo

Figma

Комментарии
User Avatar
  • User Avatar
    Designer
    15 авг. 2024 г., 02:08
    Love this design system! ❤️ Thanks a lot for adding it to the library :)
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.

Другие материалы в этой категории

Изображение курса Видеокурс по Figma для начинающих
Andrija Prelec logo Andrija Prelec
24 авг. 2024 г., 00:37
Figma

Видеокурс по Figma для начинающих

Beginner Figma Video Course

Нет лучшего места для начала изучения дизайна, чем самое популярное дизайнерское приложение! Учитесь на практике и начните или улучшите свои знания в Figma.Сегодня Figma занимает лидирующие позиции в мире дизайна, и на то есть веские причины. Этот инструмент стал синонимом дизайна на самых прибыльных рынках - в Европе и США.В опросах UX Tools, проводимых среди дизайнеров по всему миру, из года в год Figma получала наивысшие оценки и использовалас

3 ч 22 мин
Английский
Посмотреть
+2
Изображение курса Продвинутый видеокурс по Figma
Andrija Prelec logo Andrija Prelec
24 авг. 2024 г., 00:47
Figma

Продвинутый видеокурс по Figma

Advanced Figma Video Course + Let's Design Together Add-on

Станьте мастером Figma и взлетите по карьерной лестнице в дизайне.Курс наполнен реальными советами и хитростями от старшего продуктового дизайнера с десятилетним опытом работы в дизайне.Помимо того, что вы научитесь эффективно использовать Figma, вы также узнаете, как применять её именно для работы в UX/UI дизайне. Вы научитесь вносить необходимые изменения в свой процесс в зависимости от различных типов проектов по дизайну продуктов и UX/UI диза

20 ч 58 мин
Английский
Посмотреть
+1
Изображение курса Освой Figma - идеальный курс для начинающих и сомневающихся дизайнеров
(UI) Adrian (Adrian Kuleszo) logo (UI) Adrian (Adrian Kuleszo)
13 янв. 2025 г., 16:17
Figma

Освой Figma - идеальный курс для начинающих и сомневающихся дизайнеров

Figma Mastery - The ultimate Figma course for new and struggling designers

Курс «Figma Mastery» - это обширное руководство, которое обучает эффективному и продуктивному использованию Figma, охватывая все этапы работы: от настройки проекта до передачи дизайна разработчикам.

11 ч 35 мин
Английский
Посмотреть
+7
Изображение курса Академия UI-архитектуры
Logic Room logo Logic Room
25 мар. 2025 г., 18:37
Другое (Frontend)

Академия UI-архитектуры

UI Architecture Academy

«Академия UI-архитектуры» - это программа из 12 модулей, которая научит вас разрабатывать, тестировать и масштабировать пользовательские интерфейсы. В процессе обучения студенты проходят оценки, выполняют практические упражнения и создают реальные проекты, применяя полученные знания на практике.Мы сделаем тестирование UI-приложений настолько быстрым и удобным, что вы больше не захотите разрабатывать SPA без него!Затем мы углубимся в архитектурные

21 ч 37 мин
Английский
Посмотреть
+6
Книга по дизайну пользовательского интерфейса - "Практический UI". logo

Книга по дизайну пользовательского интерфейса - "Практический UI".

Adham Dannaway
English
View
Премиум

Ресурс видеоуроков программирования для front и back end разработчиков. Бери знания своего профиля у нас, ведь мы самые лучшие блеать. Серьезно.

Категории
Все категории JavaScript React.js Python Java Golang (Google Go) Другое TypeScript Next.js Подготовка к собеседованию Другое (Gamedev)
Источники
Все источники Aishwarya Naresh Reganti Arpit Bhayani balun.courses frontendmasters Nikandr Surkov SimonDev Steve Kinney udemy zerotomastery.io
Telegram CourseTrain Цена Контакты Распространенные вопросы Плейлисты Приватность Условия
Темы:
Язык: