figma-to-psd-master

star 50

Figma 转 Photoshop (PSD) (Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及).) Master OS — automated mastery of Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD

swaylq By swaylq schedule Updated 6/3/2026

name: figma-to-psd-master description: | Figma 转 Photoshop (PSD) (Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及).) Master OS — automated mastery of Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及).: top builders' mental models, tool stack, current workflows, jargon, and where to keep up. Trigger this skill when the user works on Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及). problems and wants industry-grade thinking, tool selection, or workflow guidance. 触发词:「figma 转 psd」「figma to psd」「figma 转 photoshop」「figma 导出 psd」「设计稿转换」 triggers: - "figma 转 psd" - "figma to psd" - "figma 转 photoshop" - "figma 导出 psd" - "设计稿转换" - "设计稿保真" - "figma photoshop 差异" - "figma psd 插件" - "design handoff figma photoshop" - "psd 分层导出" industry: "Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及)." industry-cn: "Figma 转 Photoshop (PSD)" locale: "zh-CN" last_research_date: "2026-06-03" source_count: 166 profile: "practitioner" generator: "master-skill v1.4"

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 / 表达-dna 输出回答。


心智模型

这行的人面对一个转换任务时,脑子里先装的几把尺子。每个都跨 ≥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。

标准 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 Object,绝不用 File→Open);矢量多、可接受文字转曲用 PDF → Illustrator(ungroup/unclip) → PS。案例:一个要持续维护的 logo → 走 SVG→Smart Object,之后双击在 Illustrator 里改。(evidence: [T02-S017, T02-S023, T02-S022])
  3. 若某 layer/group 的有效 blend mode ∉ W3C 16 种 → 把该子树 flatten 成单个像素层:PS 有 27 种、Figma/web 16-19 种,约 11 种 PS 专有对比/算术模式无源;Figma 的 Plus darker/lighter 也无精确 PS 对应。案例:用了 Linear Light 的高光层 → 连同被影响区域拍平成一个像素层,锁住屏幕效果。(evidence: [T04-S011, T04-S016, T02-S004])
  4. 若有文本 → 导出前把每段 AUTO 行高定死成 px、并备好/转曲字体:这是整条流程最高杠杆的单步;AUTO(OpenType sTypo*) ≠ PS 120% 会逐行累积错位。tracking = round((letterSpacingPx ÷ fontSize) × 1000)。案例:Inter 16px AUTO 在 Figma≈19.4px、PS Auto=19.2px,长段落逐行累积偏移 → 导出前统一改成固定 19px。(evidence: [T04-S010, T04-S012, T04-S014, T03-S006])
  5. 若有任何 blur → 乘换算系数后栅格化:Figma layer blur → PS 滤镜高斯按 ×0.431;drop/inner shadow 的 blur 半径 ≈ 1:1 映射到 PS 的 Size,但 Figma spread(px) 要换成 PS Spread(% of size)、极坐标 offset 拆成 Distance+Angle。案例:50px Figma layer blur → PS 高斯填 ≈21.6px(不是直接填 50,否则糊一倍)。(evidence: [T01-S011, T01-S012, T06-S002])
  6. 若有 Auto Layout / 组件实例 / 变体 → 在复制件上 detach + 拍平成静态定位层:PS 没有布局引擎,没有任何工具能保住 auto-layout / instance override / variant 矩阵——别花时间找"能保住的工具"。案例:一个 auto-layout 卡片列表 → detach 后变静态层,PSD 里改内容不会自动重排,提前跟需求方讲清。(evidence: [T02-S022, T04-S017, T06-S013])
  7. 若文件是 Display-P3 而目标 PSD 是 sRGB → 先在 Figma 侧 Convert(保留外观) 再导出并嵌入 profile:永远不要 Assign;两边统一 sRGB IEC61966-2.1;嵌入 PSD Image-Resource ID 1039。最便宜的高 ROI 保真步骤。案例:一张 P3 的品牌红 banner 直接导成 sRGB 会发灰 → 先 Convert 再导就一致。(evidence: [T04-S008, T04-S015, T02-S005])
  8. 若有 background blur / Noise / Texture / 角向·菱形渐变 → 栅格化:background blur 无 PS 原生对应,须"拍平背景 → 在玻璃元素后放裁剪过的高斯副本(×0.431)";Noise/Texture 是 Figma 新效果,PS 无 layer-style 对应。案例:毛玻璃导航条 → 拍平其后背景、放一个被导航条形状裁剪的高斯副本,而不是指望 PS 有"背景模糊"。(evidence: [T06-S002, T02-S004])
  9. 若要 CMYK / 16-bit / 印刷 → 交付 RGB,在 Photoshop 里转模式:ag-psd 及所有 OSS 只能写 RGB/8-bit,Figma 本身也是 RGB-only——CMYK 永远是 PS 侧的 runtime 步骤。案例:要印刷的海报 → 先出 RGB PSD(Photopea/插件),再在 PS 里 Image▸Mode▸CMYK + 正确 ICC。(evidence: [T02-S011, T04-S019])
  10. 任何产出都要 diff 验收,不靠肉眼一次过:把同一 Figma 帧按相同 scale/profile 导出 PNG 作 ground truth → 叠在拍平的 PSD composite 上设 Difference 混合(全黑=一致)+ 跑像素 diff(ImageMagick compare -metric RMSE 或 pixelmatch)→ 再查字体/色彩/效果 → 按项目阈值签收。案例:导出后 RMSE 偏高 → Difference 叠加定位到某段标题字体被替换,回去补字体重导。(evidence: [T03-S011, T03-S007, T03-S008])

