Содержание
10 плагинов Figma, которые должны быть у каждого дизайнера
Аудио перевод статьи
1. Unsplash
Unsplash предлагает фотографии из разных категорий, таких как животные, архитектура, природа, портреты, техника и т. д. Многие дизайнеры любят этот плагин, поэтому он является одним из наиболее часто устанавливаемых плагинов на Figma.
2. Iconify
Iconify предлагает дизайнеру огромный выбор дизайнерских иконок из большого количества категорий. Лично я использую Iconify во всех своих проектах и могу сказать, что это мой любимый плагин Figma.
3. Content Reel
Content Reel позволяет быстро перетаскивать текстовые строки, аватары и иконки в шаблоны. Сначала выберите один или несколько слоев в файле шаблона, а затем выберите фотографии аватаров, логотипы, имена, названия предприятий, телефоны, номера, информацию о дате и времени и многое другое для замены обычного содержимого по умолчанию.
4. Image Palette
Палитры очень важны для дизайнеров, палитра помогает создать свой дизайн с помощью определенных цветов, а также поддерживает ценность и последовательность бренда.
5. Remove BG
Если вы используете какие-либо изображения и хотите удалить их фон, то Remove BG — это лучший плагин для удаления фона одним щелчком мыши.
6. Figmotion
Figmotion — это инструмент анимации, который встроен прямо в Figma. Этот плагин делает создание анимации более простым и удобным, так как нет необходимости обращаться к стороннему ПО для разработки моушн-графики, как, например, Principle, Haiku или After Effects. Figmotion делает анимацию более управляемой для разработчиков, так как она создана с учетом мобильных технологий.
7. CHART
Создавайте полезные диаграммы, используя реальные или случайные данные, копируя и вставляя файлы из таких редакторов, как Excel, Numbers и живых Google Таблиц. Диаграмма поддерживает удаленные файлы JSON (REST API), локальные файлы CSV и JSON.
8. Vectary 3D
Вставляйте свои 2D-проекты непосредственно в Figma в качестве 3D-макетов или других 3D-проектов одним щелчком мыши.
9. CODA
Проектируйте с использованием данных из документов и приложений, таких как Spotify, Wikipedia, Intercom и т.д. Создайте таблицу в Coda, подключите свой дизайн к таблице и наблюдайте, как она наполняется реальными данными.
10. Wireframe
Wireframe помог дизайнерам упростить создание дизайна с нуля. С помощью этого плагина вы можете создавать готовые экраны, с которыми проще работать. И пусть эти прототипы являются базовыми, и дизайнерам будет необходимо настраивать их в соответствии со своими потребностями, все экраны при этом выглядят одинаково. Лично я бы предложил вам не тратить время на разработку базового проекта, а использовать этот плагин для настройки основных элементов для более плавного взаимодействия с пользователем.
Заключение
Как я уже сказал, я использовал много плагинов Figma. И эти всего лишь 10 из моих самых любимых. Спасибо за чтение.
30+ полезных плагинов для Figma необходимых UX дизайнеру
Автор: Андрей Климов
Должность: Арт — директор
Публикую подборку полезных плагинов для работы в Figma, которыми пользуемся мы в студии karelin.cc. Все плагины разбиты по принципам работы, чтобы вам было проще найти нужный плагин под ваши нужды.
Принципы работы
- Плагины по работе с графикой
- Плагины для генерирования контента
- Плагины для анимации
- Плагины по наведению порядка в проекте
Плагины по работе с графикой
Blobs и Get Waves
Blobs позволяет нам делать простые абстрактные фоны в виде клякс. А Get Waves позволяет генерировать разные волны, иногда используем для создания графиков.
Image Tracer
Очень полезный плагин, который позволяет быстро перевести растровое изображение в векторное.
Color Kit
Этот плагин позволяет сгенерировать темные или светлые оттенки нужного цвета с выбором шага. Помогает нам при создании UI кита для проекта.
Webgradients и uiGradients
Плагины с большой библиотекой красивых градиентов.
TinyImage Compressor
Очень полезный плагин, который сжимает размер файлов лучше, чем экспорт по умолчанию из Figma. Мы часто используем его для оптимизации изображений под web сайты. После 15 сжатий файлов через TinyImage вам будет предложено приобрести лицензию.
Image Palette
Плагин Image Palette создаёт цветовую палитру на основе выбранного загруженного изображения, можно использовать также на логотипах.
Stark и Contrast
Эти плагины помогут посмотреть контрастность элементов по отношению друг к другу.
Remove BG
Крутой плагин, который позволяет быстро удалить фон у изображения.
Есть примечание: Для этого плагина вам потребуется аккаунт и вам дается 50 бесплатных действий на год.
Isometric
Плагин позволяет отобразить объект в изометрии вам только требуется настроить угол.
Плагины для генерирования контента
Chart и Charts
Плагины Chart и Charts позволяют генерировать диаграммы по заданным значениям. Мы часто используем на стадии прототипирования, когда нужно быстро показать экран с графиком клиенту или команде для лучшего понимания работы интерфейса.
Figmoji
Плагин для быстрой вставки эмоджи, а не искать нужный эмоджи в браузере.
Iconify
Очень полезный плагин для поиска и добавления пиктограмм прямо в Figma. Так же в этом плагине есть айкон паки, с помощью которых вы можете найти быстро разные пиктограммы в одной стилистике.
Unsplash
Unsplash — это большая библиотека фотографий, с помощью которой можно быстро найти и добавить фотографию прямо в проект.
Mapsicle и Map Maker
Эти плагины позволяют нам выбрать координаты и просто вставить карту прямо в проект. С картами можно взаимодействовать и гибко изменять параметры под себя.
Table Generator
Плагин генерирует обычную таблицу, есть возможность регулирования строк, колонок и ячеек, также можно добавить контент в каждую ячейку. В прототипировании чтобы быстро показать клиенту табличку этот плагин очень полезен.
Content Reel
С помощью этого плагина можно быстро заполнить сайт контентом. Например заполнить имя, фамилию, телефон, время и дату, быстро добавить аватар и тд… Один момент весь контент на английском.
Chroma
Теперь можно добавить цвет в цветовую палитру в один клик. Вам просто надо выбрать нужный объект с цветом и запустить плагин. Цвет появится в библиотеке стилей с названием выбранного объекта.
Wire Box
Плагин позволяет преобразовать готовый дизайн в вайфреймы. Вы просто выбираете нужный макет и запускаете плагин. Плагин очень помогает, когда у клиента есть готовый дизайн, а вам нужно его переделать и в вашем процессе решения задачи используются вайфреймы.
Плагины для анимации
GiffyCanvas
GiffyCanvas позволяет быстро создать gif внутри Figma. Нам просто надо выбрать 2 и более макетов, поставить время интервала и количество циклов.
LottieFiles
С помощью этого плагина вы можете быстро вставить логотип анимации в макет Figma. Плагин помогает нам, когда клиенту нужно показать примерно как будет выглядеть анимация в макете.
Плагины по наведению порядка в проекте
LilGrid
Классный плагин, который берет все неупорядоченные элементы в системе и организует их. Вам остается задать расстояние между элементами и во сколько колонок их организовать.
Design System Organized
Плагин для организации компонентов в Figma. Он позволяет сгруппировать и разгруппировать компоненты а также перемещать их в вашей библиотеке.
Design Lint
Плагин работает как поиск элементов в выбранном макете, у которых вы не использовали цвета и шрифты из библиотеки стилей. Таким образом плагин позволяет быстро находить несоответствия в макетах и исправлять эти несоответствия.
Viewports
Плагин показывает как выглядит ваш макет на разных устройствах. Главное не забывать настроить в Figma ограничения элемента в зависимости от размера окна.
Product Planer
Интересный плагин в котором много шаблонов по которым можно вести планирование по продукту прямо в Figma.
Rename It
Нам этот плагин помогает переименовать быстро слои с разными названиями, чтобы экспортировать макеты в Principle для создания прототипа.
Autoflow
Плагин помогает быстро показать переходы между макетами с помощью визуализации связей.
Time Machine
Этот плагин автоматически копирует версию, которую вы хотите сохранить, на другую страницу под названием «Time Machine» и присваивает макету имя с датой его сохранения.
Спасибо за просмотр!
Мы будем рады если эти плагины облегчат вам работу.
Введение | Plugin API
Добро пожаловать в Plugin API!
Плагины — это программы или приложения, созданные сообществом, которые расширяют функциональность Figma и FigJam. Плагины запускаются в файлах Figma или FigJam и выполняют одно или несколько действий пользователя. Они позволяют пользователям настраивать свой опыт или создавать более эффективные рабочие процессы.
Как и Figma и FigJam, плагины основаны на веб-технологиях. Вам понадобится понимание этих технологий для разработки плагинов. Вы будете писать плагины в JavaScript и создайте любой пользовательский интерфейс, используя HTML . Ознакомьтесь с необходимыми знаниями →
Плагины взаимодействуют с приложением Figma через специальный API плагинов . Они также могут использовать внешние веб-API . Вы можете создавать плагины, которые запускаются немедленно, или создавать плагины, которые требуют от пользователя ввода информации через пользовательский интерфейс (UI). Узнайте, как запускаются плагины →
Справочник по API и эта сопроводительная документация содержат информацию, необходимую для создания плагинов для Figma и FigJam. Чтобы задать вопросы, оставить отзыв или связаться с другими разработчиками плагинов: Присоединяйтесь к нашему серверу Discord, управляемому сообществом →
Наше руководство по установке проведет вас через процесс настройки вашей среды и запуска образца плагина. Начало работы с API-интерфейсом плагина →
Доступ к API-интерфейсу плагина
API-интерфейс плагина поддерживает функции чтения и записи , позволяя разработчикам просматривать, создавать и изменять содержимое файлов дизайна Figma и FigJam.
Как в Figma, так и в FigJam вы можете получить доступ к большей части API плагинов через глобальный объект Figma .
Плагины раскрывают, в первую очередь, содержимое файла. Это все, что существует на панели слоев, и любые свойства, связанные с этим слоем на панели свойств. Плагины могут просматривать и изменять аспекты этих слоев или узлов, такие как цвет, положение, иерархия, текст и т. д.
API плагина не позволяет вам получить доступ к чему-либо в этом файле, находящемуся за пределами холста. Плагины не могут получить доступ:
- Стили и компоненты из любой библиотеки команды или организации. Plugin API может получить доступ только к стилям, компонентам и экземплярам, которые являются локальными для этого файла.
- Внешние шрифты или веб-шрифты, доступ к которым осуществляется через URL-адрес. Плагины могут получить доступ только к тем шрифтам, которые доступны в редакторе. Сюда входят шрифты Figma по умолчанию, общедоступные шрифты организации или шрифты, хранящиеся локально на вашем компьютере. Вам потребуется загрузить любые шрифты, которые вы хотите использовать в своем плагине. Это не относится к шрифтам, которые вы хотите использовать в пользовательском интерфейсе вашего плагина.
- Другие метаданные файла, такие как команда или местоположение файла, разрешения, пользователи или любые комментарии, связанные с этим файлом. Включает в себя историю версий этого файла. Вы можете получить доступ для чтения к этим аспектам файла через REST API Figma.
Структура документа
Каждый файл в Figma состоит из дерева узлов, и в корне каждого файла Figma или FigJam находится узел документа. Узел документа — это то, как вы получаете доступ к содержимому файла и исследуете его.
В файле дизайна Figma каждый DocumentNode будет иметь PageNode, представляющий каждую страницу в этом файле Figma. На каждой вкладке браузера может быть только один узел документа, и каждый из его дочерних элементов должен быть PageNodes.
Поскольку файлы FigJam не поддерживают страницы, не будет никаких узлов страниц для изучения. Вместо этого дочерними элементами узла документа будут слои и объекты на этой доске.
У узла документа может быть любое количество дочерних узлов. Каждое поддерево, происходящее из узла документа, представляет собой слой или объект на холсте. В Figma есть определенные узлы или классы для разных типов слоев, таких как фреймы, компоненты, векторы и прямоугольники.
Узлы имеют ряд связанных с ними свойств. Некоторые из них являются глобальными свойствами , которые существуют на каждом узле, тогда как другие свойства будут специфичны для типа узла.
Вы можете создавать плагины для определенного типа редактора, обоих редакторов или создавать плагины, которые выполняют разные действия в каждом редакторе. Хотя некоторые типы узлов могут быть созданы только в определенном файле или типе редактора, вы, как правило, сможете читать и изменять большинство узлов, независимо от типа редактора.
На основе браузера
Figma — это преимущественно браузерное программное обеспечение, что означает, что его можно запускать во всех полноценных операционных системах для настольных компьютеров (MacOS, Windows, Linux и т. д.), а также в Chrome OS.
Как и Figma, плагины основаны на веб-технологиях. Часть API плагина работает в
, что означает, что вы также можете получить доступ к API браузера. Это включает выполнение сетевых запросов, открытие файлов и использование таких функций, как , WebGL, WebAssembly, звуковых API и т. д.
API подключаемых модулей не поддерживает API для настольных компьютеров. Хотя у Figma есть настольные приложения, не все получают доступ к Figma через рабочий стол. Мы хотим, чтобы плагины были такими же доступными и кроссплатформенными, как сама Figma. Существуют также проблемы безопасности, которые требуют тщательного и внимательного подхода.
Браузеры уже поставляются с такими API, как чтение и сохранение файлов. Разработчики браузеров уже приложили немало усилий для создания безопасных API, и мы готовы следовать их примеру.
Core API
Мы построили Plugin API на основе набора фиксированных контролируемых конечных точек. Через Plugin API мы можем предоставить множество дополнительных функций, включая вспомогательные функции, которые выполняют или автоматизируют последовательность функций или событий.
Мы приняли сознательное решение сохранить основной API подключаемых модулей как можно более ограниченным. Это снижает риск того, что мы внесем изменения в API, нарушающие код, и упрощает поддержку плагинов разработчиками плагинов.
Это означает, что мы не включаем никакие вспомогательные функции, которые разработчики могут написать, используя существующие функции, доступные в Plugin API.
Действия пользователя
Плагины запускаются в файлах Figma или FigJam и выполняют одно или несколько действий пользователя. Эти действия пользователя обычно недолговечны и должны быть инициированы пользователем.
- Пользователи могут одновременно запускать только один плагин и одно действие.
- Невозможно создавать плагины, работающие в фоновом режиме.
Пользовательский интерфейс плагина
Вы можете выбрать, будет ли ваш плагин запускаться немедленно или пользователи смогут вводить параметры.
Плагин может открыть модальное окно как
и написать HTML, CSS и JavaScript внутри этого
. Вы можете создать любой пользовательский интерфейс внутри этого модального окна. Вы можете решить, закрыть ли модальное окно или оставить его открытым в файле. Создать пользовательский интерфейс →
Возможность извлекать компоненты из библиотеки кнопок Figma, средства выбора цвета и т. д. значительно ускоряет разработку плагинов и помогает создать пользовательский интерфейс, отражающий собственный пользовательский интерфейс Figma.
Мы не предоставляем эти компоненты как часть основного API плагинов Figma. Разработчик плагинов Figmate и Figma Том Лоури собрал библиотеку компонентов React, которые вы можете использовать для создания пользовательского интерфейса вашего плагина. Откройте репозиторий GitHub →
Параметры плагина
Разработчики могут создавать плагины с параметрами, которые позволяют плагинам принимать данные от пользователей через меню быстрых действий.
Добавление параметров означает, что вам не нужно создавать собственный пользовательский интерфейс. Он также упрощает работу пользователей плагина, которые могут запускать плагин прямо из меню быстрых действий.
Перезапустить плагины
При разработке плагина у вас есть возможность включить кнопку перезапуска. Поскольку невозможно установить сочетания клавиш для подключаемых модулей, это упрощает запуск подключаемого модуля несколько раз и позволяет соавторам повторно запускать подключаемый модуль из одного и того же файла.
manifest.json
"relaunchButtons": [
{"команда": "редактировать", "имя": "Редактировать фигуру"},
{"команда": "открыть", "имя": "Открыть формирователь" , "multipleSelection": true}
]
В файлах дизайна Figma кнопка перезапуска появится на панели свойств. В файлах FigJam кнопка перезапуска появляется в меню свойств узла. Кнопки перезапуска недоступны на страницах или узлах документа в FigJam.
К одному и тому же узлу можно добавить несколько кнопок перезапуска. Если несколько кнопок перезапуска из одного и того же плагина добавляются в один и тот же узел, они группируются в одну кнопку с подменю. Порядок кнопок определяется порядком элементов в манифесте Массив перезапуска кнопок
. Узнайте больше о перезапуске в манифесте плагина →
Управление плагинами
Поддержка
Figma не обеспечивает поддержку сторонних приложений. Как разработчик плагина, вы обязаны помогать пользователям вашего плагина с техническими проблемами.
Вам необходимо добавить контакт службы поддержки , когда вы отправляете свой плагин на утверждение. Это может быть адрес электронной почты, с которым пользователи могут связаться, или ссылка на веб-сайт или справочный центр. Управление плагинами в качестве разработчика →
Управление версиями
После того, как Figma одобрит ваш плагин, вам не нужно отправлять его на дальнейшее рассмотрение. Это означает, что вы можете публиковать любые обновления немедленно. Вы сможете добавить подробное описание любых изменений или обновлений в История версий плагина .
Когда вы публикуете обновление, Figma обновит плагин для каждого пользователя. Пользователи, которые уже установили ваш плагин, будут иметь доступ только к последней версии вашего плагина. Пользователи не могут вернуться к предыдущей версии плагина. Если вам нужно отменить какие-либо изменения, вы можете повторно опубликовать более раннюю версию плагина.
Аналитика
В настоящее время Figma не предоставляет никакой аналитики или отчетов об использовании плагинов или отчетов об ошибках/сбоях. Мы рекомендуем использовать собственную аналитику или службу отчетов о сбоях для мониторинга производительности ваших плагинов.
Figma каждую неделю будет отправлять разработчикам плагинов уведомление о любых действиях в сообществе. Это включает в себя общее количество лайков и установок за эту неделю.
Плагины Figma | Полное руководство по плагинам Figma
Плагины Figma — это платформа для разработки, которая предоставляет дополнительные инструменты для дизайнеров пользовательского интерфейса, а также коллекции плагинов, созданные различными сообществами. С Figma вы можете расширить свои возможности для работы по проектированию, а также предоставляет полезные функции в виде интересных плагинов с форматом их периодического обновления. Если вы изучите Figma в Интернете, вы найдете в нем несколько плагинов, и здесь мы увидим некоторые из них с их правильным объяснением. Вы получите знания о том, как вы можете подключиться к этим плагинам и правильно использовать их для своей дизайнерской работы.
Лучшие плагины Figma
Здесь, в нашем списке, у нас есть 6 лучших плагинов Figma, которые вы должны знать для эффективной работы в этой области.
Итак, давайте рассмотрим эти плагины один за другим.
1. Катушка контента
Как мы можем понять из названия, катушка контента предоставляет контент, но какой тип контента? Он включает в себя аватары, текстовые строки, различные типы значков, которые вы можете использовать в своей дизайнерской работе. Вам просто нужно выбрать слои в файле дизайна и экспортировать их в Figma (вы можете выбрать один или несколько слоев по своему усмотрению), затем выбрать аватары, текст и другие вещи из этого плагина, которые вы хотите использовать в своем дизайне.
2. Unsplash
Unsplash — это прекрасная коллекция почти всех типов изображений с высоким разрешением, и вы можете без опасений использовать изображения из нее в своих дизайнерских работах. Вы также можете найти нужный тип изображения в поле поиска. Вы также можете выполнять любые манипуляции с изображением, сделанным этим плагином.
3. Палитра изображений
На ее основе можно создать сплошной цвет для дизайна пользовательского интерфейса. Когда вы извлекаете цвет из любого изображения в Figma с помощью этого плагина, он дает 5 цветовых диапазонов из этого извлечения.
4. Figma Chat
Как следует из названия, чат похож на приложение для чата, поэтому вы можете взаимодействовать с людьми в отношении вашего файла проекта, и в этом взаимодействии вы можете делиться элементами своего дизайна для получения решений. для ваших проблем.
5. Super Tidy
В проектировании важную роль играет выравнивание, потому что нам каждый раз необходимо точное выравнивание различных элементов нашего дизайна. Super Tidy — это один из плагинов Figma, который очень быстро выравнивает наши элементы дизайна по принципу их распределения на холсте. Он выравнивает наши элементы и переименовывает их во время рендеринга их на слое в определенной последовательности, и эта последовательность основывается на их положении или распределении на холсте.
6. Способен
Этот плагин работает для дифференциации цветового контраста между слоями. Это означает, что он автоматически сравнивает контраст выбранного вами слоя и дает вам информацию об их цветовой разнице для правильного рабочего процесса вашего дизайна.
Это были некоторые важные плагины Figma, которые мы видели выше. Вы найдете больше, когда зайдете на Figma.
Теперь давайте посмотрим, как мы можем установить их на наш персональный компьютер, чтобы использовать их в наших целях проектирования.
Как установить плагины Figma?
Теперь мы увидим процесс установки плагинов Figma. Вы найдете много плагинов на Figm.com, но мы покажем вам, установив один плагин для вашего сведения, и таким же образом вы можете установить другие плагины Figma.com в соответствии с вашими требованиями.
Первое, что вам нужно сделать, это найти Figma.Com в любой поисковой системе, и вы найдете эту страницу веб-сайта, которая является домашней страницей плагинов Figma.
Теперь перейдите на вкладку сообщества на этой странице и нажмите на опцию плагинов в поле прокрутки вниз.
Теперь здесь вы найдете ряд списка плагинов. Мы установим Unsplash для вашего понимания, поэтому нажмите кнопку «Установить».
Если вы не вошли в систему, вам необходимо войти в Figma.com. Если вы не создали на нем учетную запись, нажмите кнопку «Зарегистрироваться» в этом диалоговом окне, или, если у вас уже есть учетная запись на figma.com, нажмите кнопку «Войти» в этом окне.
После входа в систему вы должны еще раз нажать кнопку установки нужного плагина.
После установки вместо кнопки «Установить» появится кнопка «Установлено».
Таким образом, вы можете установить любой плагин Figma, чтобы использовать его для своих целей проектирования.
Как использовать?
Ниже показано, как использовать плагины Figma:
Теперь, после установки нужного плагина, перейдите к этому прокручиваемому списку, нажав кнопку «Поиск», и перейдите к опции «Плагины» в этом списке, затем нажмите на желаемый установленный плагин. плагин.
Мы открыли плагин Unsplash, поэтому он откроется вот так. Поскольку Unsplash предлагает вам изображения, вот список изображений в диалоговом окне плагина Unsplash. Вы можете выбрать любое изображение из этого списка или найти нужное изображение в его поисковой строке. После того, как желаемое изображение откроется, вы можете использовать это открытое изображение в экспортированном файле вашего дизайна в Figma.