Рейтинг в Figma: UI компоненты

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

Интерактивный чекбокс – это компонент пользовательского интерфейса, который позволяет пользователям выбирать один или несколько вариантов из предложенного списка. Он наглядно отображает статус выбора (включено/выключено) и обеспечивает мгновенную обратную связь при взаимодействии, что делает его удобным инструментом для фильтрации, выбора параметров или подтверждения согласия в различных приложениях и веб-сайтах.

Интерактивный перетаскиваемый слайдер – это компонент, позволяющий пользователям изменять значения, перетаскивая ползунок по шкале. Это удобный и интуитивно понятный способ выбора значений в определенном диапазоне. Он идеально подходит для настройки параметров, фильтрации результатов или просто для визуализации прогресса. Требует включенных интерактивных компонентов.

Этот простой компонент Spinner можно использовать везде, где требуется индикация загрузки. Он включает в себя стандартный Spinner и стилизованные цвета. Для использования создайте экземпляр компонента и при необходимости настройте цвета. Создание отзывчивых, повторно используемых компонентов является ключом к успешным и быстрым прототипам, особенно когда нет прямого способа что-то создать.

iOS/iPadOS Wheel Picker v1.0 – это компонент выбора значения в стиле вращающегося барабана, предназначенный для использования в приложениях под iOS и iPadOS. Он обладает адаптивной шириной и поддерживает светлую и темную темы, что позволяет легко интегрировать его в различные интерфейсы и обеспечить пользователям привычный и интуитивно понятный способ выбора значений.

Значительные улучшения компонентов вкладок Twitch, использующие авто-разметку и динамическую ширину подчеркивания. Подчеркивание реализовано путем задания высоты внутреннему фрейму, выравнивания его по верху, а затем обрезки внешней обводки фреймом-оберткой, чтобы она была видна только снизу. Поскольку это компоненты, мы предварительно заполняем набор вкладок в группе, которые можно скрывать или отображать по мере необходимости.

Этот интерактивный компонент представляет собой бесконечный карусельный слайдер с пятью слайдами, которые можно бесконечно перетаскивать. Он идеально подходит для создания динамичных и привлекательных интерфейсов. Легко настраивается, позволяя быстро обновлять контент слайдов. Также включает горизонтальный скролл-слайдер для альтернативной навигации. В файле вы найдете готовый UI главного экрана доставки еды с использованием этих компонентов.

ToggleButton – это элемент управления, который позволяет пользователю выбирать между двумя состояниями, например, "включено" и "выключено". Он визуально представляет собой кнопку, изменяющую свой вид при переключении состояния, предоставляя наглядную индикацию текущего выбора. ToggleButton часто используется в интерфейсах для управления настройками, включения/выключения функций или переключения между различными режимами работы.

Это адаптивный калькулятор, представленный в светлой и темной темах, который автоматически подстраивается под ширину экрана благодаря использованию ограничений и авто-разметки. Цветовая палитра реализована с помощью стилей, что позволяет легко изменять внешний вид. Калькулятор создан для удобного и эффективного выполнения математических вычислений на различных устройствах.

HTML5 Chrome Videoplayer - это компонент для встраивания медиаплеера с использованием HTML-элемента

Превратите простое действие "лайка" в удовольствие с помощью этой интерактивной кнопки. Взаимодействия уже встроены, поэтому просто перетащите компонент в свой фрейм и наслаждайтесь. Эта простая, но привлекательная микро-анимация добавляет приятный визуальный отклик при нажатии кнопки "лайк", делая пользовательский опыт более вовлекающим и запоминающимся.

React-Toastify - это библиотека для React, предназначенная для добавления уведомлений (тостов) в ваши приложения. Она позволяет легко отображать информационные, предупреждающие, успешные или ошибочные сообщения пользователям, не занимая много места на экране. Библиотека предлагает широкие возможности кастомизации внешнего вида и поведения тостов, а также проста в интеграции и использовании.

Infinite Carousel - это полностью переиспользуемый интерактивный компонент, разработанный для простоты использования и расширяемости. Он легко встраивается в любое место и адаптируется к любому размеру, обеспечивая безупречную работу. Идеально подходит для демонстрации контента, требующего циклической прокрутки и интерактивности.

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

Интерактивный компонент навигационной панели, созданный с использованием атомарной методологии, обеспечивает полноценную навигацию по сайту или приложению. Компонент включает в себя различные состояния разделов и подразделов (например, "Наведение", "Нажатие", "Выбрано"), интерактивные стеки для разделов с подразделами, а также варианты стилей. Он позволяет пользователям легко перемещаться по контенту, обеспечивая интуитивно понятный и отзывчивый интерфейс.

