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

Chakra UI Figma Kit - это набор простых, модульных и доступных компонентов для проектирования и создания ваших приложений. Он включает в себя обширные стили типографики, цвета и эффекты, варианты компонентов с учетом размера и состояния, динамические слои на базе Auto Layout, а также неявные размеры пиксельной сетки и интервалы. Все компоненты являются open source и доступны для React-приложений уровня production.

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

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

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

VKUI iOS Library – это библиотека компонентов для дизайна интерфейсов приложений ВКонтакте под iOS. Апрельское обновление 2022 года принесло компонентам Variants, Auto Layout и другие улучшения. Команда VKontakte работает над новой, масштабной версией библиотеки с измененными и улучшенными компонентами.

Button Resizer автоматически изменяет ширину кнопки, чтобы она соответствовала ширине текста внутри неё. Плагин особенно полезен, если вы используете компоненты кнопок с автоматическим изменением размера текста. Вы можете задать минимальную ширину кнопки, чтобы она не становилась слишком маленькой. Для корректной работы, убедитесь, что текстовый слой кнопки настроен на растяжение по горизонтали и фиксированный размер.

Vuetify Components v.2.2.12, опубликованные 12 февраля 2020 года, представляют собой библиотеку компонентов пользовательского интерфейса, разработанную для Figma. Она предоставляет готовые к использованию элементы, соответствующие дизайн-системе Vuetify, что позволяет дизайнерам быстро создавать прототипы и макеты веб-приложений, придерживаясь единообразного стиля и ускоряя процесс разработки. Эти компоненты упрощают процесс проектирования интерфейса, обеспечивая согласованность и профессиональный вид конечного продукта.

NativeBase Figma Design Kit v3.2 - это библиотека компонентов с открытым исходным кодом для проектирования React и React Native приложений. Она включает в себя обширные стили для типографики и цвета, динамические слои на основе Auto Layout, темы и адаптивный дизайн для различных платформ, как в светлом, так и в темном режимах. Design Kit предоставляет строительные блоки, необходимые для создания интерфейсов приложений, и предлагает готовые компоненты для использования в разработке.

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

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

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

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

Storybook Connect позволяет встраивать компоненты Storybook непосредственно в Figma, связывая дизайн с живой реализацией. Подключайте компоненты и варианты дизайна к соответствующим историям, чтобы все участники могли видеть, как они реализованы. Используйте интерактивные истории прямо в Figma для сравнения дизайна с кодом, используя инструменты Storybook, такие как Outline и Measure. Легко открывайте Storybook прямо из боковой панели Figma или в режиме разработчика для удобного доступа к связанным компонентам.

Этот компонент FAB (Floating Action Button) позволяет создавать красивые прототипы с готовыми взаимодействиями и легко редактируемыми действиями. Он идеально подходит для добавления основной кнопки действия в ваши проекты, обеспечивая удобный и интуитивно понятный интерфейс для пользователя. Используйте FAB для выделения наиболее важных функций и упрощения навигации в ваших прототипах.

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

Интерактивные компоненты с переменными, такие как Radio Button, Select All Check boxes, Dropdown и Accordion, позволяют создавать динамичные и многократно используемые элементы интерфейса. Они предназначены для упрощения разработки интерактивных прототипов и пользовательских интерфейсов, где необходимо управлять состоянием элементов и их отображением в зависимости от выбранных опций. Благодаря использованию переменных, один и тот же компонент можно гибко настраивать и адаптировать для различных сценариев, обеспечивая согласованность и сокращение времени разработки.

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

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

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

Variant Organiser автоматически упорядочивает варианты компонентов в сетке, добавляя подписи к свойствам. Это помогает поддерживать порядок и наглядность в больших наборах вариантов. В ручном режиме можно настроить логику упорядочивания, выбирая свойства для столбцов, строк и блоков. Автоматический режим упрощает процесс, упорядочивая варианты на основе порядка свойств в панели Figma. Также можно настроить интервалы между вариантами и блоками в настройках плагина.

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

Dynamic Component Resizer позволяет легко масштабировать экземпляры компонентов, сохраняя заданные в мастер-компоненте отступы. Это особенно полезно, когда высота элементов в экземпляре меняется, например, при переходе текста с одной строки на две. Плагин автоматически подстраивает положение элементов внутри фрейма мастер-компонента (например, "заголовка" и "основного текста"), чтобы сохранить заданное расстояние между ними, даже если содержимое изменяется. Для корректной работы мастер-компонент должен иметь определенные настройки вертикальных ограничений и выравнивания элементов.

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

Team Library Component Browser позволяет легко просматривать, искать и создавать экземпляры компонентов из вашей командной библиотеки прямо в Figma. Он упрощает использование общих элементов, позволяя вставлять их в документ, заменять существующие объекты экземплярами и сохранять размеры и структуру при замене. Для работы плагина требуется сохранить данные библиотеки через специальную настройку, так как API Figma не предоставляет автоматический доступ к данным библиотек.

Этот плагин создан для упрощения работы с компонентами в Figma. Он позволяет выделить любое количество компонентов, фреймов или групп и отправить их на отдельную страницу "Components" или "Symbols" (при её наличии). При этом оригинальные компоненты будут заменены на экземпляры, а все перенесенные компоненты будут помещены в специальный фрейм "Unsorted Components" для удобной организации. Это позволяет поддерживать порядок на основной странице и централизованно управлять всеми компонентами проекта.

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

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

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

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

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

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

