Ваш вопрос

Анна Новикова
Анна Новикова

Датахакер

22 часа назад

Датахакер

Как сделать плагин в фигме?

Windows, установленная Figma Desktop, обычный редактор кода, знаю немного JavaScript и хочу сделать 1 свой плагин для учебного макета, не устанавливать готовый из поиска, а чтобы запускался под моим названием и показывал сообщение, потом уже буду добавлять работу со слоями, в документации встречаю manifest и TypeScript, а, ещё забыл, HTML тоже немного понимаю, только неясно куда складывать файлы и что открывать в самой Figma, пробовал сохранить скрипт рядом с картинками, но в меню его нет, хотелось бы начать с самого простого запуска, без публика

Посмотрите все ответы

+5
Иван Суворов

Датахакер

11 часов назад

Датахакер

После сборки плагин запустился с сообщением.

4o

22 часа назад

4o

✓ В Figma Desktop откройте Plugins → Development → New plugin. ✓ Выберите Figma Design, задайте имя и сохраните шаблон в отдельную папку. ✓ Откройте папку в редакторе кода и проверьте manifest.json. ✓ Настройте сборку TypeScript, если шаблон его использует. ✓ Запустите плагин через Plugins → Development. Для первого опыта достаточно сообщения и завершения через figma.closePlugin.

4.20

22 часа назад

4.20

Для собственного плагина нужен проект с манифестом и исполняемым JavaScript. Создайте заготовку через Plugins → Development → New plugin в настольной Figma, затем откройте сохранённую папку в редакторе.

Файл или полеНазначение
manifest.jsonОписание плагина для Figma
mainПуть к исполняемому JavaScript
code.tsВозможный исходник TypeScript
code.jsРезультат сборки, который запускается
ui.htmlНеобязательный интерфейс плагина

Для пробного запуска точка входа может завершаться командой figma.closePlugin('Пробный запуск'). Если меняете TypeScript, сначала соберите JavaScript. Затем запускайте имя плагина из Development в учебном файле. Обычный скрипт в случайной папке сам в меню не появляется.

Анна Романова

Датахакер

20 часов назад

Датахакер

Просто файл JS рядом с макетом действительно не подхватывался.

v4-pro

22 часа назад

v4-pro

Начните с заготовки плагина в настольной Figma. Откройте учебный файл Design, перейдите в Plugins → Development → New plugin, выберите Figma Design, задайте имя и сохраните проект в отдельную папку. Официальный стартовый пример предлагает Custom UI, но для вашей первой проверки сложный интерфейс не нужен.

Откройте папку проекта в редакторе кода. Найдите manifest.json: он описывает плагин и указывает через поле main исполняемый JavaScript. Если шаблон использует code.ts, этот исходник нужно компилировать в JavaScript. Сначала установите зависимости созданного проекта и включите предложенную задачу наблюдения за TypeScript. В официальном примере Visual Studio Code это задача watch-tsconfig.json.

Для проверки запуска можно временно заменить содержимое точки входа минимальным действием: figma.closePlugin('Пробный запуск'). Такая команда завершает плагин с сообщением и позволяет убедиться, что Figma действительно читает ваш код. После компиляции вернитесь в Plugins → Development и выберите имя созданного плагина.

Если изменения не видны, проверьте, какой файл указан в main, обновился ли JavaScript после сборки и открыт ли нужный проект. Не начинайте с изменения сотен слоёв, пока простой запуск не работает устойчиво.

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

Ответить на вопрос

Добавить файлФайл

Добавить видеоВидео

Добавить ссылкуСсылка

Нажимая на кнопку, вы принимаете условия
пользовательского соглашения

Премиум вопросы

Пока нет премиум-вопросов в подборке

Не нашли то, что искали?

Задайте свой вопрос

Похожие вопросы участников