Статья для тех, кто хотел бы написать свой плагин для Figma с помощью нейросетей. Рассказываю о лучшем бесплатном способе, чтобы вам не пришлось страдать.
Где вы были с 8 до 11?
С самого утра я садился за ПК и начинал нейронить, размышлять над архитектурой и дазайном плагина.
Бывало, на одну фичу уходил целый восьмичасовой рабочий день, в течение которого я плодил аккаунты для Cursor AI и пытался менять модели, чтобы хоть какая-то выдала адекватный результат.
Это было больно, очень больно…
Давайте про сам плагин
Плагин есть в Figma community — он полностью бесплатный и стабильно работает.
Если коротко: плагин позволяет соединять объекты стрелками, которые можно кастомизировать и писать на них текст, а также подсвечивать связанные объекты, чтобы связь можно было проследить в объемных схемах.
Изначально я вдохновлялся нодовой системой из ComfyUI (веб-интерфейс для запуска ИИ-моделей), однако потом понял, что нужно просто сделать удобные стрелки, как в Autoflow (у которого почти миллион пользователей)
В итоге получилось даже лучше: стрелки перестраиваются при запуске плагина, кастомизация обширнее и проработаннее, а перерисовка линий при перетаскивании связанных объектов по ощущениям плавнее. Это я еще не говорю про разделы с доп. функциями, которые являются платными в других плагинах (о них чуть ниже).
Также я добавил отдельную вкладку с курсорами, которые можно добавлять на холст — чтобы не бегать между файлами и иметь все в одном месте, так как плагин больше про прототипирование.
А вот и сами фигуры, аналогичные тому, что есть в FigJam. Вы просто нажимаете на любую из них, и она копируется к вам в буфер обмена, после чего остается нажать CTRL + V и вставить фигуру.
Так, кстати, можно делать с вообще любыми объектами в Figma.
Если пользователю не понравятся мои кастомные стрелки, то он всегда может взять нативные FigJam-овские, которые находятся рядом со всеми фигурами в этом же разделе!
Какой сервис и модель лучше?
Перейдем сразу к десерту, без второго блюда? А компот я донесу чуть позже!
Если коротко: лучший бесплатный сервис — Gemini CLI с моделью Gemini 2.5 Pro, а лучший платный, особенно если вас не забанят через 2 дня — Claude Code с моделью Claude 4.1 Opus.
Я пользовался Claude Code, и он прекрасен, однако в тарифе Pro дают только Claude Sonnet 4, а Opus доступен либо в приложении на ПК, либо в браузере без доступа к локальным файлам.
Opus 4.1 есть в Cursor AI в тарифе Pro, однако лимиты вас быстро настигнут, особенно если вы новичок и ничего не понимаете в программировании.
Лично я остановился на Gemini CLI, где дают 1000 запросов в день и самую мощную модель. Только не забывайте обновлять периодически сам CLI, потому что последние версии работают намного лучше первых, с которыми вообще невозможно что-либо написать…
Для новичков также могу посоветовать Visual Studio Code, где в расширении Copilot дают большую квоту, которой хватает надолго. Проблема в том, что модельки старые, а Gemini 2.5 Pro по личным наблюдениям работает лучше через Gemini CLI.
***
Изначально я не знал, какой сервис выбрать и какие вообще есть, поэтому тыкался до упора в Cursor AI и продлевал себе Free-тариф до бесконечности с помощью китайской утилиты, но это тупиковый путь, особенно если в файле за 4000 строк кода.
Пробовал и Qoder — не понравился, потому что лимиты достигаются быстро, и приходится менять аккаунт, коих у меня ограниченное количество.
Что меня спасло и как я смог-таки написать плагин
Сейчас будут страшные кадры, поэтому смотрите на них с осторожностью…
Это история версий плагина — так я ее вел на протяжении всей работы.
Проблема всех ИИ-моделей в том, что у них ограниченная память, и часто их приходится запускать заново, с нуля, и заново рассказывать им про структуру файлов, архитектуру плагина.
И каждый раз модель обращает внимание на разные детали, пытаясь решить задачу новым способом. Это и плюс, и минус.
Это минус, потому что модель может поменять работающий метод и сломать его, из-за чего ломается код. Например, я пытался ускорить отрисовку линий, и они действительно стали рендериться быстрее, но сломался кэш, и плагин стал люто тормозить…
Но благодаря истории версий я смог объединить два метода в один: работающий кэш и более шустрый рендер — и это давало потрясающий результат!
Плюс я создавал текстовые файлы с описанием изменений и внесенными оптимизациями, чтобы модель не делала то же самое.
Бывало, модель читала эти изменения невнимательно, так как уместить кучу контекста удавалось далеко не всем. Лучше всего с этим справлялась Gemini 2.5 Pro.
А иногда я сам не понимал проблему и бил в одно место по несколько часов, ломая код. Нужно было просто отвлечься и подумать, в чем истинная причина.
Интересный факт
Я мог по несколько дней пытаться оптимизировать последнюю версию, но затем просто на рандоме запускал одну из предыдущих, и она работала гораздо стабильнее!
И именно в ней оказывалось проще исправить старые баги, нежели долизывать самую новую версию, в которой что-то сломалось…
Главный советы, чтобы не выгореть
-
Берите паузу! Отходите на 15 минут от ПК периодически, ставьте себе ограничение на день, выходите на улицу и гуляйте — так вы быстрее увидите решение проблемы или придумаете новый сценарий. Если сидеть 24/7 за ПК и материться на модель, то ничего не получится — вы просто будете ходить вокруг да около, убивая лимиты.
-
Перед началом работ продумайте сценарии, корнер кейсы, проведите хоть какое-то исследование конкурентов, их фич. Накидайте UI, чтобы вам самим было проще ориентироваться. Чем лучше вы сами будете понимать финальный продукт, тем проще будет достучаться до нейросети.
-
Также попросите модель проанализировать похожие решения, накидать архитектуру и технологии, чтобы код сразу выстраивался правильно и емко — так следующим агентам будет проще его сканировать и редактировать.
-
Будьте осторожны с Claude, так как он иногда пишет целые талмуды за раз, которые раздувают код до немыслимых объемов! Заставляйте его писать так, чтобы код минимально увеличивался.
-
Десять раз подумайте, надо ли оно вам! Это может обернуться кошмаром, особенно если вы упертый человек. Если не понимать, чего вы хотите и для чего, то нейронка точно не поймет — это 100%.
-
Разбивайте файл на составные части. Например, метод отрисовки линии стоило бы вынести в отдельный модуль, однако я не понимал, как это сделать правильно, и плагин ломался — поэтому я запихал все в одно место, что затрудняет работу модели.
Немного истории для потомков
Вот так выглядела первая версия плагина 🙂
Багованая, некрасивая, с непродуманными сценариями.
Не бойтесь начинать с чего-то малого и потихоньку двигаться к конечному результату — маленькими итерациями все получится!
У меня вышло около 40 различных версий со своими преимуществами и недостатками, и в конечном итоге за месяц я собрал рабочую версию.
Концовка
Если все же решитесь на эту авантюру, то я желаю вам удачи!
Если захотите следить за ходом событий, то можете сделать это в моем тг канале.
Недавно я выпустил еще один плагин по генерации палитр, а совсем недавно добавил к себе на сайт черную дыру :))
P.S. У плагина Linx уже более 600 пользователей 🥳
ссылка на оригинал статьи https://habr.com/ru/articles/947708/