npm install -g renderfig
npx playwright install chromium

.fig 파일 → parsefig (파싱) → 노드 트리 + 이미지 추출
  → 오버라이드 적용 → HTML/CSS 생성 → Playwright 스크린샷 → PNG/JPG 출력

# 페이지(캔버스) 목록 확인
npx renderfig inspect <파일경로>

# 특정 페이지의 프레임 목록 확인
npx renderfig inspect <파일경로> "페이지 이름"

# 프레임 내부 노드 구조 확인 (depth로 깊이 조절)
npx renderfig inspect <파일경로> "페이지/프레임" --depth 3

# 전체 트리 확인
npx renderfig inspect <파일경로> "페이지/프레임" --depth all

npx renderfig render <파일경로> "페이지/프레임" -o output.png

# 전체 교체
npx renderfig render design.fig "프로필 카드/Channy" \
  --text "Channy (차니)=새이름" \
  --text "Maker=디자이너" \
  -o output.png

# "진짜 자산관리 시작" 부분만 교체, 나머지 텍스트와 스타일 유지
npx renderfig render design.fig "홈페이지/배너" \
  --text "타이틀//진짜 자산관리 시작=스마트한 돈 관리" \
  -o output.png

npx renderfig render design.fig "프로필 카드/Channy" \
  --image "사진=./new-photo.jpg" \
  -o output.png

npx renderfig render design.fig "프로필 카드/Channy" \
  --style "Channy (차니).fontSize=40" \
  --style "Channy (차니).color=#ff0000" \
  -o output.png

npx renderfig render design.fig "프로필 카드/Channy" \
  --font "Pretendard=./fonts/Pretendard-Regular.woff2" \
  -o output.png

import { renderFrame } from 'renderfig';

const buffer = await renderFrame({
  figFile: './design.fig',
  frameName: '프로필 카드/Channy',
  output: './output.png',
  scale: 2,
  overrides: [
    // 전체 교체
    { type: 'text', target: 'Channy (차니)', value: '새이름' },
    // 부분 교체 (search로 해당 부분만 교체, 스타일 보존)
    { type: 'text', target: '타이틀', search: '원래텍스트', value: '새텍스트' },
    { type: 'image', target: '사진', src: './photo.jpg' },
    { type: 'style', target: 'Maker', props: { fontSize: 24, color: '#0066ff' } },
    // 동일 이름 노드 구분: 인덱스 문법
    { type: 'text', target: '이메일[1]', value: 'second@email.com' },
  ],
  fonts: [
    { family: 'Pretendard', src: './fonts/Pretendard-Regular.woff2' },
  ],
});