Friday Design System (FDS) – это ускоритель для разработки дизайн-систем, призванный ускорить вывод продуктов на рынок. Он включает в себя гибкие, согласованные и доступные компоненты для Figma, поддерживающие мультибрендовые решения, особенно в сферах электронной коммерции и цифровых корпоративных приложений. FDS предоставляет все необходимое: от документации и структуры до готовых к разработке компонентов на React и Angular, учитывая требования к доступности и позволяя быстро создавать цифровые клиентские путешествия для различных брендов.

Слайдер сравнения – это интерактивный компонент, позволяющий пользователям визуально сопоставлять два изображения, перемещая разделитель. Он идеально подходит для демонстрации "до и после" эффектов, выделения различий между версиями дизайна или сравнения различных характеристик продукта. Этот инструмент улучшает восприятие информации, делая ее более наглядной и понятной.

Этот компонент предоставляет иконку-кнопку с всплывающей подсказкой при наведении курсора. Он идеально подходит для ситуаций, когда необходимо добавить пояснения к действию, обозначаемому иконкой, не занимая при этом дополнительное место на экране. Подсказка появляется только при наведении, что делает интерфейс более понятным и лаконичным. Новый компонент соответствует стандартам WCAG, обеспечивая удобство использования и доступность.

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

Android Notification - это компонент операционной системы Android, предназначенный для отображения информации пользователю вне контекста приложения. Уведомления могут отображаться в строке состояния, на экране блокировки и в центре уведомлений, позволяя информировать пользователя о новых сообщениях, событиях, обновлениях и другой важной информации, требующей внимания или действия.

Keyboard Input – это простой компонент, разработанный для прототипов, позволяющий пользователям вводить текст с клавиатуры. Он обеспечивает чистый и удобный интерфейс текстового поля. В текущей версии (1.0) реализован ввод текста, но пока отсутствует полноценная поддержка клавиши backspace – вместо удаления символа, поле просто очищается. Тем не менее, компонент служит удобной отправной точкой для интеграции функциональности ввода текста в ваши прототипы.

Этот проект представляет собой CSS-компонент "Circle Progress" – круглый индикатор прогресса с возможностью изменения цвета по мере заполнения от 0 до 100%. Он реализован с использованием SASS, легко настраивается и доступен для скачивания с Github. Вы можете использовать его для визуального отображения прогресса выполнения задач, загрузки данных или любого другого процесса, где необходимо наглядно показать текущий статус. Имеются различные демонстрационные примеры с разными темами оформления и анимацией.

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

Универсальный анимированный компонент, имитирующий состояние загрузки. Подходит для различных элементов интерфейса, таких как чипы, карточки, текст и изображения. Легко настраивается для интеграции в любую дизайн-систему, обеспечивая визуальную обратную связь во время загрузки контента.

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

Универсальный поисковый компонент, разработанный на базе uni-app, поддерживает различные платформы, включая H5, приложения и мини-программы WeChat. Легко интегрируется через vue plugin marketplace и готов к использованию "из коробки" благодаря подробным комментариям в коде. Этот компонент предназначен для быстрого и удобного добавления функциональности поиска в ваши проекты.

Этот компонент представляет собой интерактивную textarea, совместимую с настольными и мобильными клавиатурами. Он позволяет легко добавлять функциональные текстовые поля в ваши прототипы, поддерживая ввод текста, удаление символов, перенос строк и имитацию события onBlur для переключения между полями по нажатию Tab или Enter. Кроме того, предусмотрена поддержка верхнего и нижнего регистра, цифр, символов и ограничение максимального количества вводимых символов, а также функциональность backspace для удаления символов.

Этот интерактивный компонент позволяет вам лайкать или дизлайкать контент с помощью красивого свайп-интерфейса. Свайпайте влево или вправо, либо используйте кнопки ниже. Если вам понравился этот компонент, покажите свою любовь! Полезен для создания приложений с механикой оценки контента, например, в приложениях знакомств или для выбора товаров.

Awesome Snackbar Content - Flutter - это пакет для Flutter, который позволяет преобразить стандартные SnackBar, делая их более привлекательными и информативными. Он предоставляет готовые стили и типы контента, такие как успех, ошибка или предупреждение, чтобы улучшить визуальное восприятие и пользовательский опыт в вашем приложении.

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

