Почему при запускании фигмы не работает plugin

Что могут и не могут плагины в Фигме

Как все мы знаем, недавно в Фигме появилась поддержка плагинов. Это очень радостное событие. Однако его значимость не стоит переоценивать, поскольку нет ни одного плагина, который кардинально изменил бы рабочий процесс. Плагины — не ключевая причина использовать Фигму, они лишь помогают автоматизировать рутины и добиваться некоторых новых результатов. Тех плагинов, которые завязывают на себе весь рабочий процесс, точно стоит избегать. Но пока таких для Фигмы и не написали ещё.

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

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

Установленные плагины можно найти в основном меню, а также в контекстном. Появилась так же горячая клавиша Opt + Cmd + P ( Alt + Ctrl + P на Windows), которая запускает последний использованный плагин. Очень удобно для таких плагинов как Paddet, которые обновляют отступы.

Я не стал составлять длинный список самых горячих и сексуальных плагинов, которыми срочно нужно обвешать Фигму как новогоднюю ёлку. За меня справился Алексей Бычков, который составил внушительный каталог плагинов для Фигмы.

Вместо этого я нашёл интереснейший текст в документации к API плагинов — What’s Supported.

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

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

Фигма не хочет наступать на грабли Скетча

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

Плагин имеет доступ только к структуре локального файла, открытого в Фигме

API Фигмы уже поддерживает больше сотни методов и свойств, но он всё ещё очень новый, если не сказать, что сырой.

Что в релизе. Плагины в Фигме уже могут:

• Создать новый слой. Демонстрационный плагин, на примере которого можно научиться делать свои плагины, позволяет наспамить на холст оранжевых квадратиков.
• Создавать компоненты из фреймов. А значит, можно сделать плагин, который позволил бы разом создать сотню компонентов из набора иконок.
• Читать большинство свойств слоя, а также изменять некоторые. Может менять цвет, название, положение в иерархии, координаты, размер и другие свойства. У текстовых слоёв можно менять контент. Это позволит автоматически заменять контент в слоях плагинами вроде Find and Replace или отделить дизайн от данных, выгрузив тексты в Google Sheets. Но подсасывать новые тексты из таблицы придётся вручную через всплывающее окно.
• Получить доступ к существующим компонентам, которые уже присутствуют в файле.
• Открыть всплывающее окно и отобразить интерфейс, написанный на HTML/CSS/JS. Развязывают нам руки в оформлении этого окна.
• Получить доступ к API браузера. Поскольку часть плагина функционирует как айфрейм, можно посылать сетевые запросы, открывать файлы, использовать WebGL и другие крутые штуки. Это позволяет вставлять в Фигму новый контент, например фоточки с фотостоков вроде Unsplash или 3D-рендеры. Попытки с 3D пока очень робкие: Roto. Нормальных плагинов, которые качественно работали с WebGL я ещё не обнаружил.

О планах. Плагины в Фигме ещё не могут:

• Читать наследуемые свойства. Если у экземпляра компонента синий фон, плагин об этом не узнает, поскольку информация хранится в мастере, к которому плагин не получит доступ через экземпляр.
• Иметь свои горячие клавиши. Трудновыполнимая задача, поскольку это должно работать на всех платформах. Кроме того, мы возвращаемся к нашей любимой проблеме конфликтов клавиш, которую сполна испытали в Скетче. Для Мака это было бы просто реализовать, запихнув все нужные команды в системное меню, но они не будут решать эту проблему только для Мака.
• Детачить экземпляры
• Создавать прототипы и управлять ими
• Делать аутлайн
• Получить список локальных стилей
• Выделять фрагменты текста

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

Не в планах. Плагины в Фигме вряд ли смогут:

• Самое страшное. Срабатывать по эвентам Фигмы. Некоторые плагины хочется запускать не по кнопке, а в реальном времени, как в Скетче. Для этого нужна привязка к событиям, происходящим в документе: например, поменялся выделенный слой, фрейм растянули и тд. Это грозит тем, что потенциально тяжёлый код может срабатывать несколько раз в секунду и запускать непредсказуемые процессы, которые значительно замедлят Фигму. Кроме того, такие плагины особенно опасны, поскольку дизайнер перестаёт контролировать свой макет. Явное действие с запуском плагина избавляет от испорченных макетов.
• Менять интерфейс самой Фигмы. Тёмная тема отменяется, потому что плагины не имеют доступа к UI-компонентам самого редактора.
• Встраиваться как дополнительные панели в интерфейс. Встаёт та же проблема эвентов и работы в реальном времени. Кроме того, разработчики Фигмы не хотят, чтобы пользователи путали интерфейс плагинов с интерфейсом Фигмы.
• Запускаться и работать в фоновом режиме. Это бы усугубило проблему выше. Может быть неочевидно, что плагин вообще запущен и вызывает тормоза.
• Запускаться параллельно с другими плагинами. Невозможно предугадать, как они могут конфликтовать друг с другом. Кроме того, если в одном плагине пользователь ввёл логин и пароль, другой плагин не должен получать к ним доступ.
• Получать доступ к комментариям, ID файла или пользователя, иначе они смогут отслеживать наши действия или даже открыть файл, когда мы его закрыли.
• Получать полный доступ к библиотеке организации. Иначе плагины от сторонних разработчиков смогли бы украсть или испортить весь UI-кит этой организации.
• Работать в браузере, поскольку там функционирует совершенно иная среда выполнения. Сейчас плагины работают в клиенте фигмы для Windows и macOS.
• Получить доступ к истории версий файла. Это непросто, потому что в той же вкладке будет открыта предыдущая версия файла, а значит, удвоится нагрузка на оперативную память. Особенно это рискованно на огромных файлах.

По теме

• Виктор Теплов подробно рассказал, как использовать Google Sheets Sync, Paddet, Blobs и другие плагины.
• Подборка от UXPub: 10 многообещающих плагинов Figma

Я веду /designer — телеграм-канал и паблик об интерактивном дизайне, инструментах и дизайнерах.

Источник

Как починить Figma после последнего обновления

Около недели назад случился конец света, конец света для многих дизайнеров — перестала запускаться самая важная программа для интерфейсного проектирования, а именно Figma.

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

Uh oh … we can’t open that file

Что собственно у меня произошло? Просто Figma перестала открываться, белый экран, а потом ошибка, что где-то слетел webGL. С какого и почему, неизвестно. Но ошибка подсказывала, что это может быть из-за видео карты или драйверов. Жест!

Видюха работала исправно, не смотря на то, что ей 10 лет. Драйвера я на всякий случай обновил, но это не помогло. А так как работать figma перестала именно после своего обновления, то я предположил, что с последним обновлением могли перестать поддерживать старые видео карты. Но сама эта мысль очень абсурдна, ведь для проектирование графических интерфейсов особые мощности то и не нужны. Раньше Figma запускалась и быстро летала и на менее мощной машине. Но поделать было нечего.

Последним шагом стала переустановка системы, потому что все предыдущие шаги и переустановка самой Figma не помогли. Не помог и запуск программы с параметром -disable-gpu-compositing.

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

Решение пришло откуда не ждали

В один прекрасный день, Дима сказал, что у него обновилась Figma и попросил чекнуть апдейт для своей машины. Я запустил ПК, открыл Figma, но апдейта не случилось как должно было. Ну и не надо, подумал я, а сам краем глаза заметил маячащие обновления системы Windows.

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

И, Господи, чудо! Оно ожило!

В этот момент один товарищ вспомнил о недавней легенде, что какое-то Виндовское обновление ломало аппаратную работу с 3D графикой. А видимо новое обновление этот косяк исправило. Конечно, это тоже догадка. Но очевидно, что был какой-то софтверный конфликт. Так, что если вы тоже столкнулись с такой проблемой, то принудительно обновите систему и переустановите Figma!

Источник

Плагины Figma — что это такое? Как установить? Как использовать?

Инструкция по плагинам в Figma для начинающих. Разбираем как с ними работать.

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

Что такое плагины в Figma и для чего они нужны?

Плагин в Figma — это специальное дополнение, которое увеличивает стандартные возможности программы. С их помощью вы можете решать различные задачи быстрее и проще.

