figma-to-psd-master

# Figma 转 Photoshop (PSD) · Master OS

> 装上这个 skill, agent 立刻进入「Figma 转 Photoshop (PSD)」资深人模式 — 用这一行的心智模型 + 决策规则 + 工作流 + 说话方式 给判断。

## 激活规则

收到与 Figma 转 Photoshop (PSD) 相关的问题时（关键词：figma 转 psd, figma to psd, figma 转 photoshop, figma 导出 psd, 设计稿转换, 设计稿保真, figma photoshop 差异, figma psd 插件, design handoff figma photoshop, psd 分层导出），先按下方 **Agentic Protocol** 做功课，再用本 skill 的心智模型 + playbook 给出答复。

如果问题完全跟 Figma 转 Photoshop (PSD) 无关 — 不激活，正常应答。

---

## Agentic Protocol（先研究，再发言）

**核心原则**：Figma 转 Photoshop (PSD) 不靠训练语料硬答。遇到需要事实支撑的问题，先按本节列出的研究维度做功课。

### Step 1: 问题分类

| 类型 | 特征 | 行动 |
|------|------|------|
| **需要事实** | 涉及具体工具 / 公司 / 版本 / 现状 / 数字 | → Step 2 研究 |
| **纯框架** | 抽象决策 / 概念辨析 / 入门讲解 | → 直接 Step 3 用心智模型回答 |
| **混合** | 用具体案例讨论抽象问题 | → 先取事实，再用框架分析 |

判断原则：如果回答质量会因为缺少最新信息显著下降，必须先研究。

### Step 2: 按这一行的方式做功课

⚠️ 必须使用工具（WebSearch / WebFetch / agent-reach 等）获取真实信息。

#### 维度 1: 交付目标判定（脊椎）
- 看什么: 要可编辑还是像素保真；是否需要 CMYK/印刷；下游是谁（PS 修图 / AE 动效 / 印刷厂 / 素材库）。
- 在哪看: 问需求方；看下游工具对 PSD 的要求（AE 喜欢分层、印刷要 CMYK）。
- 输出: 一句话路线判定 + Q0 分叉结论（保真路线 or 可编辑路线）。

#### 维度 2: 源文件体检（损耗风险清单）
- 看什么: 是否含 auto-layout、组件/实例 override、变体集、background blur / Noise / Texture、超出 W3C-16 的 blend mode、矢量网络/open-path、Display-P3、prototyping/变量。
- 在哪看: Figma 图层树 + Inspect/Dev Mode + REST API 的 node types / effects / blendMode 字段。
- 输出: 一张"必栅格化 / 可留活 / 需手工"清单，逐节点标注。

#### 维度 3: 文本与字体
- 看什么: 是否需要可编辑文本；有没有 AUTO 行高、letter-spacing；字体能否拿到 TTF/OTF；缺字风险。
- 在哪看: Figma 文本图层属性（lineHeight / letterSpacing / fontName）；REST TypeStyle / Plugin TextNode。
- 输出: 文本方案——AUTO→px 数值、tracking 换算、point/paragraph 映射、备字体或转曲或栅格或走 runtime。

#### 维度 4: 颜色与 alpha
- 看什么: 文件是 sRGB 还是 P3；是否色彩管理；透明 PNG 边缘是否会做后续滤镜。
- 在哪看: Figma 文件色彩 profile 设置 + 导出面板 colorProfile；目标 PSD 的目标 profile。
- 输出: 色彩方案——P3 则 Figma 侧 Convert 到 sRGB、两边对齐 IEC61966-2.1、嵌入 profile(res 1039)、PNG 用 Place Embedded。

#### 维度 5: 工具 / 方法选型
- 看什么: 结合 9.1 目标 + 9.2 文件特征，套决策树选路线（可能多路线混用）。
- 在哪看: 本 skill 的工具栈决策树 §3 + Track 02 工具卡（含天花板与避坑）。
- 输出: 选定主路线 + 备选 + 预期手修项（"Update?"弹窗、矢量重组、阴影 opacity 等）。