Sign-In with Ethereum (SIWE) Buttons 2.0.1 предоставляет разработчикам готовые элементы интерфейса для интеграции аутентификации через Ethereum в свои проекты. Используя эти кнопки, пользователи могут контролировать свою цифровую личность с помощью своей учетной записи Ethereum и профиля ENS, вместо того чтобы полагаться на традиционных посредников. Это позволяет упростить процесс входа в систему и повысить безопасность, давая пользователям полный контроль над своими данными и идентичностью.

YDS - это дизайн-система, разработанная клубом "Yourssu" в Университете Сунсиль. Она создана для повышения повторного использования компонентов интерфейса, сокращения времени разработки кода и обеспечения единообразного качества дизайна. Документация, примеры использования и компоненты доступны в Wiki, а также в репозиториях Github для iOS, Android и React. Оценить компоненты можно в приложениях YDS Storybook для iOS и Android.

Interactive Tooltip позволяет создавать многократно используемые всплывающие подсказки, используя интерактивные компоненты. Этот метод использует "0px hack" и технику слотов (layout block), чтобы создавать гибкие и настраиваемые подсказки, которые можно легко интегрировать в различные элементы интерфейса. Это упрощает создание единообразных и удобных подсказок, улучшая пользовательский опыт.

Кнопка-меню - это простой элемент интерфейса, предоставляющий пользователю выпадающий список действий или опций. Он позволяет компактно разместить множество команд, которые становятся доступными по клику на кнопку, освобождая место на экране и упрощая навигацию. Все элементы дизайна компонентизированы для удобства повторного использования.

Hover Button - это стилизованная кнопка, которая меняет свой внешний вид при наведении курсора мыши. Эти эффекты могут включать изменение цвета, добавление тени, анимацию или другие визуальные изменения, чтобы сделать кнопку более интерактивной и привлечь внимание пользователя. Hover Button позволяет улучшить пользовательский опыт, предоставляя визуальную обратную связь о том, что кнопка активна и готова к нажатию, что делает взаимодействие с веб-сайтом или приложением более интуитивным.

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

Multi level menu. Prototype-ready! - это готовый к использованию компонент многоуровневого меню для прототипирования. Он включает в себя элементы меню, подменю, обработку событий клика для навигации и наведения мыши для раскрытия/закрытия меню. Предназначен для быстрого добавления функционального меню в ваши проекты, предоставляя базовую структуру, которую можно адаптировать и расширять. Это отличное решение для демонстрации навигации и структуры сайта в прототипах.

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

Этот набор элементов "Breadcrumb Variations" представляет собой коллекцию готовых решений для навигации по сайту. Он разработан, чтобы упростить добавление и настройку хлебных крошек, обеспечивая удобную и понятную структуру сайта для пользователей. Предлагается бесплатное использование в личных проектах. Этот ресурс создан с целью поддержки дизайнерского сообщества и облегчения работы над созданием пользовательских интерфейсов.

Search field & Top menu - это готовый React компонент, позволяющий быстро создать строку поиска и верхнее меню для вашего веб-приложения. Вы можете настроить дизайн и контент в Figma, экспортировать готовый React код и сэкономить время на разработке, используя компоненты, построенные на основе популярных open-source библиотек, таких как Ant Design. Поддерживается responsive дизайн и различные стили: CSS, styled components и Sass.

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

Этот плагин предназначен для изменения темы в проектах, созданных с использованием "Design with shadcn/ui". Он упрощает процесс настройки визуального стиля вашего приложения, позволяя легко переключаться между различными темами и кастомизировать внешний вид компонентов, разработанных на основе shadcn/ui.

NB Tree - это мощный и гибкий компонент для создания древовидных меню с возможностью добавления чекбоксов к каждому узлу. Он идеально подходит для представления иерархических данных, позволяя пользователям выбирать один или несколько элементов из дерева. С его помощью можно легко создавать интерфейсы для навигации, выбора категорий, управления файлами и другими задачами, где требуется древовидная структура с возможностью выбора.

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

Спиннер - это визуальный элемент интерфейса, используемый для выбора числового значения из предопределенного диапазона. Он позволяет пользователям увеличивать или уменьшать значение с помощью кнопок "вверх" и "вниз", либо напрямую вводя число в текстовое поле. Спиннеры полезны, когда необходимо ограничить выбор пользователя конкретным набором числовых значений, например, при указании количества товаров или выборе размера шрифта.