Finish Line

От последнего кадра до первой строки кода.

Finish Line — это бесплатный инспектор макетов Figma для передачи в разработку с открытым исходным кодом и опциональным локальным MCP-мостом для Codex, Claude Code, Cursor и других совместимых агентов. Он работает как development-плагин в Figma Design и не требует ни Dev Mode, ни аккаунта Finish Line.

У Finish Line нет бэкенда, аналитики, подписки, платных обновлений или ограничителей функций.

Finish Line — независимый проект с открытым исходным кодом. Он не аффилирован с Figma, не одобрен ею и не распространяется через Figma.

Что он делает

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

• Воссоздаёт привычное представление box-model для измерения границ, внутренних отступов и содержимого.

• Копирует готовые для разработчиков значения с учётом токенов при копировании.

• Генерирует стартовый код для CSS, Tailwind CSS, React + CSS Modules, SwiftUI, Jetpack Compose и Flutter.

• Экспортирует ассеты SVG и PNG по отдельности или пакетно.

• Подключает открытый файл Figma к агенту через мост, привязанный к 127.0.0.1:3846.

• Позволяет агентам инспектировать выделения, перемещаться по текущей странице, отображать превью и генерировать код.

• Копирует ссылку finish-line:// для конкретного узла; её можно вставить в промпт агента, чтобы нацелиться на точный слой, даже если выделение в Figma изменится.

• Поддерживает типизированные правки холста, которые остаются заблокированными, пока пользователь явно не одобрит их в Finish Line.

Related MCP server: Custom Figma MCP

Быстрый старт

1. Скачайте Finish Line

Склонируйте репозиторий:

git clone https://github.com/vypravec/finish-line.git
cd finish-line

Вы также можете воспользоваться пунктом Code → Download ZIP на GitHub и распаковать архив. Релизные сборки закоммичены, поэтому инспектору Figma не требуется локальная сборка.

2. Установите плагин Figma

1. Откройте десктопное приложение Figma.

2. Откройте любой файл Figma Design.

3. Перейдите в Плагины → Разработка → Импортировать плагин из манифеста….

4. Выберите manifest.json в папке Finish Line.

5. Запустите Finish Line в разделе Плагины → Разработка.

Вкладка Inspect готова к работе. Оставьте папку репозитория на компьютере: Figma загружает development-плагин именно из этого расположения.

3. Подключите агента (необязательно)

Для поддержки агентов требуется Node.js 20 или новее. Вкладка Agent содержит ту же пошаговую настройку и проверку живого подключения.

Codex

codex plugin marketplace add vypravec/finish-line
codex plugin add finish-line@finish-line

Начните новую задачу Codex, откройте Finish Line → Agent в Figma и нажмите Connect local agent. Затем спросите:

Use $finish-line to inspect my current Figma selection.

Чтобы передача была однозначной, выберите слой и нажмите значок ссылки рядом с его размерами. Вставьте скопированный URL finish-line://node/... в промпт. Finish Line найдёт именно этот узел в подключённом файле, а не будет полагаться на то, что выделено в момент ответа агента.

Claude Code

claude plugin marketplace add vypravec/finish-line
claude plugin install finish-line@finish-line

Начните новый сеанс Claude Code и вызовите /finish-line:finish-line или опишите задачу по Figma обычным образом.

Cursor и другие MCP-клиенты

Полная инструкция по установке содержит настройку stdio, инструкции по обновлению, удалению и устранению неполадок.

Как работает подключение агента

Codex / Claude Code / Cursor
              ↕ MCP over stdio
        local bridge process
              ↕ WebSocket on 127.0.0.1:3846
       Finish Line in Figma
              ↕ official Figma Plugin API
       currently open Figma file

Мост локальный, и у Finish Line нет удалённого сервера. Однако при использовании облачного агента MCP-клиент может отправлять выбранный контекст дизайна провайдеру этого агента на его собственных условиях и в соответствии с его политикой конфиденциальности. Точный поток данных описан в разделе Конфиденциальность.

