快速入门

The tool gallery - every tool as a card, grouped by category

Lolly 将你的规则——颜色、字体、版式、逻辑——转化为任何人都能使用的工具,只需填写几个字段,就能制作出成品文件:图片、PDF、社交卡片、视频。没有什么需要学习,也没有什么需要上传:一切都在你的设备上运行,无论在线还是离线。

这是你应该首先阅读的一页。两件事能让你快速上手:让 Lolly 成为你自己的(将它指向你的品牌),以及导入你已有的内容(你的设计文件和令牌)。其余的内容都只是一个链接之外的事。

刚接触 Lolly,只是想做点东西?打开应用,从图库中选择任意工具,填写空白处,然后点击渲染。等你想让它穿上你自己的品牌外衣时,再回来看这一页。

1. 让它成为你自己的——配置你的品牌

在 Lolly 中,你的品牌是一个小型设计令牌文档——颜色、字体和一些规则——每个工具都依据它进行渲染。设置一次,之后你制作的一切在结构上就是符合品牌的,而不是靠审核把关。有三种方式可以导入;选择与你品牌现有所在位置相匹配的那种。

从零开始(向导)

The Brand Studio start screen - name, primary colour, and a derived palette

首次运行会将你带到 Start 屏幕(#/start)。给它一个名称和一个主色,Lolly 就会用引擎在其他地方使用的同一套色彩数学,从中推导出一整套无障碍的调色板——明暗表面、文本、强调色。选一种字体,不到一分钟你就拥有了一个可用的品牌。之后你可以随时进一步调整。

导入你已有的品牌

如果你的品牌已经以设计令牌的形式存在——来自 PenpotTokens Studio(Figma)、或任何纯 DTCG 文件——直接整体导入,而不必重新输入。有两种途径:

# a monolithic tokens.json, a one-file-per-set directory, or a Penpot project archive
npm run ingest:brand -- ./my-tokens.json --name acme --label "Acme" --activate

ingest:brand 接受 Penpot / Tokens Studio 导出同一文档时使用的全部三种容器格式——单个 tokens.json、一个目录($metadata.json + 每个集合一个文件),或一个 project.penpot 归档。加上 --activate,它会把该品牌注册为一个配置文件,切换到该品牌,并重建目录。品牌包与配置文件之间的关系,参见配置

在应用内调整

The Dashboard's Design-system tab - the active brand shown read-only

品牌激活后,仪表盘的你的品牌编辑器(#/d)就是一个实时编辑器——更改一个颜色或一个角色,页面上的每个预览都会随输入即时更新。同一个品牌也会汇总显示在个人资料 → 你的品牌卡片上。字体是真实的:从 Google Fonts 中选择,Lolly 会将该文件作为品牌资源存储在你的设备上,因此你的字体排印可以离线使用,渲染时无需再次获取。

当你满意后,将品牌导出为一个 LollyBrand——一个文件,同事导入后就能得到完全相同的调色板、字体和规则。这就是品牌在人与人、机器与机器之间流转、却不需要中间服务器的方式。

品牌令牌可以双向往返。 因为 Lolly 的品牌本身就是 DTCG 令牌——Penpot 原生读写、Tokens Studio 带入 Figma 的那种格式——所以你用来设计的调色板,和 Lolly 强制执行的调色板,是同一份文档,而不是两份需要手动保持同步的列表。参见设计令牌

2. 导入你已有的内容

你不必从空白页开始。Lolly 会打开你已经拥有的设计成果和开放格式文件。

开源设计文件

Figma、Penpot、Illustrator、InDesign 或任何 SVG 应用中完成的作品,不必被锁在你绘制它时所用的那个应用里。打开 Layout Studio,点击导入设计,文件就会以可编辑版式的形式打开——而不是一张压平的图片。每个图层都变成一个可编辑的框:文本仍可重新输入,形状仍是形状,图片进入你的资源库,复杂的矢量图形也会被忠实保留。它到达时已经符合你的品牌字体和颜色规则。

你拥有的导入方式
Figma 画框原生 .fig 文件(文件 → 保存本地副本),或 SVG 导出
Penpot 设计.penpot 导出文件,或任意 SVG
Illustrator 文件原生 .ai(兼容 PDF)或 .pdf——可直接打开
InDesign 版面.idml(文件 → 导出 → InDesign 标记语言)
其他任何格式任意 SVG——通用的导入入口

整个导入过程都在你的设备上完成——文件在你的浏览器中解析,不会上传任何内容。完整细节,以及具体哪些内容会被保留,参见导入设计

从一次性设计到模板

这就是回报所在:导入的版面就是一个普通的 Layout Studio 会话,因此一旦你保存它,它就拥有了自己的 URL。任何使用 Lolly 的人都可以打开这个 URL,修改文字、替换图片,渲染出属于自己的版本——不需要设计应用,且被锁定的部分依然保持锁定。一次性的设计就此变成可复用的工具。这就是整个理念所在,而且不需要写一行配置。

开放数据与开放工具

社区工具集是开源的、与品牌无关——二维码、街道地图、滤镜、隐私工具——一旦你激活自己的品牌,它就会依据你的品牌进行渲染。

The Utilities view - the on-device workhorses like Strip Hidden Data, Compress PDF and Convert Image, all in one place

你也可以把自己的开放数据喂给工具:粘贴或拖入一份 CSVJSON 表格,工具的重复字段就会据此填充,每一行生成一个成品资源。

3. 制作,然后分享或自动化

"一个 URL 就是 API"这句话是字面意思。下面这张图表并不是谁画出来的,它的类型、标题以及整张数据表都是在地址栏里敲进去的,而同一个链接在任何设备上都会渲染出同一张图表。

An area chart of monthly signups, every value of which arrived as a query parameter rather than a click

品牌激活、素材在手之后,每个工具都能产出一个成品文件:

接下来去哪里

三条路径,取决于你来这里是要做什么: