你的设计文件不会被困住
完成的作品,无论来自 Figma、Penpot、Illustrator、InDesign 或任何 SVG 应用,都不必被困在某一个应用里。打开 设计,点击 导入设计,文件就会以一个鲜活的布局打开--而不是一张压平的图片。每一层都会变成一个可编辑的框,可以继续编辑、与工具混合使用,并通过相同的规则渲染。
Figma、Penpot、Illustrator、InDesign 或任意 SVG
每一层都是可以重新输入文字、调整样式、移动位置的框
拖入一个二维码、一张实时图表,或另一个渲染结果
SVG、PDF、PNG、视频--可通过一个 URL 复现
文字仍然是文字,形状仍然是形状,图片会加入你的素材库。你可以继续编辑这个设计--而不是重新画一张截图。
字体会重新映射为你的品牌字体,每一处填充都会经过与原生图层相同的颜色校验。外部画板导入后即已被纳入统一管理。
保存后,这个布局就成为一个可复用、可通过 URL 访问的工具--任何使用 Lolly 的人都可以打开、重新填充并渲染它。不需要设计软件。
signed by LollyPNG自己验证Get the signed filepixels, not shapes543 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes490 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes543 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes490 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes543 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes490 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes543 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes490 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes543 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes490 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes543 KB
signed by LollyPNG自己验证Get the signed filepixels, not shapes490 KB
把一份完成的设计从 Figma、Penpot、Illustrator 或 InDesign 中带出来,带进 Lolly--不是作为一张定格图片,而是作为一个鲜活、可编辑的版面,你可以继续在其中工作、与工具混合使用,并通过 Lolly 确定性的导出路径渲染它。和其他一切一样,整个导入过程都发生在你的设备上:文件在你的浏览器中解析,不会上传任何内容。
对你已经做过的一切来说,这是个好消息:没有什么会被困在你绘制它时所用的那个应用里。你在别的工具里花了几个小时做的设计,抵达时就是一个可编辑的会话,并且已经符合你的设计全局设置--一旦你保存它,它就成为一个可复用的模板,任何使用 Lolly 的人都能打开并重新填充。
导入功能位于 Design--Lolly 的自由画布:打开它,在画布工具栏中点击导入设计,然后选择一个文件。画板会调整为文件的画框尺寸,每个图层都会在同一个开放画布上变成一个可编辑的方框--因此从点击的那一刻起,一个导入的画板就只是一个普通的 Design 会话。
你可以导入什么
可导入的文件种类不少--原生 Figma 二进制文件、Penpot 导出文件、Illustrator 或 PDF 文件、InDesign 标记文件,或任意 SVG。最后这一种是最宽的入口:SVG 是一种通用的导出(或原生保存)格式,几乎任何设计软件都能通过它到达 Lolly。
| 文件 | 是什么 |
|---|---|
.fig | 原生 Figma 文件(File → Save local copy)。完全在浏览器中解码--不涉及 Figma 账户、插件或 API 密钥。 |
.penpot / .zip | 一个 Penpot 导出文件(其标准导出包)。 |
.ai / .pdf | 一个 Illustrator 文件(以默认的兼容 PDF选项保存)或任意 PDF。矢量填充、文字和图片会直接从页面中读取。 |
.idml | 一个 InDesign 版面(File → Export → InDesign Markup)。原始的 .indd 无法直接读取--请先导出为 IDML。 |
.svg | 任意 SVG--Figma 和 Penpot 的 SVG 导出文件,或手写的标记。提示:若想让 Figma 的 SVG 导出保留可编辑文字,请在 Figma 的导出对话框中取消勾选“Outline text”。 |
各个应用如何对接
- Figma--用 File → Save local copy 得到原生
.fig文件,或把一个画框导出为 SVG。(在 SVG 导出时取消勾选Outline text,可以让标题保持可重新输入。) - Penpot--其标准的
.penpot导出文件,或任意 SVG 导出。品牌令牌的双向往返也发生在 Penpot 这里--见下文。 - Illustrator--原生
.ai(保留默认的兼容 PDF 选项)或.pdf可以直接打开;不需要先转成 SVG。 - InDesign--用 File → Export → InDesign Markup 得到一个
.idml文件。一份印刷版面就此变成一个可编辑、符合品牌规范的 Lolly 会话。(原始的.indd无法读取--请导出为 IDML。)
图层会发生什么
导入器会把设计图层映射到自由画布的方框模型上,并尽可能保留可编辑性:
- 文本仍是文本。 文字画框会变成真正的文本框--内容、字号、对齐方式、字重、行高,以及逐段的文字颜色都会保留下来--因此你可以重新输入一个标题,而不必重新绘制它。
- 形状仍是形状。 矩形、圆角矩形、椭圆和胶囊形状都会变成原生的形状框,保留其填充、不透明度、旋转角度和圆角半径。
- 图片会被提取出来。 位图会进入我的图片(你的设备端资源库),并以图片框的形式放置。
- 复杂的矢量图形会被忠实地压平。 Lolly 的方框模型无法表达的路径、渐变和其他填充效果,会被烘焙成清晰、独立的 SVG 图片框--这样即使无法保留可编辑性,视觉效果也能完整保留。
- 几何信息精确无误。 位置、尺寸和旋转角度均由浏览器本身计算得出(使用与渲染原始文件相同的数学方法),因此导入后的版面与原始文件完全对齐。
它遵循品牌规范
这正是“导入”而不是“粘贴截图”的意义所在:得到的结果是一个受治理的版面,而不是一块外来的画板。
- 字体会重新映射为品牌字体。 每一种导入的字体都会变成你品牌包中自带的某一款字体(等宽字体族会映射到你品牌的等宽字体,字重会限制在现有的字重级别内)。这是刻意设计的行为--设计到达时就已经符合品牌规范。
- 颜色会受到保护。 每一个导入的填充色都会经过与原生方框相同的颜色净化处理;之后你可以用普通的取色器,把它们吸附到品牌色板上。
- 其余一切都与普通会话无异。 拖动、旋转、吸附、编组、裁剪;放置可主题化图标与资源库素材;保存它、把它作为 URL 分享出去、通过批量运行它。
渲染
导入的设计导出方式与原生设计完全相同:通过同一条确定性流水线导出为 SVG、PDF、PNG、JPG、WebP--真实的页面尺寸与物理单位、矢量输出中轮廓化的文字,以及在每一种可加盖标记的格式上都带有 Content Credentials。这份设计的新家就是它的 URL,因此一个一次性的 Figma 文件,就此变成一个可复现、可按参数寻址的素材。
从一次性设计到可复用的模板
这正是“导入”不再只是格式转换,而开始成为“创作”的地方。导入的版面就是一个普通的 Design 会话,因此原生会话能做的一切,它都能做:
- 它是任何人都能复用的模板。 保存它,这个版面就会拥有自己的 URL。任何使用 Lolly 的人都可以打开这个 URL,修改文字、替换图片,渲染出属于自己的版本--不需要设计软件,也不需要设计技能,而作者锁定的部分依然保持锁定。导入这块画板的人,就成为它的作者;其他所有人只需要填空。
- 它可以与工具混合使用。 任何方框都可以承载另一个 Lolly 工具,作为一个实时素材--一个能渲染自己二维码的徽章、一张带实时图表的卡片、或是通过素材选择器放入的另一个渲染结果。这些内容始终保持实时,并在加载时重新渲染;它们绝不会变成压平的图片。因此,一张导入的海报可以承载生成式的、始终保持最新的内容--而这是原始文件永远做不到的。
- 它可以像任何会话一样规模化。 用批量网格驱动它(电子表格每一行对应一份成品素材)、把它保存进项目文件夹,或把整个文件夹渲染为一个 zip 压缩包。一份导入的设计,就此变成一整批风格一致的变体。
如果要做一个完全声明式的工具--侧边栏输入项、硬编码的约束条件,一应俱全--你仍然需要手写一份 tool.json(参见编写工具指南)。而导入功能能让你快速、可视化地完成 90% 的工作:一个受治理、可分享、可嵌入工具的版面,不需要编写任何清单文件。
品牌本身的双向往返
signed by Lollyvector SVG自己验证Get the signed file19 paths~3.2k nodes35 groups2 images175 KB
signed by Lollyvector SVG自己验证Get the signed file19 paths~3.2k nodes35 groups2 images175 KB
导入是单向的;而品牌的基础元素则是双向流通的。Lolly 的颜色是 DTCG 设计令牌--与 Penpot 原生导入/导出、以及 Tokens Studio 带入 Figma 的格式相同--因此你在 Figma/Penpot 中用来设计的调色板,和 Lolly 强制执行的调色板,是同一份文档,而不是两份需要手动保持同步的列表。
限制与安全性
- 导入的 SVG 会被视为不可信内容:脚本、事件处理程序和外部对象会在解析之前被剥离,任何被压平落盘的内容,在导入时还会再次被净化处理。没有任何代码会执行,也没有任何内容会离开设备。
- 超大文件的元素数量上限为2,000 个--超出部分会被丢弃并给出警告,而不会锁死标签页。
- 方框模型之外的效果(复杂的混合叠加、特殊描边)会被压平为图片作为后备方案,而不会作为可编辑属性往返保留。
Lolly 能读取的每一种格式
设计文件只是其中一种入口--上表已经涵盖。为了给出完整图景,以下是 Lolly 能够摄入的一切格式。与设计导入一样,每个文件都在你的设备上解析,不会上传任何内容。
图片
把照片或图形拖入任意图片选择器,或你的我的图片库中。
| 格式 | 说明 |
|---|---|
png · jpg/jpeg · webp | 原生解码;静态图片在导入时会被缩小尺寸并清除 EXIF/GPS 信息,然后保存到我的图片中。 |
gif · apng · 动态 webp | 动态栅格图会被识别并原样存储--帧数据保持完整--因此放置后依然保持动态效果。 |
avif | 只要你的浏览器能原生解码就可以读取(没有内置的后备方案)。 |
heic / heif(.heic、.hif) | 即使浏览器无法解码,iPhone 照片也能通过内置的 libheif 后备方案解码。 |
svg | 经过净化处理(移除脚本、on* 事件处理程序和 javascript: 链接),并规范化为一个干净的 viewBox。 |
数据
粘贴或拖入一份表格,工具的重复字段就会据此填充(最多 1,000 行)。
| 格式 | 说明 |
|---|---|
csv | RFC 4180--带引号的字段、"" 转义、内嵌逗号/换行符、CRLF/LF、BOM。 |
json | 行对象数组、无表头的按位置排列数组,或 { "data": [...] } / { "rows": [...] } 包装格式。 |
Lottie(.json、.lottie) | Bodymovin JSON 和 dotLottie 动画会经过校验,并以实时矢量动画的形式放置。 |
视频
| 格式 | 说明 |
|---|---|
mp4 · mov | ISO-BMFF 容器,原样存储(绝不转码);尺寸信息在本地探测获得。 |
webm | Matroska/EBML 格式,原样存储。 |
Content Credentials(校验)
Lolly 会读取并以加密方式校验嵌入在 PDF、PNG/APNG、JPG、GIF、SVG、TIFF、WebP、MP4 和 WebM/MKV 中的已签名 C2PA 清单--全程在你的设备上,对照签名证书进行。参见 Content Credentials。(HEIC 和 AVIF 会作为图片读取,但不带凭证。)
元数据(用于清除)
Strip Hidden Data 工具会读取嵌入的元数据,以便将其移除--从 JPEG 中移除 EXIF/GPS/IPTC/XMP,从 PNG 中移除文本与时间数据块,从 SVG 中移除注释和编辑器命名空间,从 PDF 中移除文档信息。清理后的文件永远不会离开你的设备。