工具栈与选型决策树

必备层(2 个,锚定两条可行轴)

  • Photopea(免费 web;直接开 .fig、存分层 PSD;栅格化矢量;单维护者 + 依赖未公开的 .fig Kiwi 格式,Figma 更新后可能临时失效)(evidence: [T02-S012, T02-S013, T02-S014, T02-S016])
  • ag-psd(JS 写 PSD 字节,几乎所有代码型导出器的底座;RGB/8-bit only、不自动重绘文本/矢量/智能对象,是整个代码生态的天花板)(evidence: [T02-S009, T02-S011])

场景特化层(6 条路线)

  • 插件 PSD Exporter & Importer(Figma 内、离线、带字体映射,社区公认"最好用";本质是 ag-psd 级写入器)(evidence: [T02-S017])
  • SVG → PS Place Embedded(唯一能把 Figma 资产保成真矢量 Smart Object 的路;1 SVG=1 SO;File→Open 会栅格化)(evidence: [T02-S023, T02-S028])
  • PDF → Illustrator → PS(社区离线路线;矢量保真好,文字转曲,mask 需手工 unclip)(evidence: [T02-S022])
  • PNG@Nx → PS Place 堆叠(像素保真、全扁平;保住图层名/位置)(evidence: [T02-S026])
  • Figma REST API + ag-psd / Photoshop UXP(批量/CI;你得渲染每个像素 + 重建 composite;新自动化用 UXP,不用已弃用的 ExtendScript/CEP)(evidence: [T02-S002, T02-S007, T02-S008])
  • 插件 PSD Export(motion 向)(面向 After Effects/Premiere 的分层 PSD)(evidence: [T02-S018])

新兴 / 实验层(一律未证实,先实测)

  • Codia AI Psd2FigmaMagicul SaaS:宣称"pixel-perfect / fully editable"=厂商自述营销,无独立 benchmark,与社区共识冲突。(evidence: [T02-S019, T02-S020, T02-S022])

