Finish Line

Vom letzten Frame bis zur ersten Codezeile.

Finish Line ist ein kostenloser Open-Source-Inspektor für Figma-Handoffs mit einer optionalen lokalen MCP-Brücke für Codex, Claude Code, Cursor und andere kompatible Agenten. Er läuft als Entwicklungs-Plugin in Figma Design, ohne den Dev-Modus oder ein Konto bei Finish Line zu benötigen.

Es gibt kein Backend von Finish Line, keine Analysen, kein Abonnement, kein kostenpflichtiges Upgrade und keine Feature-Gates.

Finish Line ist ein unabhängiges Open-Source-Projekt. Es ist weder mit Figma verbunden noch von Figma befürwortet und wird nicht über Figma vertrieben.

Was es tut

• Untersucht Frames, Komponenten, Instanzen, Layout, Constraints, Füllungen, Konturen, Effekte, Typografie, Variablen, Stile und verschachtelte Ebenen.

• Bildet die vertraute Box-Model-Ansicht für Border-, Padding- und Content-Maße nach.

• Kopiert entwicklungsbereite Werte mit token-bewusstem Kopierverhalten.

• Generiert Startercode für CSS, Tailwind CSS, React + CSS Modules, SwiftUI, Jetpack Compose und Flutter.

• Exportiert SVG- und PNG-Assets einzeln oder in Stapeln.

• Verbindet die geöffnete Figma-Datei über eine an 127.0.0.1:3846 gebundene Brücke mit einem Agenten.

• Ermöglicht Agenten, Auswahlen zu untersuchen, durch die aktuelle Seite zu navigieren, Vorschauen zu rendern und Code zu generieren.

• Kopiert einen knotenspezifischen finish-line://-Link, der in einen Agent-Prompt eingefügt werden kann, um die exakte Ebene anzusteuern, selbst wenn sich die Figma-Auswahl danach ändert.

• Unterstützt typisierte Canvas-Bearbeitungen, die so lange blockiert bleiben, bis der Nutzer sie ausdrücklich in Finish Line freigibt.

Related MCP server: Custom Figma MCP

Schnellstart

1. Finish Line herunterladen

Klonen Sie das Repository:

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

Sie können alternativ die Option Code → Download ZIP von GitHub verwenden und das Archiv entpacken. Release-Builds sind eingecheckt, daher benötigt der Figma-Inspektor keinen lokalen Build.

2. Das Figma-Plugin installieren

1. Öffnen Sie die Figma-Desktop-App.

2. Öffnen Sie eine beliebige Figma-Design-Datei.

3. Gehen Sie zu Plugins → Development → Import plugin from manifest….

4. Wählen Sie manifest.json aus dem Ordner von Finish Line.

5. Starten Sie Finish Line über Plugins → Development.

Der Inspect-Tab ist jetzt bereit. Behalten Sie den Repository-Ordner auf Ihrem Computer, da Figma das Entwicklungs-Plugin von diesem Speicherort lädt.

3. Einen Agenten verbinden (optional)

Die Agent-Unterstützung erfordert Node.js 20 oder neuer. Der Agent-Tab enthält die gleiche geführte Einrichtung und einen Live-Verbindungstest.

Codex

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

Starten Sie eine neue Codex-Aufgabe, öffnen Sie in Figma Finish Line → Agent und klicken Sie auf Connect local agent. Fragen Sie dann:

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

Für eine eindeutige Übergabe wählen Sie eine Ebene aus und klicken Sie auf das Link-Symbol neben ihren Maßen. Fügen Sie die kopierte finish-line://node/...-URL in den Prompt ein. Finish Line löst genau diesen Knoten in der verbundenen Datei auf, anstatt sich darauf zu verlassen, was ausgewählt ist, wenn der Agent antwortet.

Claude Code

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

Starten Sie eine neue Sitzung mit Claude Code und rufen Sie /finish-line:finish-line auf, oder beschreiben Sie die Figma-Aufgabe ganz normal.

Cursor und andere MCP-Clients

Weitere Informationen zu stdio-Konfiguration, Update-Hinweisen, Deinstallationsschritten und Fehlerbehebung finden Sie in der vollständigen Installationsanleitung.

Wie die Agent-Verbindung funktioniert

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

Die Brücke ist lokal und Finish Line besitzt keinen Remote-Server. Wenn Sie jedoch einen cloud-gehosteten Agenten verwenden, kann der MCP-Client ausgewählten Design-Kontext an den Anbieter dieses Agenten senden, gemäß dessen eigenen Bedingungen und Datenschutzrichtlinie. Den genauen Datenfluss finden Sie unter Datenschutz.