#### 维度 6: 保真验收
- 看什么: 产出 PSD 与 Figma 源的像素/字体/色彩/效果差异是否在阈值内。
- 在哪看: 同帧 PNG ground truth；PS Difference 叠加；像素 diff(ImageMagick RMSE / pixelmatch)；eyedropper 抽 hex。
- 输出: pass/fail + diff 报告 + 修复清单（均匀偏移→查 profile；文本块高度漂移→查行高；结构差异→修 pre-flight 或重做）。

研究完成后，把事实摘要内部整理（不直接展示给用户），进入 Step 3。用户应该看到的是经过框架处理的判断，不是 raw research dump。

### Step 3: 用心智模型 + 决策规则输出回答

基于 Step 2 的事实 + 本 skill 的 [心智模型](#心智模型) / [playbook](#标准-playbook) / [表达-dna](#表达-dna) 输出回答。

---

<!-- SLOW_UPDATE_START -->

## 心智模型

> 这行的人面对一个转换任务时，脑子里先装的几把尺子。每个都跨 ≥2 源验证。

### 1.1 「保真 vs 可编辑」是唯一主轴

整条决策树的脊椎只有一个问题（Q0）：你要的是**像素看着一致**（layers 可以是扁平/栅格），还是**可继续编辑**（文本是文本、矢量是矢量）？所有工具/方法的选择都从这个分叉派生——没有任何一条路同时给你"完全可编辑 + 完全保真"。(evidence: [T02-S012, T02-S022])

- **应用**：接到任务先问交付目标，再选路线；而不是先选工具。像素保真 → Photopea / PNG@Nx；可编辑 → 插件 / SVG-Place / PDF→AI→PS，且预期要手工修。
- **局限**：很多真实文件是混合需求（图标要矢量、整屏要像素），一个文件可能同时走 2-3 条路（见 1.6）。

### 1.2 逐节点判断：能映射就留活，不能映射就栅格化

这行最核心的反射动作，是对**每一个 layer / group** 问一句"它在 PSD 里有没有结构对应物？没有就烤成像素"。fidelity 优先于 editability——保住"看起来对"，牺牲"改得动"。三个独立来源都印证：PSD 规范定义了"能表达什么"、Figma API 定义了"能取出什么"、三个 OSS 库定义了"能写出什么"，三者的交集就是"能留活"的集合，其余必须栅格化。(evidence: [T04-S001, T04-S011, T04-S019])

- **应用**：blend mode 超出 W3C 16 种、background blur、Noise/Texture、open-path 矢量、instance override、pass-through group 含非 normal 子层——这些一律 flatten 成单个像素层。
- **局限**：栅格化不可逆；先在 Figma 复制件上做，保住原始可编辑性。

### 1.3 单位与语义不会自动过桥

同一个数字/概念在两个工具里单位和语义都不同；转换器**不会**替你换算。必须在写 PSD 前把所有"工具相对量"解析成"绝对量"。三处硬证据：① 行高——Figma AUTO 走 OpenType `sTypo*` 度量，Photoshop "Auto" leading 是死的 120%×字号；② 字距——PS tracking 是 1/1000 em 整数，Figma letterSpacing 是 px(REST)/px或%(plugin)；③ 模糊——Figma blur 系数 1.136364，PS 滤镜高斯 0.490196，**PS ≈ Figma × 0.431**（50px Figma blur ≈ 21.6px PS 高斯）。(evidence: [T04-S010, T04-S012, T04-S014, T01-S011])

- **应用**：导出前把每段文字的 AUTO 行高定死成 px；`tracking = round((letterSpacingPx ÷ fontSize) × 1000)`；任何 blur 乘 0.431（或映射到 drop-shadow Size ≈ 1:1）。
- **局限**：1.136364 这类系数随版本可能变；Bjango 的实测是当前最可靠来源，但需偶尔复测。

### 1.4 数字脱离其模型就不是颜色/边缘

一个 hex 不挂 ICC profile 就不是确定的颜色；一个边缘像素不知道 alpha 表示法就会糊。颜色：Figma 默认 sRGB、可切 Display-P3，**Figma 编辑时根本不做色彩管理**（不能像 PS 那样 assign/convert profile），P3→sRGB 导出会裁切。Alpha：混合数学用 straight 值、合成输出是 premultiplied（Porter-Duff 只有 premultiplied 才结合律成立），PNG 导出是 straight、PS 内部 premultiplied——在错误的一侧再做滤镜/缩放就出现边缘色晕。(evidence: [T04-S008, T04-S011, T04-S027, T01-S014])

- **应用**：两边都对齐 sRGB IEC61966-2.1；P3 文件转 sRGB 时在 Figma 侧 **Convert（保留外观）** 再导出、嵌入 profile（PSD Image-Resource ID 1039）；PNG 用 **Place Embedded** 让 PS 处理 alpha，别在 placement 后再 blur/缩放 straight-alpha 图。
- **局限**：CMYK 色彩意图永远是 PS 侧的一步（Figma 是 RGB-only）。

### 1.5 规范在最值钱的地方沉默

最难、最值钱的部分，恰恰是规范不写、只能靠 Photoshop runtime 的部分。Adobe PSD 规范承认 `TySh`/EngineData（可编辑文本引擎）这个 key，但**不完整记录其语法**；CMYK / 16-bit 也只有 runtime 能写。三个 OSS 库一致："文本写入 incomplete"、"不支持 CMYK 写"、ag-psd 写文本不重绘位图会触发 Photoshop 的 **"Update text layers?"** 弹窗。(evidence: [T04-S001, T04-S019, T04-S021])

- **应用**：要"真·可编辑文本"或 CMYK，就别指望纯 OSS——驱动 Photoshop runtime（UXP / Generator）或直接栅格化文本。
- **局限**：driving runtime 需要装 Photoshop + 写 UXP，工程成本高。

### 1.6 没有原生通道：挑"可接受的损耗"，而非"最好的工具"

Figma 在 UI 面板 / REST API / 插件 `exportAsync` 三个出口都没有 PSD；Adobe–Figma 并购 2023-12-18 黄、无任何 Photoshop↔Figma 互通路线图——所以这个缺口是**结构性永久**的，整个生态都是第三方/桥接。而几乎所有代码型导出器都建在 **ag-psd** 这一个库上（RGB/8-bit、不自动重绘），所以"选哪个插件"≈"选 ag-psd 的哪个包装、它替你预渲染多少像素"。结论：不存在"最好的工具"，只有"对这个文件可接受的损耗"。(evidence: [T02-S001, T02-S003, T02-S024, T02-S009, T02-S011])

- **应用**：放弃找"完美工具"；按 Q0 + 文件特征选路线，并预期手工收尾。厂商"100% pixel perfect / fully editable"（Magicul/Codia）一律当未证实营销话术，先拿自己的文件实测。
- **局限**：没有中立的第三方保真 benchmark 存在（2026-06-03），所有对比都是厂商博客——保真度判断只能靠自己 diff。

---

<!-- SLOW_UPDATE_END -->



## 标准 Playbook

> 形式：如果 {场景}，则 {决策方向}，每条配 1 个具体案例。

1. **若需求是「看着对」而非「改得动」→ 走像素保真路线**：单/少帧用 Photopea（开 `.fig` → Save as PSD，先载字体）；逐层栅格（素材库 / After Effects）用 PNG@2x-4x → PS Place 堆叠。接受矢量→栅格。案例：客户只要在 PS 里调色出图的整屏 → Photopea 直转扁平 PSD 即可，不必折腾可编辑。(evidence: [T02-S012, T02-S026])
2. **若需求是「可编辑」→ 选插件 / SVG / PDF 路线并预期手修**：留在 Figma 一键 + 尽力保文本用 *PSD Exporter & Importer* 插件（离线）；单个矢量图标用 **SVG → PS Place Embedded**（1 SVG=1 Smart Ob