选型决策树

  • Q0 可编辑还是像素保真?(脊椎)像素 → Photopea / PNG@Nx;可编辑 → 插件 / SVG-Place / PDF→AI→PS。
  • Q1 单资产还是整个多页文件? 单/少 → Photopea 或 SVG-Place;整文件 → 插件(可编辑)或 Photopea(扁平);多文件 → REST+ag-psd/UXP。
  • Q2 Auto-layout / 组件多? 都拍平,没有工具能保住,按 Q0 选路接受拍平。
  • Q3 印刷 / CMYK / 16-bit? ag-psd 写不了 → Photopea→PS 后转模式,或重建。
  • Q4 安全 / 不能上云? 用离线插件或 PDF→AI→PS;避开 Magicul/Codia(云)。 (evidence: [T02-S012, T02-S017, T02-S023, T02-S011, T02-S007])

避坑清单

  • ❌ 找 Figma 原生"Export → PSD"(三个出口都没有);❌ 对 SVG 用 File→Open(栅格化,应 Place Embedded);❌ 以为 ag-psd 给"免费可编辑文本"(不补位图会弹 Update 警告);❌ 用 ag-psd 路线做 CMYK/16-bit;❌ 信"100% pixel perfect";❌ 指望 auto-layout/组件/背景模糊存活;❌ 印刷用 1× 导出;❌ 跳过色彩 profile 对齐;❌ 新自动化用 ExtendScript/CEP;❌ Avocode(2023-10 已停);❌ Figma 刚更新后立刻信 Photopea。(evidence: [T02-S001, T02-S023, T02-S011, T02-S019, T02-S027, T02-S015])

工作流 / Pipeline

顺序就是资深人实际的干活顺序:先 Pre-flight(最高杠杆)→ 按方法跑 SOP → 用 QA diff 验收。细节见 references/research/03-workflows.md

Pre-flight(在 Figma 复制件上做,最高杠杆,非工作流本身):detach 所有实例;拍平 auto-layout / boolean;按 PS 想要的样子命名图层;把每段 AUTO 行高定死成 px、备好/转曲字体;flatten 超出 W3C-16 的 blend / background blur / Noise / Texture;P3→sRGB Convert;先定目标像素再设 @Nx(SVG/PDF 仅 1×,栅格路线导 @2x-4x 再在 PS 内降采样)。最高杠杆单步:解析 AUTO 行高 + 预载字体——文本是保真最易、最隐蔽地崩的地方。(evidence: [T03-S001, T04-S010, T04-S016, T04-S008, T04-S027])

入门 SOP(~5-15 分钟):Photopea 开 .fig → 先载字体 → Save as PSD → 在 PS 点掉 "Update?"。接受矢量栅格 + 组件拍平。(evidence: [T03-S006, T02-S012])

2(a) 插件 → 分层 PSD(留在 Figma、可离线)

触发:想要分层 PSD 又不出 Figma、隐私敏感。输出:带图层名/组、尽力可编辑文本的 PSD。last_updated: 2026-06-03 · decay risk: medium。

  • 资深差异:跳过 找"完美工具"(认 ag-psd 级写入器的天花板);优化 先在复制件做 Pre-flight、解析行高;额外 点掉 "Update?" 弹窗、复核被标记的 blend/效果。(evidence: [T02-S017, T02-S011, T02-S022])

2(b) Photopea .fig → PSD(免费像素保真)

触发:单/少帧、免费、可接受矢量栅格。输出:分层 PSD(矢量已栅格)。last_updated: 2026-06-03 · decay risk: medium。

  • 资深差异:跳过 找"完美工具"(直接认矢量栅格损耗);优化 先 File→Open 载入 TTF/OTF 字体、复制件 Pre-flight;额外 跑 QA diff、重并被拆分的矢量、复位被重置成 100% 的阴影 opacity。(evidence: [T03-S006, T02-S012, T02-S014])

2(c) 逐层 PNG/SVG → PS Place 重组(像素保真扁平)

触发:要正确的逐层栅格(素材库 / AE)。输出:位置/命名正确的扁平分层 PSD。last_updated: 2026-06-03 · decay risk: low。

  • 资深差异:跳过 1× 导出(一律 @2x-4x);优化 @Nx 导出后在 PS 内降采样保边缘;额外 用 File→Place(不是 Open)、按 Figma 坐标对位。(evidence: [T02-S026, T02-S023, T04-S027])

