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. Все плагины разбиты по принципам работы, чтобы вам было проще найти нужный плагин под ваши нужды.

Принципы работы

1. Плагины по работе с графикой
2. Плагины для генерирования контента
3. Плагины для анимации
4. Плагины по наведению порядка в проекте

Плагины по работе с графикой 

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 плагина работает в