Например перед вами стоит задача вставить изображение с сайта unsplash. Конечно вы можете зайти на этот сайт, найти там подходящую картинку, скачать её на рабочий стол или скопировать и затем вставить в Figma. Есть путь короче. Например с помощью плагина «Unsplash» это можно сделать буквально за пару кликов.

Есть плагины, которые позволяют вставлять иконки, иллюстрации, фотографии, делать таблицы, вставлять «Рыбу текст», создавать текст по кругу и т.д.

Как найти плагины в фигме?

Первый способ:

Чтобы найти нужные плагины перейдите во вкладку «Community». Затем нажмите на вкладку «Plagins». Внизу будет расположен список всех плагинов, от самых популярных.

Второй способ:

Вы можете использовать строку поиска, которая расположена сверху. Например если ввести слово «Icons», то найдете плагины с иконками.

Топ плагинов

Популярные плагины расположены в списке (как показано на рисунке выше) по убыванию. Рекомендую посмотреть на них обзоры (например на youtube). Также вы можете изучить информацию на нашем сайте. Мы отбираем только лучшие, которые сами используем в своей работе.

Как установить плагин в Figma

Чтобы установить плагин нажмите на кнопку «Install», напротив нужного представленного из списка.

Также добавить плагин в его описании. Там тоже есть кнопка «Install». В описание можно перейти выбрав какой-либо плагин из списка.

Как использовать плагины в Figma?

Для того, чтобы использовать установленный плагин в фигме, , перейдите в ваш проект и выберите вкладку «Plagins» и нужный плагин (как показано на рисунке выше). К каждому плагину обычно есть инструкция от разработчиков, которую вы можете почитать, а также куча обзоров в интернете.

Как удалить плагины?

Удаление через вкладку «Community»

Для удаления плагинов перейдите во вкладку «Community», выберите вкладку «Plagins» и напротив того плагина, который хотите удалить нажмите кнопку «Delete».

Удаление через вкладку профиля

Удобно удалять плагины во вкладке профиля. Для этого нажмите на вашу аватарку сверху, слева. Перейдите во вкладку «Plagins». Там будет список всех установленных вами плагинов. Нажмите на иконку минуса, чтобы удалить не нужные.

Источник

Плагины в Figma. Как установить

Плагины для Фигмы появились далеко не сразу, но на текущий момент их список насчитывает уже значительное количество наименований.

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

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

Как установить плагин

Плагины устанавливаются в интерфейсе самой Фигмы — как мы помним, в первую очередь Figma это облачное решение.

Поэтом открываем приложение (или веб-версию), переходим в первый экран и следуем инструкциям:

1. Переходим во вкладку Plugins
2. Либо выбираем из первого экрана, либо жмём на «Browse all plugins»

1. Плагины находятся в разделе Community, также как и остальной контент, доступный для скачивания. Этот раздел доступен в самой первой вкладке Фигмы, там же, где находится ваш профиль и поиск.

Плагины в Figma
Переключите на Plugins, чтобы просматривать только плагины

Плагины или файлы в Figma

Вы также можете выбрать одну из категорий, либо перейти в Explore для просмотра всех плагинов

Кликаем на иконку плагина

Если нам нравится описание, жмём кнопку Install

Вы великолепны!

После этого плагин установлен и вы можете им пользоваться

Как пользоваться плагином

Все установленные плагины доступны в выпадающем меню Plugins

Чтобы воспользоваться плагином как правило требуется:

1. Выбрать элемент в проекте, к которому вы хотели бы применить действие плагина
2. Выбрать из контекстного меню необходимый плагин
3. Следовать инструкциям в интерфейсе плагина

Из этого же меню можно запустить последний плагин еще раз для любого выбранного элемента

Лучшие плагины для Figma по версии SVGPNG.RU

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

TOP-1: Unsplash

Банк бесплатных изображений, которые можно использовать в коммерческих целях.

TOP-2: Figmotion

Плагин позволяет создавать анимацию CSS прямо в Figma

TOP-3: Arc

Arc восполняет недостоющий функционал Figma по созданию изогнутого текста (текста дугой или по кругу). Незаменимое дополнение при создании логотипов или печатей

Играй бесплатно в браузере!

Заполните форму, мы сделаем иконку
и добави ее в коллекцию

Источник