Das Plugin muss geöffnet bleiben, solange ein Agent verbunden ist. Das Schließen von Finish Line beendet die Verbindung und löscht den In-Memory-Auswahl-Snapshot der Brücke.

Die Knotenlinks von Finish Line enthalten die Knoten-ID, Seiten-ID, lesbare Knoten-/Seitennamen und ein zufälliges Plugin-Sitzungstoken. Sie enthalten keine Ebeneninhalte, generierten Code, Kontozugangsdaten oder einen Figma-Dateischlüssel. Ein Link von Finish Line verfällt, wenn das Plugin-Fenster geschlossen oder neu geladen wird; kopieren Sie für die nächste Sitzung einen neuen Link.

MCP-Tools

Canvas-Operationen können Frames, Rechtecke, Ellipsen, Text und Komponenteninstanzen erstellen; unterstützte Eigenschaften aktualisieren; Knoten duplizieren oder löschen; und die Auswahl festlegen. Jeder inhaltliche Änderungsstapel wird in Finish Line angezeigt, bevor irgendetwas angewendet wird.

Datenschutz und Sicherheit

• Die Agent-Verbindung ist optional (Opt-in) und wird nie automatisch vom Figma-Plugin aus gestartet.

• manifest.json erlaubt nur ws://localhost:3846.

• Die Brücke bindet ausschließlich an 127.0.0.1, nicht an das lokale Netzwerk.

• Es gibt kein Konto bei Finish Line, keinen Analyse-Datensammler, keine Remote-API und keine gespeicherten KI-Zugangsdaten.

• Schreibzugriffe von Agenten verwenden begrenzte, typisierte Operationen statt eval oder beliebigem JavaScript.

• Jede dokumentverändernde Anfrage eines Agenten erfordert eine ausdrückliche Freigabe in Figma.

• Einstellungen werden über den lokalen Plugin-Speicher von Figma gespeichert; der Zustand der Brücke wird nur im Arbeitsspeicher gehalten.

Lesen Sie die vollständige Datenschutzerklärung und die Sicherheitsrichtlinie, bevor Sie Finish Line mit vertraulichen Designs verwenden.

Aktualisieren

Holen Sie das neueste Release und bauen Sie nur dann neu, wenn Sie aus dem Quellcode entwickeln:

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

Starten Sie Finish Line in Figma neu. Für Codex aktualisieren Sie den Marketplace und installieren Sie das Plugin neu, wenn ein Update nicht automatisch übernommen wird:

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

Starten Sie dann eine neue Aufgabe, damit Codex den aktualisierten Skill und die aktualisierten MCP-Tools lädt.

Entwicklung

Voraussetzungen: Node.js 20 oder neuer und die Figma-Desktop-App.

npm ci
npm run watch

Laden Sie Finish Line in Figma neu, nachdem Sie Änderungen an der UI oder am Plugin-Controller vorgenommen haben. Das vollständige automatisierte Release-Gate ist:

npm test

Es validiert beide TypeScript-Ziele, die Inline-UI, Code-Generatoren, Einstellungen, Agent-Freigaben, die Manifeste für Codex und Claude, den gemeinsamen Skill, Produktions-Bundles und einen echten MCP-stdio/WebSocket-Integrationsablauf.

Entwicklungskonventionen finden Sie in CONTRIBUTING.md und die Release-Checkliste in RELEASE.md.

Releases

• v2.1.2 — optimierte Agent-Übergabe mit einer Live-Vorschau der gemeinsamen Auswahl und einer klareren Link-Aktion.

• v2.1.1 — offizielles Symbol von Finish Line in Codex und im Figma-Plugin, mit konsistenter Eckenmaskierung im Stil des Hosts.

• v2.1.0 — Links auf exakte Knoten für eindeutige Agent-Prompts, plus Validierung verknüpfter Knoten und native Skill-Unterstützung.

• v2.0.0 — lokale Agent-Brücke, native Paketierung für Codex/Claude, geführte Einrichtung, Vorschauen, Navigation und Canvas-Bearbeitungen mit Freigabesperre.

• v1.0.0 — dauerhaft archiviertes Offline-Inspektor-Release ohne Agent-Brücke.

Die Versionshinweise werden in CHANGELOG.md gepflegt.

Support

Nutzen Sie GitHub Issues für Fehler, Einrichtungsfragen und Feature-Vorschläge. Bevor Sie ein Issue erstellen, lesen Sie SUPPORT.md.

Wenn Finish Line Ihnen Zeit spart, ist optionale Unterstützung auf Ko-fi verfügbar. Spenden schalten zusätzliche Funktionen niemals frei.

Lizenz

Finish Line ist unter der MIT-Lizenz verfügbar.