Как я ускорил разработку плагинов для Figma с 4 месяцев до 3 дней
Это реальная история о том, как я наивно решил, что нашел чит-код, но по факту запер себя в бесконечном дне сурка. Чуда не случилось: свой первый плагин я вымучивал долгих 4 месяца, утопая в багах и переписывая файл на 2000 строк кода. Но этот ад того стоил. В этой статье я расскажу, как выйти из ловушки и начать писать плагины в удовольствие — так, будто просто проходишь любимую игру, укладываясь всего в 3-4 дня.
До этого я уже писал про свои плагины, например, Аналог Autoflow — Linx, или задачник Taskflow. Писал про плагин с более чем 1200 PNG элементов для дизайнеров в 4K — Design Kit, а также про плагин с WebGL-симуляциями — Let's simulate. Все эти плагины бесплатны и демонстрируют мой реальный опыт в этой сфере.
Продолжаем! Так как же создавать плагины в удовольствие?
Секрет оказался прост: я перестал писать код в первый же день.
Когда вы пытаетесь сразу скормить идею нейросети, вы сталкиваетесь с пятью фатальными проблемами. Вот почему ваш плагин превращается в неработающего Франкенштейна:
1. Модели обучены выдавать статистически наиболее вероятный (читай: усредненный) ответ. Если вы просите «сделать плагин для дизайн-системы», ИИ не придумает за вас крутой workflow с драфтами и коммитами. Он выдаст базовую табличку, которая не решает реальных болей пользователей.+
2. У нейросетей есть лимит памяти. Вы просите добавить новую кнопку, ИИ пишет для нее функцию, но при этом «забывает» архитектуру, которую выстроил 10 сообщений назад. В итоге новая фича ломает половину старого кода. Без жестко зафиксированного ТЗ разработка превращается в бег по граблям, которые бьют вам прямо по мозгам.
3. Вы не просили модель продумать корнер кейсы? А ей похер. ИИ уверенно напишет код, который, например, восстановит удаленный токен. И вы даже не поймете, что этот код только что разорвал связи (boundVariables) во всех компонентах вашего макета! Дешевле найти логическую дыру в тексте за 2 минуты, чем переписывать из-за нее базу данных через неделю.
4. ИИ может выдать усредненный код, но он выдаст такой же усредненный, кривой интерфейс. Окно плагина в Figma крошечное. В нем каждый пиксель, каждый отступ и каждый статус (от Needs Fix до пустых состояний) должны быть выверены. Сделать это текстом — нереально. Вы обязаны сначала спроектировать UI плагина в самой Figma, чтобы понять, как это будет работать вживую.
5. Если вы приходите к ИИ с абстрактной идеей, вы получите абстрактный мусор. Разработка должна начинаться с PRD (Product Requirements Document) — текстового описания всех статусов, экранов и ограничений. Нейросеть — это идеальный джун или мидл-разработчик. Дайте ей безупречное ТЗ, и она напишет идеальный код с первой или второй попытки.
Теперь давайте подумаем, что быстрее:
Исправлять код по 1000 раз, не зная, чего вы хотите, либо исправить все ошибки заранее в тексте, написав затем плагин за несколько дней?
Ковыряться в кривом, убогом и неюзабельном интерфейсе через промпт или запилить красивый и стройный UI с одной попытки по готовому дизайну?
По-моему, ответ очевиден. Гораздо быстрее продумать все заранее, учесть корнер-кейсы, нарисовать UI, и только затем относить все это к модели. Так вы будете кайфовать от процесса, а не рвать на себе волосы...
Чтобы не быть голословным, я поделюсь дизайнами некоторых своих плагинов для Figma — вы можете изучить их и использовать для своих целей бесплатно. Так вы гораздо быстрее поймете, что к чему: какие размеры нужны, какие шрифты, какие отступы, цвета, и т.д. Если вы хотели написать свой плагин, то сейчас самое время!
Разработка моих новых идей теперь занимает реально 3-4 дня + следующие итерации. Следуя советам из статьи, вы сможете добиться +- такого же разультата.
На этом все! Если тема вам интересна, можете подписаться на мой тгк «Банановый дизайн», где я периодически рассказываю о написании плагинов и продуктовом дизайне. Пишу редко, но по делу и без рекламы.