Finish Line

Del último frame a la primera línea de código.

Finish Line es un inspector de traspaso de diseño para Figma gratuito y de código abierto, con un puente MCP local opcional para Codex, Claude Code, Cursor y otros agentes compatibles. Se ejecuta como plugin de desarrollo en Figma Design, sin necesidad de Dev Mode ni de una cuenta de Finish Line.

No existe ningún backend de Finish Line, ni analíticas, ni suscripción, ni actualización de pago, ni restricción de funciones.

Finish Line es un proyecto independiente de código abierto. No está afiliado a Figma, ni cuenta con su respaldo ni se distribuye a través de Figma.

Qué hace

• Inspecciona frames, componentes, instancias, layout, restricciones, rellenos, trazos, efectos, tipografía, variables, estilos y capas anidadas.

• Recrea la conocida vista de modelo de caja para las mediciones de borde, padding y contenido.

• Copia valores listos para desarrolladores con un comportamiento de copia que reconoce tokens.

• Genera código inicial para CSS, Tailwind CSS, React + CSS Modules, SwiftUI, Jetpack Compose y Flutter.

• Exporta recursos SVG y PNG de forma individual o en lote.

• Conecta el archivo de Figma abierto a un agente a través de un puente enlazado a 127.0.0.1:3846.

• Permite a los agentes inspeccionar selecciones, navegar por la página actual, renderizar vistas previas y generar código.

• Copia un enlace finish-line:// específico de un nodo que se puede pegar en un prompt de agente para apuntar a la capa exacta, incluso después de que cambie la selección en Figma.

• Admite ediciones tipadas del lienzo que permanecen bloqueadas hasta que el usuario las aprueba explícitamente dentro de Finish Line.

Related MCP server: Custom Figma MCP

Inicio rápido

1. Descargar Finish Line

Clona el repositorio:

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

También puedes usar la opción Code → Download ZIP de GitHub y extraer el archivo. Las compilaciones de lanzamiento se incluyen en el repositorio, por lo que el inspector de Figma no requiere una compilación local.

2. Instalar el plugin de Figma

1. Abre la aplicación de escritorio de Figma.

2. Abre cualquier archivo de Figma Design.

3. Ve a Plugins → Desarrollo → Importar plugin desde manifest….

4. Selecciona manifest.json de la carpeta de Finish Line.

5. Ejecuta Finish Line desde Plugins → Desarrollo.

La pestaña Inspect ya está lista. Mantén la carpeta del repositorio en tu ordenador porque Figma carga el plugin de desarrollo desde esa ubicación.

3. Conectar un agente (opcional)

El soporte para agentes requiere Node.js 20 o superior. La pestaña Agent incluye la misma configuración guiada y una prueba de conexión en directo.

Codex

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

Inicia una nueva tarea de Codex, abre Finish Line → Agent en Figma y haz clic en Conectar agente local. Luego pregunta:

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

Para un traspaso sin ambigüedades, selecciona una capa y haz clic en el icono de enlace junto a sus dimensiones. Pega la URL finish-line://node/... copiada en el prompt. Finish Line resuelve ese nodo exacto en el archivo conectado en lugar de depender de lo que esté seleccionado cuando el agente responda.

Claude Code

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

Inicia una nueva sesión de Claude Code e invoca /finish-line:finish-line, o describe la tarea de Figma con normalidad.

Cursor y otros clientes MCP

Consulta la guía de instalación completa para la configuración de stdio, las instrucciones de actualización, los pasos de desinstalación y la resolución de problemas.

Cómo funciona la conexión del agente

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

El puente es local y Finish Line no tiene servidor remoto. Sin embargo, cuando usas un agente alojado en la nube, el cliente MCP puede enviar el contexto de diseño seleccionado al proveedor de ese agente según sus propios términos y política de privacidad. Consulta Privacidad para conocer el flujo de datos exacto.

