English
Все проекты

MonoScript | Figma-плагин для рутинных задач

Моя роль: дизайн и вайбкодинг · Фокус: Figma-плагин, DX, редактор кода

Как я автоматизировал повторяющиеся задачи в работе над дизайн-проектами

Попробовать

Протестируйте прототип выше, чтобы посмотреть, как работает интерфейс, или попробуйте полностью рабочую версию плагина в Figma.

Open in Figma Community

Зачем

Есть класс задач, которые в Figma решаются либо руками, либо с помощью ИИ через MCP. Второй способ требует платной подписки, а первый забирает время и когнитивный ресурс, который гораздо ценнее потратить на проектирование. Ниже примеры таких задач.

Иконки

Всё это реальные задачи для рук, но последняя — бесконечно долгая, а на первых двух Figma сильно тормозит.

Компоненты и переменные

Разбор чужого и старого

Уже есть плагин Scripter, но у него кривой UX и устаревший TypeScript. Поэтому создаём свой :)

Плагин как мост между LLM и Figma

Пайплайн получился такой:

  1. Просишь LLM написать скрипт (я делал в Gemini — он охотно переписывает скрипт целиком, когда просишь внести правки).
  2. Вставляешь в плагин, запускаешь.
  3. Если ошибка — жмёшь Debug for AI, вставляешь репорт обратно в LLM.
  4. Вставляешь исправленный код в плагин.

Редактор — Monaco, тот же, что в VS Code. Кто с ним знаком, начинает работать сразу.

Debug for AI

Одна кнопка собирает всё, что нужно модели, чтобы починить скрипт: имя, исходник, диагностику TypeScript, рантайм-ошибку со стеком и позицией, весь вывод консоли. Складывает в markdown и кладёт в буфер.

Чат с моделью 
# label

**SCRIPT:**
```typescript
// Labels every selected layer with its own name.
const nodes = figma.currentPage.selection;
console.log("Selection:", nodes.length);

for (const node of nodes) {
  const label = figma.createText();
  label.characters = node.name;
  label.x = node.x;
  label.y = node.y - 24;
  figma.currentPage.appendChild(label);
}

console.log(`Labelled ${nodes.length} nodes`);
```

**ERRORS FOUND:**

- Runtime (line 7:9): **Error** — in set_characters: Cannot write to node with unloaded font "Inter Regular"
  ```
  Error: in set_characters: Cannot write to node with unloaded font "Inter Regular"
      at Object.set [as characters] (<anonymous>)
      at script:s-label.js:7:9
      at eval (<anonymous>)
      at runScript (<anonymous>)
  ```

**CONSOLE OUTPUT (last 30 entries):**
```
[log] Selection: 3
[error] Error: in set_characters: Cannot write to node with unloaded font "Inter Regular"
```
Вставить репорт 
# label

**SCRIPT:**
```typescript
// Labels every selected layer with its own name.
const nodes = figma.currentPage.selection;
console.log("Selection:", nodes.length);

for (const node of nodes) {
  const label = figma.createText();
  label.characters = node.name;
  label.x = node.x;
  label.y = node.y - 24;
  figma.currentPage.appendChild(label);
}

console.log(`Labelled ${nodes.length} nodes`);
```

**ERRORS FOUND:**

- Runtime (line 7:9): **Error** — in set_characters: Cannot write to node with unloaded font "Inter Regular"
  ```
  Error: in set_characters: Cannot write to node with unloaded font "Inter Regular"
      at Object.set [as characters] (<anonymous>)
      at script:s-label.js:7:9
      at eval (<anonymous>)
      at runScript (<anonymous>)
  ```

**CONSOLE OUTPUT (last 30 entries):**
```
[log] Selection: 3
[error] Error: in set_characters: Cannot write to node with unloaded font "Inter Regular"
```
Сценарий целиком: запуск, ошибка, репорт в буфере и вставка в модель. Кадры плагина — скриншоты живого интерфейса, текст репорта — тот, что кладётся в буфер.

Ошибки, не блокирующие запуск

Семантическая валидация выключена намеренно. Figma регулярно добавляет новые методы в API, редактор их не знает и подсвечивает красным — при том что скрипт рабочий. Ложная ошибка здесь стоит дороже пропущенной, поэтому семантика молчит. Синтаксические ошибки остаются: это реальный блокер, скрипт с ними не выполнится.

Ремесло

Иконки

Использовал Tabler. При масштабировании из дефолтных 24 px в 16 px почти везде глифы попадают мимо пиксельной сетки и выглядят мыльно. Можно было взять готовый сет под 16 px, но я оставил Tabler из-за стилистики и перерисовал его сам — ради чёткости на FullHD-мониторах.

Слева — Tabler 24 px, ужатый в 16: края попали на дробный пиксель и размылись. Справа — перерисованный под сетку 16.

Морфинг папки

Открытая и закрытая папка — два нарисованных состояния с одинаковой последовательностью команд пути, поэтому анимируются сами точки, а не подменяется одна фигура другой.

Icon manipulations
Тот же глиф, что в сайдбаре: слева крупно, справа в рабочих 16 px.

Пустое состояние

Зафигачил иллюстрацию для состояния, когда все скрипты удалены.

Когда в библиотеке не осталось ничего: иллюстрация, четыре главных шортката и кнопка, с которой начинается работа.

Микровзаимодействия

Открытие и закрытие папок, появление и скрытие модалок, бордеры, которые появляются при скролле в сайдбаре и исчезают, когда прокручивать больше нечего.

Как проверял

Накладывал макет из Figma поверх скриншота из прода — так видно расхождения, которые глазом не поймаешь. Дальше пытался «сломать» плагин: перепробовать все возможные состояния и их комбинации в поисках багов.

Дальше планирую собрать систему проверки прода [здесь указать, что именно буду сверять], чтобы шанс упустить расхождение или баг был минимальным.

Что поменялось, когда плагин пошёл в Community

Инструмент для себя и инструмент для незнакомого человека — это разные продукты.

Что дальше

Каталог скриптов от сообщества. Пользователи добавляют свои скрипты, скрипты ранжируются по популярности и рейтингу. Тогда не нужно писать с нуля то, что кто-то уже написал.

Дизайн-система редактора. Полная замена дизайн-системы редактора Monaco на дизайн-систему MonoScript: тултипы, контекстные меню и так далее.

Больше анимации для микровзаимодействий — чтобы просто прикольнее и приятнее его было пользовать.