Пока агент подключён, плагин должен оставаться открытым. Закрытие Finish Line завершает подключение и очищает снимок выделения, хранящийся в памяти моста.

Ссылки на узлы Finish Line содержат ID узла, ID страницы, читаемые имена узла и страницы, а также случайный токен сеанса плагина. Они не содержат содержимого слоёв, сгенерированного кода, учётных данных или ключа файла Figma. Срок действия ссылки Finish Line истекает при закрытии или перезагрузке окна плагина; для следующего сеанса скопируйте новую ссылку.

Инструменты MCP

Операции с холстом могут создавать фреймы, прямоугольники, эллипсы, текст и экземпляры компонентов; обновлять поддерживаемые свойства; дублировать или удалять узлы; а также устанавливать выделение. Каждый изменяющий содержимое пакет показывается в Finish Line до применения.

Конфиденциальность и безопасность

• Подключение агента выполняется только по явному согласию и никогда не запускается автоматически из плагина Figma.

• manifest.json разрешает только ws://localhost:3846.

• Мост привязывается исключительно к 127.0.0.1, а не к локальной сети.

• У Finish Line нет аккаунта, сборщика аналитики, удалённого API или сохранённых учётных данных ИИ.

• Записи агента используют ограниченные типизированные операции, а не eval или произвольный JavaScript.

• Каждый запрос агента, изменяющий документ, требует явного одобрения в Figma.

• Настройки хранятся в локальном хранилище плагина Figma; состояние моста — только в памяти.

Перед использованием Finish Line с конфиденциальными макетами прочитайте полную политику конфиденциальности и политику безопасности.

Обновление

Подтяните последний релиз и пересоберите проект, только если вы разрабатываете из исходного кода:

git pull --ff-only
npm ci
npm run build

Перезапустите Finish Line в Figma. Для Codex обновите маркетплейс и переустановите плагин, если обновление не подхватилось автоматически:

codex plugin marketplace upgrade finish-line
codex plugin add finish-line@finish-line

Затем начните новую задачу, чтобы Codex загрузил обновлённый скилл и инструменты MCP.

Разработка

Требования: Node.js 20 или новее и десктопное приложение Figma.

npm ci
npm run watch

Перезагрузите Finish Line в Figma после изменений в UI или контроллере плагина. Полный автоматизированный контроль релиза:

npm test

Он проверяет обе цели TypeScript, встроенный UI, генераторы кода, настройки, одобрения агентов, манифесты Codex и Claude, общий скилл, продакшен-бандлы и реальный сценарий интеграции MCP stdio/WebSocket.

Соглашения по разработке описаны в CONTRIBUTING.md, чек-лист релиза — в RELEASE.md.

Релизы

• v2.1.2 — оптимизированная передача данных агенту: живое превью общего выделения и более понятное действие для ссылки.

• v2.1.1 — официальная иконка Finish Line в Codex и плагине Figma с единообразным скруглением углов в стиле хост-приложения.

• v2.1.0 — ссылки на точные узлы для однозначных промптов агента, а также проверка связанных узлов и поддержка нативных скиллов.

• v2.0.0 — локальный мост для агентов, нативная упаковка для Codex и Claude, пошаговая настройка, превью, навигация и правки холста с одобрением.

• v1.0.0 — постоянно заархивированный офлайн-релиз инспектора без моста для агентов.

Примечания к релизам ведутся в CHANGELOG.md.

Поддержка

Об ошибках, вопросах по настройке и предложениях функций сообщайте через GitHub Issues. Перед созданием issue ознакомьтесь с SUPPORT.md.

Если Finish Line экономит ваше время, вы можете добровольно поддержать проект на Ko-fi. Пожертвования никогда не открывают дополнительных функций.

Лицензия

Finish Line распространяется по лицензии MIT.