2(d) SVG → Place Embedded(单矢量资产,保真矢量)

触发:单个会持续编辑的图标/logo。输出:分辨率无关的 Smart Object。last_updated: 2026-06-03 · decay risk: low。

  • 资深差异:跳过 File→Open(会栅格化);优化 1 SVG=1 SO、需要分层就逐子元素导 SVG;额外 双击在 Illustrator 里改内容。(evidence: [T02-S023, T02-S028])

2(e) PDF → Illustrator → PS(矢量多、文字转曲)

触发:矢量多、离线、文字可转曲。输出:含矢量(文字 outline)的 Smart Object。last_updated: 2026-06-03 · decay risk: low。

  • 资深差异:跳过 期望可编辑文本(PDF 文字已 outline);优化 在 AI 里 ungroup + unclip 后再 Place;额外 需要可编辑就从 Figma 复制文案重打、确认 Plus darker/lighter 不过 PDF。(evidence: [T02-S022, T02-S001])

2(f) REST + ag-psd / UXP(批量 / CI)

触发:多文件、自动化、有工程资源。输出:headless 生成或 PS 内 UXP 组装的 PSD。last_updated: 2026-06-03 · decay risk: low。

  • 资深差异:跳过 ExtendScript/CEP(用 UXP);优化 每层自己渲染位图(ag-psd 不重绘);额外 重建 composite/缩略图、CMYK/16-bit 留到 PS runtime。(evidence: [T02-S002, T02-S007, T02-S011])

QA 验收环:导出同帧 PNG 作 ground truth → PS 里叠 Difference 混合(全黑=一致) + 像素 diff(ImageMagick RMSE / pixelmatch) → 查字体(真字体? 行高?)、色彩 profile(均匀偏移=profile 错)、效果(阴影 opacity、近 W3C-16 边界的 blend、背景模糊已栅格?) → 按项目阈值签收。(evidence: [T03-S011, T03-S007, T03-S008, T04-S012])

转换 vs 重建(资深判断):只要"看着对"就(Photopea/插件 + 清理);要"真的对"(可编辑文本+矢量+CMYK 三者俱全)、或效果/背景模糊密集(反正大半要栅格)、或源文件比新建还乱 → 重建,且永远重打文本不粘贴栅格化文字。(evidence: [T03-S017, T04-S019, T02-S011])

近期变化(驱动力是公司/定价,不是技术):Dev Mode 2024-01 转付费;Config 2024 UI3 改版(无新 PSD 路径);Adobe–Figma 并购 2023-12 黄 + $1B 分手费(缺口永久);Figma 2025 IPO(更无动机做 PS 桥);ag-psd v30.x 维护活跃但写入限制未变(改的是读侧)。SOP 机制低衰减;周边事实约 12 月一查。(evidence: [T03-S015, T03-S012, T03-S013, T03-S014, T03-S018])


表达 DNA

外行一眼露馅的话(outsider tells)

  • "直接导出成 PSD 就行"(根本没有原生导出)
  • "@2x 就是 144 dpi"(Figma 像素无 DPI,scale 只是乘像素数)
  • "Multiply 在两边都一样"(仅在不透明 sRGB 成立,半透明边缘会偏)
  • "把 fill 调低一点"(Figma 的 fill=油漆,PS 的 Fill=第二个不透明度滑块,歧义)
  • "把 auto-layout 一起导进 PSD"(不可能)
  • "mask 行为一样"(Figma mask ≈ PS 剪贴蒙版,但 PS 还有图层蒙版/矢量蒙版三种) (evidence: [T06-S001, T06-S009, T04-S011, T02-S022])

