Всем привет! Меня зовут Аня, и — я дизайнер интерфейсов в AxelPro.
Когда дизайнер передаёт макет в разработку, всегда есть детали, которые сложно (или вообще не особо нужно) зафиксировать визуально. Чтобы не терять контекст и не дублировать информацию в тасках, я оставляю заметки прямо на макете — там, где они актуальны и не потеряются. Это экономит время и снижает количество недопониманий в команде.
В Figma есть встроенный инструмент для создания аннотаций, но у него есть ограничения в зависимости от тарифа. А сторонние плагины слишком ограничены. Так родилась идея: создать свой плагин для заметок — с нужной логикой, визуальным стилем и возможностью редактировать содержимое.
До этого я не писала ни на JavaScript, ни на TypeScript. Но с помощью ChatGPT, GitHub Copilot и большого количества экспериментов я сделала рабочий плагин, который теперь экономит мое время. Расскажу, как это было — честно, по шагам и с фейлами.
Почему не подошли готовые решения
Чтобы все видели встроенные аннотации в Figma нужен корпоративный тариф, а у нас пока не такой.
Сторонние плагины не позволяли редактировать заметки или располагали их поверх макета, закрывая важные части (часто приходилось вручную менять заметку, чтобы она не перекрывала элементы)
В плагинах не было категорий, которые можно настроить
Плагин Annotate Design
Первый MVP (неудачный)
Опыт в создании плагинов у меня отсутствовал, поэтому я сразу пошла к ChatGPT. Я описала идею, и он разбил работу на этапы. Помог установить всё нужное, подсказал использовать VS Code.
Я начала с логики плагина, а интерфейс решила проработать потом. В процессе я поняла, что мои промпты были слишком размыты — описания звучали как «хотелки», а не как чёткие задачи, поэтому у чата оставалась возможность неописанное трактовать по своему. В какой-то момент ChatGPT начал добавлять лишний код или удалять рабочий и часто забывать предыдущий контекст. Я сделала вывод: нужно отправлять весь текущий код целиком и писать максимально точно.
Интерфейс
Во второй итерации я начала с UI. Нарисовала макеты, описала, где какие элементы, стили и поведение должны быть.
Не без косяков, но так вёрстка получалась неплохо за меньшее время. Некоторые мелочи я исправляла сама, а более сложные вопросы — снова через чат.
Логика: от «чувств» к алгоритмам
Когда формы были готовы, я начала описывать логику словами вроде:
Заметка должна появиться справа, за пределами самого верхнего слоя макета. Маркер — кружок 6 px цвета выбранной категории...
Но ChatGPT не всегда правильно это интерпретировал. Лучше всего работал подход составления четких инструкций:
найди текстовый слой с названием;
вставь его значение в textarea;
расположи элемент с отступом 16px справа от фрейма.
Отдаленно это напоминает псевдокод, но формат свободный. Чем больше технических деталей, тем чище получался результат.
Сложнее всего было реализовать автоматическую подстройку ширины заметки в зависимости от ширины контента и то, где должна появляться заметка относительно макета. Как бы я не объясняла обычными словами — чат плодил лишний нерабочий код. Пришлось придумывать свои алгоритмы для некоторых функций.
Copilot: всегда в теме
Примерно в это время я узнала про Copilot от GitHub, который все это время было рядом в VS Code. Принцип работы с ним аналогичный, как с чатом, но его большой плюс — у него всегда актуальный код.
Я стала отправлять в Copilot инструкции вроде:
Перепиши функцию Х таким образом:
Добавить текст заметки на страницу
Определить ширину текста
Если ширина < 268 — применить одни стили, иначе — другие
Так я быстро исправила проблемные участки и упростила код.
Итог
Мои минимальные требования были:
создание заметки с категорией;
редактирование заметки;
редактирование категорий.
Дополнительно получилось реализовать:
выбор позиции заметки;
сохранение настроек категорий в локальное хранилище;
привязку заметок к фреймам с возможностью синхронизировать их
Сейчас я использую плагин каждый день. Он экономит время и выглядит нативно. И я не переживаю, что заметка потеряется, если какой-то макет переместится. В будущем хочется доработать визуально, и, возможно, еще появятся идеи )
Советы дизайнерам, которые хотят попробовать
Начинайте с конкретной задачи — вам не нужен идеальный плагин сразу.
Продумайте все до мелочей — буквально опишите все, что и как хотите реализовать.
ChatGPT отлично помогает учиться: объясняет, предлагает, направляет.
Copilot дополняет ChatGPT, особенно если вы уже чуть разобрались в коде.
А что вам бы хотелось автоматизировать в своей работе? :)
