Статья для тех, кто хотел бы написать свой плагин для 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 пользователей ?