内行的反射用语 / 习惯:开口先问"这个节点留活还是栅格化?";"先把 AUTO 行高定死成 px";"两边先对齐 sRGB IEC61966-2.1";"blur 记得 ×0.431";"PNG 用 Place Embedded,别 File→Open";"先在复制件上 detach 实例"。

同名异义"假朋友"(这行的黑话核心):Fill(Figma=油漆 / PS=第二不透明度滑块)、Mask(Figma 一种 / PS 三种)、Frame↔Artboard(活容器 / 死画布)、Component↔Smart Object(实例图 / 占位文件)、Opacity(Figma 整体 / PS 还有 Fill)、Spread(Figma px / PS %)、Blur radius(系数 1.136364 / 0.490196)、Pass through(不是图层混合模式)、Plus darker/lighter(= Linear Burn/Dodge)。(evidence: [T06-S003, T06-S009, T02-S025, T01-S011])

被拒斥的话术:任何"100% pixel perfect / fully editable"的 Figma→PSD 承诺——格式事实 + 社区共识都说完全可编辑是未解问题。(evidence: [T02-S019, T02-S020, T02-S022])


质量基准 + 反模式

什么算"好"(可验证基准)

  • 像素:Difference 叠加除已知栅格化接缝外基本全黑;像素 diff RMSE 低于项目阈值。(evidence: [T03-S011, T03-S007])
  • 字体:100% 缩放下是真字体(非替换),多行文本块总高度与 Figma 一致(AUTO-vs-120% 陷阱)。(evidence: [T04-S012, T04-S014])
  • 色彩:PSD 嵌入的 profile = Figma 导出 profile(sRGB IEC61966-2.1);品牌色 hex 抽样一致;无均匀偏移。(evidence: [T04-S008, T04-S015])
  • 效果:标记过的 blend/阴影/背景模糊逐一核对(阴影 opacity 没被 Photopea 重置 100%;近 W3C-16 边界的 mode 正确)。(evidence: [T02-S004, T02-S014])
  • 结构:图层名/层级在 PS 面板里可导航、可继续工作。(evidence: [T02-S026])

反模式(外行/入门常犯)

  • 找原生 PSD 导出;对 SVG 用 File→Open;信 ag-psd 给免费可编辑文本;ag-psd 路线做 CMYK;信"pixel perfect"营销;指望 auto-layout/组件/背景模糊存活;以为 Figma "Plus darker/lighter" 在 PS 有精确对应;忽略 pass-through 语义;印刷用 1× 导出;跳过色彩 profile 对齐;新自动化用 ExtendScript;不做 diff 就肉眼签收;把 AUTO 行高原样带过桥。(evidence: [T02-S001, T02-S011, T02-S023, T04-S011, T03-S011])

智识谱系

三大工具流派(互相不是"谁更好",是"接受哪种损耗")

  • 派 A · Figma 内插件导出器(PSD Exporter & Importer / PSD Export / Codia):一个工作流、不出 Figma;质量被开发者透过 ag-psd 级写入器暴露的能力封顶;有插件停更风险。
  • 派 B · 外部转换器(Photopea / Magicul):Photopea 免费 + 原生开 .fig 但栅格化矢量;Magicul 付费 + 未证实宣称。
  • 派 C · 桥接路线(SVG/PDF→PS Place、PNG@Nx、REST+ag-psd+UXP):复用 PS 既有的导入/自动化;唯一能保真矢量(Smart Object)或可编程规模化的路;代价是逐层繁琐或工程投入。 底层轴 = 可编辑 vs 视觉保真(与 手工 vs 编程)。(evidence: [T02-S017, T02-S012, T02-S023])

标准/格式血脉:PSD 二进制(1990→逐层累积,70+ layer-info key,部分未公开) · Figma API(滚动更新) · W3C Compositing 16 种 vs PS 27 种(web 从未标准化扩展对比模式) · OpenType sTypo* 度量 vs PS 死的 120% leading(一个合规、一个不合规) · Porter-Duff(1984) premultiplied 结合律 → W3C Compositing。(evidence: [T04-S001, T04-S011, T04-S012, T04-S027])