El plugin debe permanecer abierto mientras haya un agente conectado. Al cerrar Finish Line se termina la conexión y se borra la instantánea de selección almacenada en memoria del puente.

Los enlaces de nodo de Finish Line contienen el ID del nodo, el ID de la página, los nombres legibles del nodo/página y un token aleatorio de sesión de plugin. No contienen contenido de capas, código generado, credenciales de cuenta ni una clave de archivo de Figma. Un enlace de Finish Line caduca cuando se cierra o se recarga la ventana del plugin; copia un enlace nuevo para la próxima sesión.

Herramientas MCP

Las operaciones de lienzo pueden crear frames, rectángulos, elipses, texto e instancias de componentes; actualizar propiedades compatibles; duplicar o eliminar nodos; y establecer la selección. Cada lote que modifique contenido se muestra en Finish Line antes de aplicarse.

Privacidad y seguridad

• La conexión del agente es voluntaria y nunca se inicia automáticamente desde el plugin de Figma.

• manifest.json solo permite ws://localhost:3846.

• El puente se vincula exclusivamente a 127.0.0.1, no a la red local.

• No existe ninguna cuenta de Finish Line, recopilador de analíticas, API remota ni credencial de IA almacenada.

• Las operaciones de escritura del agente utilizan operaciones tipadas y acotadas en lugar de eval o JavaScript arbitrario.

• Toda solicitud de un agente que modifique el documento requiere aprobación explícita en Figma.

• Las preferencias se almacenan mediante el almacenamiento local de plugins de Figma; el estado del puente se mantiene solo en memoria.

Lee la política de privacidad y la política de seguridad completas antes de usar Finish Line con diseños confidenciales.

Actualización

Haz pull de la última versión y vuelve a compilar solo si estás desarrollando desde el código fuente:

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

Reinicia Finish Line en Figma. Para Codex, actualiza el marketplace y reinstala el plugin si la actualización no se detecta automáticamente:

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

Luego inicia una nueva tarea para que Codex cargue la skill y las herramientas MCP actualizadas.

Desarrollo

Requisitos: Node.js 20 o superior y la aplicación de escritorio de Figma.

npm ci
npm run watch

Recarga Finish Line en Figma después de cambios en la interfaz o en el controlador del plugin. La puerta de lanzamiento automatizada completa es:

npm test

Valida ambos destinos de TypeScript, la interfaz en línea, los generadores de código, las preferencias, las aprobaciones de agentes, los manifiestos de Codex y Claude, la skill compartida, los bundles de producción y un flujo real de integración MCP stdio/WebSocket.

Consulta CONTRIBUTING.md para conocer las convenciones de desarrollo y RELEASE.md para la lista de verificación del lanzamiento.

Versiones

• v2.1.3 — un único punto de entrada claro para la configuración de Agent, sin tarjeta de instalación duplicada.

• v2.1.2 — traspaso de Agent optimizado con una vista previa en directo de la selección compartida y una acción de enlace más clara.

• v2.1.1 — icono oficial de Finish Line en Codex y en el plugin de Figma, con enmascarado de esquinas coherente con el estilo del host.

• v2.1.0 — enlaces a nodos exactos para prompts de agente sin ambigüedades, además de validación de nodos enlazados y soporte nativo de skill.

• v2.0.0 — puente de agente local, empaquetado nativo para Codex/Claude, configuración guiada, vistas previas, navegación y ediciones de lienzo sujetas a aprobación.

• v1.0.0 — versión del inspector offline archivada de forma permanente, sin el puente de agente.

Las notas de versión se mantienen en CHANGELOG.md.

Soporte

Usa GitHub Issues para informar de errores, dudas de configuración y propuestas de funciones. Consulta SUPPORT.md antes de crear una incidencia.

Si Finish Line te ahorra tiempo, puedes ofrecer soporte opcional en Ko-fi. Las contribuciones nunca desbloquean funciones adicionales.

Licencia

Finish Line está disponible bajo la Licencia MIT.