Titian Mobile – это библиотека мобильных компонентов, разработанная на основе основного мобильного бизнеса Weimob. Она создана для того, чтобы помочь разработчикам устойчиво повышать качество и эффективность своей работы, а также создавать превосходные мобильные продукты.

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

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

Быстро начните свои UI-проекты с помощью Nektic Application Component Kit. Этот набор содержит базовые и необходимые компоненты для старта дизайна и разработки сложных элементов, используя готовый кит. Внутри вы найдете: фундамент, аватары, кнопки, текстовые поля, выпадающие списки, переключатели, чекбоксы, чипсы, баннеры уведомлений, модальные окна, всплывающие подсказки, выбор даты, индикатор прогресса и спиннер.

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

Component Collector - это платформа, где вы можете найти и получить высококачественные Figma компоненты для ваших проектов. С помощью удобного поиска и фильтров вы легко найдете нужный компонент, а добавление его в ваш проект занимает всего один клик. Все компоненты полностью адаптированы под Auto Layout и выполнены в векторе, обеспечивая гибкость и возможность настройки. Component Collector позволяет быстро добавлять качественные и настраиваемые компоненты в любой дизайн-проект.

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

Universal Component Library - это универсальный UI-кит, который содержит более 200 готовых компонентов, использующих 8-точечную сетку, что позволяет беспрепятственно проектировать как для Android, так и для iOS. Он идеально подходит для стартапов, дизайн-агентств, UI/UX-дизайнеров и разработчиков приложений, позволяя экономить время на разработке, быстро создавать прототипы и настраивать компоненты под нужды проекта. Включает в себя настраиваемые компоненты, стили, Auto-Layout Figma, библиотеку иконок и рекомендации по элементам.

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

Готовый React-компонент формы логина, созданный на основе библиотеки Ant Design, позволяет быстро разработать и внедрить функциональный и отзывчивый интерфейс для авторизации пользователей. Он идеально подходит для SaaS-стартапов, стремящихся к быстрому запуску, и предоставляет возможность экспорта кода с поддержкой различных стилей, включая plain CSS, styled components и Sass. Компонент разработан с учетом принципов адаптивного дизайна и использует открытые библиотеки, такие как Recharts, для создания современных и удобных решений.

Make Hover State позволяет быстро создавать состояния наведения для компонентов и наборов вариантов с помощью интерактивных компонентов. Выберите компоненты или наборы вариантов, запустите плагин, и он создаст клоны, добавит свойство "Hovered" (Наведено) со значениями "True" (Да) и "False" (Нет), и свяжет новые варианты с оригинальными через триггер наведения. Это упрощает создание стилей для состояний наведения, автоматически генерируя необходимые варианты и связи.

Представляем Figma Community версию Pages, дизайн-системы, созданной для экосистемы Bootstrap и предназначенной для разработки веб-приложений на HTML, Angular и React. Этот UI-кит позволяет легко проектировать интерфейсы, используя готовые компоненты, и обеспечивает плавный переход от дизайна в Figma к разработке реальных веб-приложений. Доступны также версии для Vue и Svelte.

Плагин Variant Switcher позволяет рекурсивно изменять варианты компонентов на основе заданного свойства. Это полезно, когда нужно быстро сменить, например, тему ("theme") для множества компонентов в дизайн-системе. Вы указываете имя свойства, целевой вариант ("From Variant") (необязательно, чтобы выбрать все экземпляры с указанным свойством) и новый вариант ("To Variant"), на который нужно переключить компоненты. Плагин также имеет дополнительные настройки, такие как "Deep Switch" (для переключения дочерних элементов) и "Switch Full Document" (для переключения всего документа).

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

React Select – это Figma-компонент, созданный на основе одноименного open-source React-проекта. Он позволяет дизайнерам создавать интерактивные элементы выбора в Figma, максимально точно имитирующие поведение настоящего React-компонента. Благодаря использованию последних функций Figma, включая вложенные свойства, React Select обеспечивает удобство и гибкость при проектировании интерфейсов. Разработан компанией Thinkmill для упрощения процесса проектирования и разработки.

Component Exporter позволяет экспортировать библиотеки компонентов любого размера в облачные ресурсы в формате JSON, быстро копировать SVG в виде HTML-кода и загружать архивы. Сервис предоставляет инструменты для экспорта больших библиотек компонентов, командных компонентов, создания веб-страниц коллекций для обмена с командами, а также экспорта в JSON, архивы и PNG. Кроме того, доступен REST API для CI/CD.

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

Property Toggle позволяет быстро устанавливать логические (true/false) свойства для множества экземпляров компонентов одновременно. Это отличный инструмент для управления дизайн-системами и быстрого создания вариаций макетов, когда ваши компоненты имеют общие свойства. Просто добавьте свойства, которые хотите переключать (например, "темный режим"), переключите их в нужное состояние и примените изменения ко всей странице или к текущему выделению.

Плагин позволяет создавать масштабируемые компоненты на основе техники 9-slice scaling из выбранного изображения. После выбора изображения, укажите значения для разделения на 9 частей и подтвердите. Для сброса значений используйте кнопку "Reset". Этот инструмент полезен для создания гибких UI-элементов, которые корректно масштабируются под разные размеры, сохраняя при этом четкость углов и краев.