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
Войти
Главная страница Категория figma Практический UI: Дизайн-система Figma

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

Figma design system - Figma UI kit and style variables

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создано с Practical UI

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

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

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

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

Авторы

Изображение источника 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.08.2024
Figma

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

Beginner Figma Video Course

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

3 ч 22 мин
Английский
Посмотреть
+2
Изображение курса Продвинутый видеокурс по Figma
Andrija Prelec logo Andrija Prelec
24.08.2024
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.01.2025
Figma

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

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

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

11 ч 35 мин
Английский
Посмотреть
+6
Изображение курса Академия UI-архитектуры
Logic Room logo Logic Room
25.03.2025
Другое (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 C Sharp (C#) Подготовка к собеседованию Обработка и анализ данных
Источники
Все источники Alex Chiou Andreas Kretz Aurimas Griciūnas balun.courses Dometrain frontendmasters udemy zerotomastery.io Дмитрий Холстинин
Telegram CourseTrain Цена Контакты Распространенные вопросы Плейлисты Приватность Условия
Темы:
Язык: