登录 订阅
By fenx in Product —

#93 Paper (Alpha) 体验

祝顺利

#93 Paper (Alpha) 体验

Paper 是一款处于 Alpha 阶段的设计工具，基于网页，属于 Figma 的直接竞品，有一些自己的思考。我对 Paper 的期望是一款不局限于设计的工具，一款通过 AI 让设计和开发更加进紧密的产品。而非一味跟随 Figma 的迭代脚步——虽然有时候 Figma 的产品设计确实经过了数年验证。

Paper – design, share, ship
Paper is a modern and powerful design tool that helps you create, share, and ship your best work.

本文便简单介绍下 Paper 的一些感想片段。

⚠️
注意 Paper 依然处于早期阶段，对比 Figma 很多实用功能没有上线，后文我会提到，但不作为评价标准。

封面使用 Paper 制作 → 链接。

TL;DR

以防你会先使用 AI 进行总结，这里有个人工版：本文从设计和开发对接角度，简单介绍了新型设计工具 Paper 的使用感想。Paper 的特色和优点包括布局、读取本地字体、良好的 AI 图片编辑体验、各式 shader 以及细节改进。虽然目前 alpha 版本有很多功能缺失但值得期待。

文末作者展望了一下对设计工具而言 AI 还能做什么，但大都是作者个人浅显的想法，并未深入细聊。

祖宗之法布局

属性面板大体上类似，与 Sketch 相同，但是没想像 Figma 一样倒行逆施，UI3 的改版让宽高调整原理了坐标调整，而是保持了 XYWH 的邻近。

Figma（左）和 Paper（右）属性面板对比

这样连续按下 Tab 键位，便可直接输入 XYWH 而不是要额外点击一下。Figma 的做法也是可以理解，但是像 Paper 一样不强硬区分 position 和 layout，放到 layout 下面不也挺好吗？

网页版直接读取本地字体

@runchenn 告诉我，Paper 可在浏览器环境直接调用本地字体，只需要打开一项网页权限。

app.paper.design 网页权限弹窗

Figma 网页的做法依然是要额外安装一个 font installer，在本地通过 Figma Agent 开启本地 HTTP/HTTPS 服务来监听字体。我遇到第一次使用 Figma 的同事基本都找不到这个额外安装器，优点是兼容性强。

Paper 使用的是 Local Font Access API，安全简单，但目前仅支持 Chrome 等 Chromium-based 浏览器，Safari 和 Firefox 未来一段时间仅支持浏览。

Recraft 的 AI 图片编辑体验

Recraft 先于 Figma 一步做了画布型 AI 图片编辑体验，获得了一定的市场。而迄今为止 Figma 的 edit image 功能也非常初级，Paper 则直接取其精华以自用。

更新：撰写本文时，也就是 Paper 公开测试几天后，Figma 更新了 edit 功能，比如这个以及这个。

Paper 图片编辑与生成功能

Paper 的 AI 编辑图片包括：

  • AI 生成图片会带有生成模型以及 prompt 的元数据，方便复用；
  • 多种模型之间可以一次请求来对比生成结果；
  • 生成图片时有更多模型选择；
  • 矢量化、提取颜色和移除背景，都是 Recraft 的功能，且大概率就是 Recraft 的 API；
调用矢量化功能时，图片传向的网址中带有 recraft-vectorize 标识。返回的是同名 SVG

More Shaders

Paper 提供了比较丰富的 shader 效果：

Paper 的 shader 弹窗截图

每个 shader 都提供了比较详细的定制：

Paper 的 shader 定制属性面板

Speed 设置为 0 时则是静态版本。Shader 的主体类似 frame，可赋予 multiply、color dodge 等叠加属性。Figma 的 Noise & Texture 插件也有一些不错的效果，但集成到产品中更方便一些。

Shader 可以导出为 React 代码：

/** @paper-design/shaders-react@0.0.52 */
import { Heatmap } from '@paper-design/shaders-react';

/**
 * Code exported from Paper
 * https://app.paper.design/file/{{file_token}}&node=01K4YGSE4C5S4RW96BG10BT36J
 * on Sep 18, 2025 at 5:04 PM.
 */
export default function GeneratedComponent() {
  return <Heatmap colors={['#11206A', '#1F3BA2', '#2F63E7', '#6BD7FF', '#FFE679', '#FF991E', '#FF4C00']} colorBack="#00000000" speed={1.06} contour={0.5} angle={30.9} noise={0.26} innerGlow={0.5} outerGlow={0.5} scale={0.75} image="https://workers.paper.design/file-assets/{{file_token}}/avatar.png" frame={12209498.772993403} style={{ backgroundColor: '#000000', height: '1031px', width: '664px' }} />;
}

依赖的 @paper-design/shaders-react 大小为 335 kB，注释中有定位设计出处，都是不错的细节。

细节带来 QOL 提升

macOS 中选中一些文件后，仅需右键就可以看到选中了多少文件，不用上下左右寻找资源管理器角落的说明文本。很高兴 Paper 也把这个功能带到了右键，Figma 的右键菜单一直缺少这个功能，只能多次点击右下角 Export 来查看计数。

Figma（左） 和 Paper（右） 的右键菜单对比

Paper 的取色器也有较大的不同。

Paper 的取色器截图
  • Paper 添加了前后颜色对比。只要窗口不关闭，previous 颜色就不会改变，类似 Adobe；
  • 直接展示出了常见的颜色格式，并加入了「复制」按钮，这对于开发来说太方便了。Figma 只能使用 OkColor 这样的插件来解决；
  • 在拖动滑块更改 Hue 时，Paper 有三种算法来辅助优化颜色，效果如下图所示。如果是精准输入 H 的数值则不会触发算法影响 S 和 L 的数值；
Paper 四种取色逻辑对比
0:00
/0:32

取色器演示

  • 不过取色器没有文档颜色来快捷取色，Selection Color 也不支持批量更改，这点倒是挺亟需的。

Nudge 数值默认为 8，Figma 则是 10。懂的都懂，为什么 8 这个数值更好一些。

Paper 调整 nudge 数值弹窗的截图

有一点我不知道该不该放到这里，Paper 的图层顺序和 Figma 等一众软件是相反的：

Paper 中包含红蓝黄三种颜色的 frame 截图

左边图层，红色矩形在最下方，但实际画布效果却在最上方。如果选择红色矩形图层复制，则会在下方出现一个图层，该图层位于新图层上方。

Paper 中包含黑红蓝黄四种颜色的 frame 截图

我回忆了下 Figma 中实际设计的场景，原地复制图层大部分场景确实是想让图层出现在上面。Paper 的右键菜单还加入了 "Paste on top"，感觉应该不是产品设计失误而是 feature？不过这样还是有些反直觉，莫非大家都没有研究出复制粘贴后图层出现在上方层级的功能吗，Paper 才有此下策？

其他较为好用的功能缺失

Paper 依然有很多功能缺失，和我觉得有异议的地方。这里简单整理一下：

  • 工具面板放到了图层面板附近。用 Figma 这几年我觉得左侧区域明显没有右侧关注频率高，且信息有所重叠，不如放在上方或下方；
  • Paper 图层填充属性为 Background，这个文案更改很奇妙，因为产品中找不到对应的 Foreground；
  • Paper 图片图层区分与普通填充图层，没有 Background 属性；
  • 多图层属性无法上下调整层级；
  • 取色器看不到当前文档所有颜色；
  • Shader 的图片滤镜无法对当前画布元素生效；
  • 不支持复制和编辑矢量信息，仅可展示，矢量图层的图标和普通图片相同，无法区分；
  • 描边依然不支持多描边效果（Figma 始终没突破的底层代码）；
  • 没有背景模糊等高级 effect；
  • 没有 Selection Colors 批量修改；
  • 没有 Copy as PNG 和 Copy as SVG；
  • 输入不支持中文（包括 CJK 文字）；
  • 没有 Component；
  • 没有蒙版；
  • 图片无法调整参数；
  • 没有等比例缩放；
  • 离线同步；
  • 有少许性能问题；

AI 加持下的设计工具展望

产品迁移中的生态问题算是老生常谈了。能兼容最好，就像如今做新浏览，除非你有很强的（某方面的）决心，否则 Chromium-based 浏览器依然是首选。以 Figma 的插件系统，如果能有个一键转换到 Paper 这边的 API 然后直接 build 成可用插件的功能，那会方便不少。不过这样可能会触及 Figma 的逆鳞，说不准会在插件中加入各种验证机制。