未解的核心分歧:怎么从 Photoshop 之外产出"可编辑 PSD 文本"——EngineData 格式靠社区逆向,从业者分成"写脆弱的 TySh + 接受 Update 弹窗" / "驱动 Photoshop runtime" / "干脆栅格化"三派。这个行业的"活着的解释者"是 OSS 维护者(ag-psd 的 Agamnentzar、psd-tools 的 Kota Yamaguchi/Mikhail Korobov、Webtoon)+ 唯一做严谨跨工具保真测量的 Marc Edwards(Bjango)。(evidence: [T04-S001, T04-S019, T04-S021, T01-S011])


诚实边界

  • 信息截止 2026-06-03。工具/插件/定价层衰减最快(约 12 月一查 §近期变化 + Track 02 插件清单);blend/行高/色彩/alpha 这些格式级事实衰减很慢。
  • 这是前正典(pre-canonical)领域:没有教科书、没有大学课程、没有同行评议文献,也没有任何已发布的"Figma→PSD SOP"。本 skill 的工作流是从工具行为 + 格式缺口综合推断出来的,不是抄某个公开专家流程。canon 是"规范级"(Adobe/Figma/W3C/OpenType/ICC 一手规范 + 三个 OSS 库做事实勘误),不是"从业者级"。
  • 不存在中立的第三方保真 benchmark(2026-06-03)——所有转换器对比都是厂商博客。本 skill 对 Codia/Magicul 的保真判断只能转述厂商话术并标记未证实;任何保真结论都请用自己的文件 diff 验证。
  • 两个已知硬缺口:① PSD 文本引擎(TySh/EngineData)只被 Adobe 部分记录,OSS 文本写入"incomplete"且会触发 Photoshop "Update?" 弹窗——"从 PS 之外产出完美可编辑 PSD 文本"是未解问题;② CMYK / 16-bit 无开源写入路径,必须用 Photoshop runtime(Figma 本身 RGB-only)。
  • 来源标签说明:Adobe / Figma help / Microsoft OpenType / ICC 等是一手厂商/标准文档;source_verifier.py 白名单已于本次(iter 28)收录这些域名,故归 verified_primary。少数厂商营销页(Codia/Magicul/Hypermatic/Avocode) 与论坛 issue 已诚实降级为 secondary/reference。
  • 本 skill 不替代实操经验:真实文件的脏乱程度千差万别,转换 vs 重建的判断需要手感;本 OS 给的是镜片和 playbook,不是逐文件的保证。

Time-decay Registry

This skill's modules decay at different speeds. Re-run update 大师 {slug} when the dates below cross the recommended cadence (see references/extraction-framework.md § 八).

Module last_updated decay_risk Recommended refresh cadence
Mental models last_updated: 2026-06-03 decay_risk: low 1-2 years
Standard playbook last_updated: 2026-06-03 decay_risk: low 6-12 months
Tool stack last_updated: 2026-06-03 decay_risk: high 3-6 months
Workflows / pipeline last_updated: 2026-06-03 decay_risk: high 3-6 months
Expression DNA last_updated: 2026-06-03 decay_risk: low 6-12 months
Sources (Track 5) last_updated: 2026-06-03 decay_risk: medium 6 months
Glossary / standards / regulations last_updated: 2026-06-03 decay_risk: medium 6 months (regulations may force sooner)
Intellectual genealogy last_updated: 2026-06-03 decay_risk: low 1-2 years
Honest boundaries last_updated: 2026-06-03 decay_risk: low re-assess each refresh

last_updated values reflect the synthesis date. Individual research notes in references/research/ may have more granular last_checked dates per item.

Install via CLI
npx skills add https://github.com/swaylq/master-skill --skill figma-to-psd-master
Repository Details
star Stars 50
call_split Forks 4
navigation Branch main
article Path SKILL.md
More from Creator