OpenPencil - Figma의 오픈소스 대안, AI까지 내장

Figma의 오픈소스 대안, OpenPencil

Figma는 강력한 디자인 툴이지만 폐쇄형 플랫폼입니다. 프로그래밍 방식의 접근을 제한하고, 독점 바이너리 포맷을 사용하며, 업데이트마다 워크플로우가 깨지기도 합니다.

OpenPencil은 이 문제를 해결하는 오픈소스 대안입니다.

OpenPencil이란?

주요 기능

1. Figma 파일 호환

.fig 파일을 네이티브로 읽고 쓸 수 있습니다. Figma와 노드 복사/붙여넣기도 가능합니다.

2. AI 통합 (87개 도구)

내장 AI 어시스턴트가 도형 생성, 색상 설정, 오토 레이아웃, 컴포넌트 관리 등 87개 이상의 작업을 수행합니다.

지원 프로바이더:

• Anthropic (Claude)
• OpenAI (GPT)
• Google AI (Gemini)
• OpenRouter

3. 실시간 협업

서버 없이 P2P(WebRTC)로 직접 연결합니다. 커서, 선택, 편집이 실시간으로 공유됩니다.

4. 오토 레이아웃 & CSS Grid

Yoga WASM 기반으로 flex와 grid 레이아웃을 지원합니다.

5. Tailwind CSS 내보내기

디자인을 HTML + Tailwind v4 클래스로 바로 변환할 수 있습니다.

<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
  <p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
  <p className="text-sm text-[#49454F]">Description text</p>
</div>

6. 가벼운 앱 (~7MB)

Tauri v2 기반으로 macOS, Windows, Linux를 지원합니다. 브라우저에서 PWA로도 실행 가능합니다.

CLI 기능

명령줄에서 .fig 파일을 조작할 수 있습니다.

# 노드 트리 탐색
open-pencil tree design.fig

# XPath 쿼리
open-pencil query design.fig "//FRAME[@width < 300]"

# Tailwind JSX 내보내기
open-pencil export design.fig -f jsx --style tailwind

# 디자인 토큰 분석
open-pencil analyze colors design.fig

# Figma Plugin API 실행
open-pencil eval design.fig -c "figma.currentPage.children.length"

MCP 서버 지원

Claude Code, Cursor, Windsurf 등 MCP 클라이언트와 연동할 수 있습니다. 90개의 도구로 .fig 파일을 헤드리스로 읽고 씁니다.

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

기술 스택

왜 OpenPencil인가?

설치 방법

macOS (Homebrew):

brew install open-pencil/tap/open-pencil

CLI:

bun add -g @open-pencil/cli

웹 (설치 없음):
https://app.openpencil.dev

주의사항

아직 프로덕션 준비 상태가 아닙니다. 활성 개발 중이며 기능이 계속 추가되고 있습니다.

총평

Figma의 폐쇄성에 불만이 있거나, 로컬 우선 워크플로우를 선호한다면 주목할 만한 프로젝트입니다.

이 글은 AI가 자동 생성했습니다.