本节内容并非要深入这个话题，而是 AI 加持下，对设计工具产品的重塑性都有哪些。

Figma 在 AI 布局目前非常平淡，早期由于训练数据原因还下线了一段时间。试问哪个设计师真的会需求 AI 来生成不合规且又平淡的界面（估计是哪个不亲临一线的高层提的战略吧）？Figma 第一步就走错了，并且步步都只能跟随在其他 AI 产品后方，甚至不如 Adobe Photoshop 和 Illustrator 结合的出色。对于这样一家 FigJam 的吸附连线都不愿意「下放」给 Design 的负重前行的上市公司，我不太想在这里多聊什么，毕竟我也不清楚 Figma 的管理策略到底出了什么改变。

更新：在本文撰写但未发布时，Figma 推出了新的 AI 编辑功能，看起来终于上道了。

上周我反馈 AI 图片编辑问题时，顺嘴一问 Paper 是否会支持自定义 API（想用自己的 Gemini API），Vlad Moroz 很快帮我解决了问题，并询问道「如果支持自定义 AI 的 API 你会拿来做什么？」

老实说这么一问我发现我确实没怎么想过，Figma 现在的几个 AI 小工具用得也还可以，思维有些怠慢。LLM 最终的处理终究是文本，设计则是在摆弄图形，只不过这里图形的本质也是 node 文本信息。然后，想到了下面几点——

矢量生成

矢量信息是 UI 中非常重要的部分，包括矢量插画、图标。目前的 Vectorize 其实还不算好，依然需要大量人工处理。StarVector、OmniSVG 等开源模型效果也比较一般，这个领域 Adobe Illustrator 还可以。不过这个更偏向模型侧的问题而不是产品侧；

AI hand-off

Figma 提供的 CSS 代码导出过于简陋且会丢失效果，Paper 提供了更详细的 React 代码导出但是冗余也比较多。而大多开发没有直接使用的原因，则是与实际产品环境的契合度较低，都改一遍不如直接自己直接写。但如果 AI 能根据项目代码的上下文，自动导出对应高兼容度的代码会不会更有帮助？

作为上一条的延伸，我也希望能够优化图层的 node 信息，节约交付给 AI 的上下文 token。甚至是自然语言描述，比如 A 在 B 上面 8px。C 和 D 在内间距 16 的容器上下居中。Figma 现在的 dev mode 所产出的 Tailwind 比较符合 AI 能接受的描述，但是要额外收费。

快捷问询

有时候你想查 Apple 开发者文档或 HIG 的什么资料参数，要不打开浏览器一步步搜索，要不就打开某个 AI 聊天客户端，打开 context7 MCP 进行搜索对话。路径都有点长，如果产品中内置一个 AI 聊天套壳呢？上下文和资料都是设计开发信息。这样如果是团队建立的多年 Design System 作为知识库，新人来了也可以随时提出提问和核准设计。

生态捷径

就像上方所说的生态问题，生产者比例低，不能满足消费者需求时生态便会溃败。AI 带来的 vibe coding 一定程度上消解了消费者身份转换问题。找不到想要插件？自己 vibe 就好了；找不到心仪的 shader？自己 code 就好了。就未来的某个时间节点来说，感觉是个有趣的局面。

结语

万事开头难。2016 年我用了 Figma 不到 1 小时就关闭了网页，卡顿和延迟让我回滚到 Sketch 继续工作。一年后才支持组件并不断完善至今。Unicorn Studio 虽好但目前只想闷头做工具。在这个 20 美元/月订阅起步的时代，大多数商业产品都将 AI credit 计入订阅而不开放自定义 API。其他方面也是一样，作为用户，我只想选择多一些。

更新：在本文撰写完毕但并未发布时，Tailwind 和 Paper 达成了投资与合作关系。惊喜不断，感觉 Paper 的 BP 一定写了什么不一样的东西……

如果你觉得文章对你有些帮助，可以请我的猫吃罐头 ↓

带有微信赞赏码和文字 A kind and compassionate act is often its own reward. 的横幅图像

订阅 Design Scenes

发布最新文章时，会以邮件通知你
zelda@link.com
订阅