OpenPencil: Figma 파일을 지원하는 프로그래밍 가능한 오픈소스 AI 디자인 에디터

섹션별 상세

Figma 파일과의 높은 호환성과 프로그래밍 가능한 제어 기능을 제공한다. .fig 파일을 네이티브로 읽고 쓸 수 있으며, 앱 간 노드 복사 및 붙여넣기가 가능하다. Headless CLI를 통해 터미널에서 노드 트리를 탐색하거나 XPath를 사용하여 특정 속성을 가진 요소를 쿼리할 수 있다. 또한 Figma Plugin API와 호환되는 eval 기능을 통해 디자인 파일을 스크립트로 직접 수정하고 결과를 저장하는 워크플로를 지원한다.

bash

open-pencil query design.fig "//FRAME[@width > 1000]"
open-pencil export design.fig -f jsx --style tailwind

XPath를 사용하여 특정 조건의 프레임을 쿼리하고 Tailwind CSS 기반의 JSX로 내보내는 CLI 명령어 예시

javascript

open-pencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

Figma Plugin API를 사용하여 선택된 노드의 투명도를 일괄 변경하고 파일에 저장하는 스크립트 실행 예시

OpenPencil 에디터의 실행 화면 스크린샷 — Screenshot왼쪽에는 레이어와 컴포넌트 트리가 위치하고, 중앙 캔버스에는 그라데이션 카드가 배치되어 있다. 오른쪽 패널에서는 선택된 노드의 위치, 크기, 색상 등 상세 속성을 제어할 수 있으며 상단에 AI 및 Code 탭이 있어 프로그래밍 및 AI 통합 기능을 시각적으로 확인할 수 있다.

AI 에이전트와의 깊은 통합을 위해 MCP 서버 기능을 내장했다. 내장된 AI 어시스턴트는 87개 이상의 도구를 사용하여 셰이프 생성, 레이아웃 관리, 불리언 연산 등을 수행한다. 외부 코딩 에이전트인 Claude Code나 Cursor를 MCP 서버에 연결하면 에이전트가 디자인 토큰을 분석하고 자산을 내보내며 직접 디자인을 수정하는 고도화된 자동화가 가능하다. 이는 디자인과 코드 사이의 간극을 줄이는 강력한 도구로 작용한다.

json

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Claude Code나 Cursor 같은 MCP 클라이언트에 OpenPencil 서버를 연결하기 위한 설정 파일 예시

중앙 서버가 필요 없는 실시간 P2P 협업 아키텍처를 채택했다. Trystero와 Yjs(CRDT)를 사용하여 WebRTC 기반으로 사용자 간에 직접 데이터를 동기화한다. 별도의 계정 생성 없이 공유 링크만으로 실시간 커서 추적, 프레젠스 확인, 뷰포트 팔로우 모드를 사용할 수 있다. 모든 데이터는 사용자의 로컬 머신에 머무르며 개인정보 보호와 데이터 주권을 보장한다.

현대적인 기술 스택을 활용하여 성능과 확장성을 확보했다. 렌더링에는 Skia(CanvasKit WASM)를 사용하고 레이아웃 엔진으로는 Yoga WASM을 탑재하여 Flexbox와 CSS Grid를 완벽하게 지원한다. 데스크톱 앱은 Tauri v2를 기반으로 구축되어 약 7MB의 가벼운 용량을 유지하면서 macOS, Windows, Linux를 지원한다. 또한 Tailwind CSS v4 유틸리티 클래스를 포함한 HTML/JSX 내보내기 기능을 통해 디자인의 코드 변환 효율을 극대화했다.

용어 해설

모델 컨텍스트 프로토콜(MCP): — AI 모델이 외부 도구, 데이터 소스 및 서비스와 표준화된 방식으로 상호작용할 수 있도록 Anthropic에서 제안한 개방형 프로토콜이다. 이를 통해 AI 에이전트가 디자인 에디터의 기능을 직접 실행하거나 파일을 수정하는 등의 복잡한 작업을 수행할 수 있다.
헤드리스 명령줄 인터페이스(Headless CLI): — 그래픽 사용자 인터페이스(GUI) 없이 터미널에서 명령어로 소프트웨어를 제어하는 방식이다. 디자인 파일의 노드 트리 탐색, 속성 검색, 자산 내보내기 등을 자동화 스크립트나 CI/CD 파이프라인에서 실행할 수 있게 한다.
웹 실시간 통신 피어 투 피어(WebRTC P2P): — 중앙 서버를 거치지 않고 브라우저나 앱 간에 직접 데이터를 주고받는 통신 기술이다. OpenPencil에서는 별도의 계정이나 서버 없이도 사용자 간에 실시간으로 커서 위치와 편집 내용을 공유하는 협업 기능을 구현하는 데 사용된다.
충돌 없는 복제 데이터 타입(CRDT): — 여러 노드에서 동시에 데이터를 수정해도 중앙 서버의 조정 없이 최종적으로 동일한 상태로 수렴하도록 설계된 데이터 구조이다. 실시간 동시 편집 환경에서 데이터 충돌을 방지하고 일관성을 유지하는 핵심 기술이다.
웹어셈블리(WASM): — 웹 브라우저에서 네이티브에 가까운 성능으로 코드를 실행할 수 있게 해주는 이진 명령 형식이다. OpenPencil은 Yoga 레이아웃 엔진과 Skia 렌더링 엔진을 WASM으로 구동하여 브라우저 환경에서도 복잡한 디자인 연산을 빠르게 처리한다.