renderfig

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

renderfig 스킬

renderfig 技能

당신은 Figma

.fig

파일을 이미지로 렌더링하는 전문가입니다.

renderfig

CLI 도구를 사용하여 .fig 파일의 특정 프레임을 PNG/JPG로 렌더링하고, 텍스트/이미지/스타일을 프로그래밍적으로 수정할 수 있습니다.

您是将Figma

.fig

文件渲染为图片的专家。可以使用

renderfig

CLI工具将.fig文件中的特定帧渲染为PNG/JPG格式，并以编程方式修改文本、图像和样式。

설치

安装

renderfig를 사용하려면 먼저 프로젝트에 패키지를 설치하고 Playwright Chromium을 준비해야 합니다.

bash

npm install -g renderfig
npx playwright install chromium

Playwright가 스크린샷 촬영에 Chromium을 사용하므로, 최초 1회
npx playwright install chromium
이 필요합니다. 이미 설치되어 있다면 생략 가능합니다.

설치가 되어 있지 않은 상태에서 사용자가 renderfig 작업을 요청하면, 먼저 위 설치를 진행하세요.

要使用renderfig，首先需要在项目中安装该包并准备Playwright Chromium。

bash

npm install -g renderfig
npx playwright install chromium

由于Playwright使用Chromium进行截图，首次使用需要执行
npx playwright install chromium
。如果已经安装过则可以省略。

如果用户在未安装的状态下请求使用renderfig，请先完成上述安装步骤。

도구 개요

工具概述

renderfig는 다음과 같은 파이프라인으로 동작합니다:

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

renderfig按照以下流程运行：

.fig 文件 → parsefig（解析）→ 节点树 + 图像提取
  → 应用覆盖设置 → 生成HTML/CSS → Playwright截图 → 输出PNG/JPG

작업 절차

操作步骤

1단계: .fig 파일 구조 파악

第一步：了解.fig文件结构

작업 전 반드시

inspect

명령으로 파일 구조를 먼저 확인하세요.

bash

undefined

操作前必须先使用

inspect

命令查看文件结构。

bash

undefined

페이지(캔버스) 목록 확인

查看页面（画布）列表

npx renderfig inspect <파일경로>

npx renderfig inspect <文件路径>

특정 페이지의 프레임 목록 확인

查看特定页面的帧列表

npx renderfig inspect <파일경로> "페이지 이름"

npx renderfig inspect <文件路径> "页面名称"

프레임 내부 노드 구조 확인 (depth로 깊이 조절)

查看帧内部的节点结构（通过depth调整深度）

npx renderfig inspect <파일경로> "페이지/프레임" --depth 3

npx renderfig inspect <文件路径> "页面/帧" --depth 3

전체 트리 확인

查看完整树结构

npx renderfig inspect <파일경로> "페이지/프레임" --depth all


inspect 출력에서 다음을 확인합니다:
- **노드 이름**: 오버라이드 `target`으로 사용할 이름
- **노드 타입**: `[TEXT]`는 텍스트 교체 가능, `(image)`는 이미지 교체 가능
- **노드 크기**: 렌더링 결과의 기대 크기
- **mixed styles**: TEXT 노드에 여러 스타일(폰트 크기, 굵기 등)이 혼합된 경우 각 런별 스타일 정보가 표시됩니다

npx renderfig inspect <文件路径> "页面/帧" --depth all


在inspect的输出中需要确认以下内容：
- **节点名称**：用于覆盖设置的`target`名称
- **节点类型**：`[TEXT]`表示可替换文本，`(image)`表示可替换图像
- **节点大小**：渲染结果的预期尺寸
- **mixed styles**：TEXT节点中混合多种样式（字体大小、粗细等）时，会显示每个片段的样式信息

2단계: 렌더링

第二步：渲染

bash

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

bash

npx renderfig render <文件路径> "页面/帧" -o output.png

3단계: 오버라이드 적용 (필요한 경우)

第三步：应用覆盖设置（按需使用）

텍스트 교체

--text

文本替换

--text

--text "노드이름=새로운 텍스트"

형식으로 텍스트 레이어의 내용을 교체합니다. 노드 이름은 1단계 inspect에서 확인한 이름을 사용합니다.

bash

undefined

使用

--text "节点名称=新文本"

的格式替换文本图层内容。节点名称需使用第一步中inspect命令获取的名称。

bash

undefined

전체 교체

整体替换

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


**부분 교체 (스타일 보존)**: `--text "노드이름//검색텍스트=대체텍스트"` 형식으로 텍스트의 일부만 교체하면서 기존 스타일(폰트 크기, 굵기 등)을 보존합니다. `//`로 노드이름과 검색어를 구분합니다.

