Finish Line

마지막 프레임에서 첫 줄의 코드까지.

Finish Line은 Codex, Claude Code, Cursor 및 기타 호환 에이전트를 위한 선택적 로컬 MCP 브리지를 갖춘 무료 오픈소스 Figma 핸드오프 검사기입니다. Dev Mode나 Finish Line 계정 없이 Figma Design에서 개발 플러그인으로 실행됩니다.

Finish Line에는 백엔드, 분석, 구독, 유료 업그레이드 또는 기능 게이트가 없습니다.

Finish Line은 독립적인 오픈소스 프로젝트입니다. Figma와 제휴하거나 보증을 받거나 Figma를 통해 배포되지 않습니다.

기능

• 프레임, 컴포넌트, 인스턴스, 레이아웃, 제약 조건, 채우기, 획, 효과, 타이포그래피, 변수, 스타일 및 중첩 레이어를 검사합니다.

• 테두리, 패딩 및 콘텐츠 측정을 위한 익숙한 박스 모델 뷰를 재현합니다.

• 토큰 인식 복사 동작으로 개발자에게 바로 사용 가능한 값을 복사합니다.

• CSS, Tailwind CSS, React + CSS Modules, SwiftUI, Jetpack Compose 및 Flutter용 스타터 코드를 생성합니다.

• SVG 및 PNG 에셋을 개별적으로 또는 일괄로 내보냅니다.

• 열려 있는 Figma 파일을 127.0.0.1:3846에 바인딩된 브리지를 통해 에이전트에 연결합니다.

• 에이전트가 선택 항목을 검사하고, 현재 페이지를 탐색하며, 미리보기를 렌더링하고, 코드를 생성할 수 있게 합니다.

• Figma 선택 항목이 변경된 후에도 정확한 레이어를 대상으로 하도록 에이전트 프롬프트에 붙여넣을 수 있는 노드별 finish-line:// 링크를 복사합니다.

• Finish Line 내에서 사용자가 명시적으로 승인하기 전까지 차단되는 유형화된 캔버스 편집을 지원합니다.

Related MCP server: Custom Figma MCP

빠른 시작

1. Finish Line 다운로드

저장소를 클론합니다:

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

GitHub의 Code → Download ZIP 옵션을 사용하여 아카이브를 추출할 수도 있습니다. 릴리스 빌드가 커밋되어 있으므로 Figma 검사기는 로컬 빌드가 필요하지 않습니다.

2. Figma 플러그인 설치

1. Figma 데스크톱 앱을 엽니다.

2. 아무 Figma Design 파일을 엽니다.

3. **Plugins → Development → Import plugin from manifest…**로 이동합니다.

4. Finish Line 폴더에서 manifest.json을 선택합니다.

5. Plugins → Development에서 Finish Line을 실행합니다.

이제 Inspect 탭이 준비되었습니다. Figma가 해당 위치에서 개발 플러그인을 로드하므로 저장소 폴더를 컴퓨터에 보관하세요.

3. 에이전트 연결(선택 사항)

에이전트 지원에는 Node.js 20 이상이 필요합니다. Agent 탭에는 동일한 안내 설정과 실시간 연결 테스트가 포함되어 있습니다.

Codex

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

새 Codex 작업을 시작하고 Figma에서 Finish Line → Agent를 연 다음 Connect local agent를 클릭합니다. 그런 다음 요청하세요:

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

명확한 핸드오프를 위해 레이어를 선택하고 치수 옆의 링크 아이콘을 클릭하세요. 복사한 finish-line://node/... URL을 프롬프트에 붙여넣으세요. 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 또는 저장된 AI 자격 증명이 없습니다.

• 에이전트 쓰기는 eval이나 임의의 JavaScript 대신 제한된 유형화된 작업을 사용합니다.

• 문서를 변경하는 모든 에이전트 요청은 Figma에서 명시적 승인이 필요합니다.

• 기본 설정은 Figma의 로컬 플러그인 저장소를 통해 저장되며, 브리지 상태는 메모리에만 유지됩니다.

기밀 디자인과 함께 Finish Line을 사용하기 전에 전체 개인정보 보호정책 및 보안 정책을 읽어보세요.

업데이트

소스에서 개발하는 경우에만 최신 릴리스를 가져와 다시 빌드하세요:

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

Figma에서 Finish Line을 다시 시작하세요. 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

UI 또는 플러그인 컨트롤러 변경 후 Figma에서 Finish Line을 다시 로드하세요. 완전한 자동 릴리스 게이트는 다음과 같습니다:

npm test

두 TypeScript 대상, 인라인 UI, 코드 생성기, 기본 설정, 에이전트 승인, Codex 및 Claude 매니페스트, 공유 스킬, 프로덕션 번들 및 실제 MCP stdio/WebSocket 통합 흐름을 검증합니다.

개발 규칙은 CONTRIBUTING.md를, 릴리스 체크리스트는 RELEASE.md를 참조하세요.

릴리스

• v2.1.2 — 실시간 공유 선택 미리보기와 더 명확한 링크 동작으로 간소화된 에이전트 핸드오프

• v2.1.1 — 일관된 호스트 스타일 모서리 마스킹과 함께 Codex 및 Figma 플러그인 전반에 공식 Finish Line 아이콘

• v2.1.0 — 명확한 에이전트 프롬프트를 위한 정확한 노드 링크, 연결된 노드 검증 및 네이티브 스킬 지원

• v2.0.0 — 로컬 에이전트 브리지, 네이티브 Codex/Claude 패키징, 안내 설정, 미리보기, 탐색 및 승인 게이트가 있는 캔버스 편집

• v1.0.0 — 에이전트 브리지 없이 영구 보관된 오프라인 검사기 릴리스

릴리스 노트는 CHANGELOG.md에서 관리됩니다.

지원

버그, 설정 질문 및 기능 제안은 GitHub Issues를 사용하세요. 이슈를 등록하기 전에 SUPPORT.md를 참조하세요.

Finish Line이 시간을 절약해 준다면 Ko-fi에서 선택적 지원이 가능합니다. 기여는 추가 기능을 잠금 해제하지 않습니다.

라이선스

Finish Line은 MIT License에 따라 제공됩니다.