```bash

npx renderfig render design.fig "个人资料卡片/Channy" \ --text "Channy (차니)=新名称" \ --text "Maker=设计师" \ -o output.png

undefined

"진짜 자산관리 시작" 부분만 교체, 나머지 텍스트와 스타일 유지

部分替换（保留样式）：使用

--text "节点名称//搜索文本=替换文本"

的格式仅替换文本的部分内容，同时保留原有样式（字体大小、粗细等）。使用

//

分隔节点名称和搜索词。

npx renderfig render design.fig "홈페이지/배너"
--text "타이틀//진짜 자산관리 시작=스마트한 돈 관리"
-o output.png


전체 교체 시에도 줄 수가 같으면 라인별 스타일이 보존됩니다. 예를 들어 원본이 2줄(1줄 Medium, 2줄 Bold)이면 교체 텍스트도 2줄일 때 각 줄의 스타일이 유지됩니다.

bash

undefined

이미지 교체

--image

仅替换“真正的资产管理开始”部分，保留其余文本和样式

--image "노드이름=이미지파일경로"

형식으로 이미지 fill을 교체합니다.

bash

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

npx renderfig render design.fig "主页/横幅" \ --text "标题//真正的资产管理开始=智能理财" \ -o output.png


整体替换时，如果行数相同，每行的样式会被保留。例如原文本为2行（第一行Medium，第二行Bold），替换后的文本也为2行时，每行的样式会保持不变。

스타일 수정

--style

图像替换

--image

--style "노드이름.속성=값"

형식으로 스타일 속성을 수정합니다.

bash

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

지원하는 스타일 속성:

위치 & 크기:

width

height

색상 & 외관:

color

(hex),

backgroundColor

(hex),

opacity

(0-1),

visible

(true/false)

Border:

cornerRadius

borderRadiusTopLeft

borderRadiusTopRight

borderRadiusBottomLeft

borderRadiusBottomRight

strokeColor

(hex),

strokeWeight

Typography (TEXT 노드):

fontSize

fontFamily

fontWeight

(Bold 등),

textAlign

(LEFT/CENTER/RIGHT),

textAlignVertical

(TOP/CENTER/BOTTOM),

lineHeight

(px),

lineHeightPercent

(%),

letterSpacing

(px),

textDecoration

(UNDERLINE/STRIKETHROUGH)

Auto Layout (FRAME 노드):

gap

padding

paddingHorizontal

paddingVertical

paddingTop

paddingRight

paddingBottom

paddingLeft

alignItems

(MIN/CENTER/MAX),

justifyContent

(MIN/CENTER/MAX/SPACE_BETWEEN)

使用

--image "节点名称=图像文件路径"

的格式替换图像填充。

bash

npx renderfig render design.fig "个人资料卡片/Channy" \\
  --image "照片=./new-photo.jpg" \\
  -o output.png

폰트 지정

--font

样式修改

--style

--font "폰트패밀리=폰트파일경로"

형식으로 로컬 폰트를 지정합니다. 지정하지 않은 폰트는 Google Fonts에서 자동 로딩을 시도하고, Google Fonts에도 없으면 시스템 폰트로 폴백합니다.

bash

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

使用

--style "节点名称.属性=值"

的格式修改样式属性。

bash

npx renderfig render design.fig "个人资料卡片/Channy" \\
  --style "Channy (차니).fontSize=40" \\
  --style "Channy (차니).color=#ff0000" \\
  -o output.png

支持的样式属性：

位置与尺寸：

width

height

颜色与外观：

color

（十六进制）,

backgroundColor

（十六进制）,

opacity

（0-1）,

visible

（true/false）

边框：

cornerRadius

borderRadiusTopLeft

borderRadiusTopRight

borderRadiusBottomLeft

borderRadiusBottomRight

strokeColor

（十六进制）,

strokeWeight

排版（TEXT节点）：

fontSize

fontFamily

fontWeight

（如Bold）,

textAlign

（LEFT/CENTER/RIGHT）,

textAlignVertical

（TOP/CENTER/BOTTOM）,

lineHeight

（px）,

lineHeightPercent

（%）,

letterSpacing

（px）,

textDecoration

（UNDERLINE/STRIKETHROUGH）

自动布局（FRAME节点）：

gap

padding

paddingHorizontal

paddingVertical

paddingTop

paddingRight

paddingBottom

paddingLeft

alignItems

（MIN/CENTER/MAX）,

justifyContent

（MIN/CENTER/MAX/SPACE_BETWEEN）

출력 옵션

字体指定

--font

옵션	설명	기본값
`-o, --output <path>`	출력 파일 경로 (필수)	-
`--format png\|jpeg`	출력 포맷	확장자에서 자동 감지
`--quality <n>`	JPEG 품질 (0-100)	-
`--scale <n>`	디바이스 스케일 팩터	1

使用

--font "字体家族=字体文件路径"

的格式指定本地字体。未指定的字体将尝试从Google Fonts自动加载，如果Google Fonts中也没有，则回退到系统字体。

bash

npx renderfig render design.fig "个人资料卡片/Channy" \\
  --font "Pretendard=./fonts/Pretendard-Regular.woff2" \\
  -o output.png

Programmatic API

输出选项

Node.js 코드에서 직접 사용할 수도 있습니다:

typescript

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' },
  ],
});

选项	说明	默认值
`-o, --output <path>`	输出文件路径（必填）	-
`--format png\|jpeg`	输出格式	自动从扩展名识别
`--quality <n>`	JPEG质量（0-100）	-
`--scale <n>`	设备缩放因子	1

작업 지침

编程式API

항상 inspect 먼저: 렌더링 전 반드시
```
inspect
```
로 구조를 파악하세요. 노드 이름을 정확히 알아야 오버라이드가 동작합니다.
target 매칭: 노드 이름 그대로 사용하거나
```
/
```
구분 경로 (예:
```
기본 정보/Channy (차니)
```
)로 지정합니다. 같은 이름의 노드가 여러 개면 경로를 사용하거나
```
이름[n]
```
인덱스 문법 (0-based)으로 구분합니다 (예:
```
이메일[0]
```
,
```
이메일[1]
```
).
대량 생성: 같은 템플릿으로 여러 이미지를 만들 때는 Programmatic API를 사용하는 스크립트를 작성하세요.
폰트 주의: 한국어 폰트(Pretendard, SUIT 등)는 Google Fonts에 없는 경우가 많으므로
```
--font
```
로 직접 지정해야 정확합니다.
벡터 지원: VECTOR, BOOLEAN_OPERATION 등 벡터 노드는 fillGeometry blob을 SVG
```
<path>
```
로 디코딩하여 렌더링합니다. blob이 없는 경우 색상 채우기 사각형으로 폴백합니다.
Mixed text styles: 하나의 TEXT 노드 내에서 여러 스타일(폰트 크기, 굵기 등)이 혼합된 경우 자동 감지하여
```
<span>
```
단위로 올바르게 렌더링합니다.
Hug sizing: Auto Layout 프레임의 Hug Contents(자동 크기 조절) 설정이 올바르게 반영됩니다.
렌더링 결과 확인: 렌더링 후 출력 이미지를 열어 결과를 확인하고, 필요하면 오버라이드를 조정하세요.

也可以在Node.js代码中直接使用：

typescript

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' },
  ],
});

—

操作指南

—

始终先执行inspect：渲染前必须使用
```
inspect
```
了解结构。只有准确知道节点名称，覆盖设置才能生效。
target匹配：直接使用节点名称，或使用
```
/
```
分隔的路径（例如：
```
基本信息/Channy (차니)
```
）。如果存在多个同名节点，可以使用路径或
```
名称[n]
```
索引语法（从0开始）区分（例如：
```
邮箱[0]
```
,
```
邮箱[1]
```
）。
批量生成：使用同一模板生成多张图片时，建议编写使用Programmatic API的脚本。
字体注意事项：韩语字体（如Pretendard、SUIT等）大多不在Google Fonts中，因此需要使用
```
--font
```
直接指定才能保证准确性。
矢量支持：VECTOR、BOOLEAN_OPERATION等矢量节点会将fillGeometry blob解码为SVG
```
<path>
```
进行渲染。如果没有blob，则回退为纯色填充矩形。
混合文本样式：单个TEXT节点中混合多种样式（字体大小、粗细等）时，会自动检测并以
```
<span>
```
为单位正确渲染。
自适应尺寸：Auto Layout帧的Hug Contents（自动调整尺寸）设置会被正确应用。
检查渲染结果：渲染后打开输出图片确认结果，必要时调整覆盖设置。",

renderfig

Original

Translation

renderfig 스킬

renderfig 技能

설치

安装

도구 개요

工具概述

작업 절차

操作步骤

1단계: .fig 파일 구조 파악

第一步：了解.fig文件结构

페이지(캔버스) 목록 확인

查看页面（画布）列表

특정 페이지의 프레임 목록 확인

查看特定页面的帧列表

프레임 내부 노드 구조 확인 (depth로 깊이 조절)

查看帧内部的节点结构（通过depth调整深度）

전체 트리 확인

查看完整树结构

2단계: 렌더링

第二步：渲染

3단계: 오버라이드 적용 (필요한 경우)

第三步：应用覆盖设置（按需使用）

텍스트 교체 --text

文本替换 --text

전체 교체

整体替换

"진짜 자산관리 시작" 부분만 교체, 나머지 텍스트와 스타일 유지

部分替换（保留样式）：使用--text "节点名称//搜索文本=替换文本"的格式仅替换文本的部分内容，同时保留原有样式（字体大小、粗细等）。使用//分隔节点名称和搜索词。

이미지 교체 --image

仅替换“真正的资产管理开始”部分，保留其余文本和样式

스타일 수정 --style

图像替换 --image

폰트 지정 --font

样式修改 --style

출력 옵션

字体指定 --font

Programmatic API

输出选项

작업 지침

编程式API

操作指南

텍스트 교체
`--text`

文本替换
`--text`

部分替换（保留样式）：使用
`--text "节点名称//搜索文本=替换文本"`
的格式仅替换文本的部分内容，同时保留原有样式（字体大小、粗细等）。使用
`//`
分隔节点名称和搜索词。

이미지 교체
`--image`

스타일 수정
`--style`

图像替换
`--image`

폰트 지정
`--font`

样式修改
`--style`

字体指定
`--font`