Figma
将相同的加载样式带入设计文件。每个组件均包含可编辑矢量图、三种尺寸、两种色调，以及静止和循环的原型状态。
下载
下载完整组件库，或从首页卡片或组件页面下载单个组件。下载的 ZIP 资源包包含 Figma 生成器和静态 SVG。
安装
在 Figma 桌面版中安装一次生成器，即可在选定文件中自动创建可复用的 Figma 组件。
- 下载资源包并将 ZIP 解压到文件夹。请将
manifest.json和code.js放在一起。 - 在桌面应用中打开 Figma Design 文件。
- 选择 Plugins → Development → Import plugin from manifest，然后选中解压后的
manifest.json。 - 从开发菜单运行 Loading Design。资源包名称表示单个组件或完整组件库。
- 在文件中找到新建的 Loading Design 页面，其中包含组件集和 Preview 画板。
如需快速导入静态图形，可从资源包的 svg 文件夹拖入 SVG 到画布。需要可复用变体和原型循环时，请使用生成器。
使用组件
打开 Assets 并插入 Loading Design 组件，或从组件集中复制实例。使用右侧栏的属性选择外观。
| 属性 | 选项 |
|---|---|
| 尺寸 | 加载动画：20、36、48px。思考圆点：圆点直径 4、6、8px。文本骨架屏：宽度 160、240、320px。 |
| 色调 | 浅色背景使用 Ink，深色背景使用 Paper。 |
| 动效 | 静态布局或减少动态效果时使用 Still，原型中使用 Loop。 |
| 阶段 | 从 01 开始，其余阶段组成动画循环。 |
编辑主组件中 Artwork 图层的矢量填充和描边，以使用品牌颜色。请对循环的所有阶段应用相同更改，保持动画一致。其他尺寸可使用 Figma 的 Scale 工具调整。文本骨架屏预设为三行，最后一行宽度为 68%。
原型动效
选中 Preview 画板并点击 Present 查看循环。在自己的原型中，将组件实例放入画板，设置 Motion 为 Loop、Phase 为 01。设计画布显示静态状态。
每个循环采样十二个矢量状态。Ring 周期为 0.8 秒，其他加载动画和 Thinking Dots 为 1.2 秒，Text Skeleton 为 2 秒。实际原型时序可能有所不同。Dual Arc 的内层速度采用近似值以实现无缝循环，虚线间距也可能与浏览器版本不同。
分享与更新
将主组件保存在共享设计文件中。如果工作区支持团队组件库，请发布该文件，方便设计师从 Assets 插入实例。
更新时，下载最新资源包并重新运行生成器。每次运行都会新建页面。检查新组件后，再按需替换现有实例。
如果安装失败，请确认使用 Figma 桌面版、已解压 ZIP，并选中 manifest 文件而非 JavaScript 文件。开发插件安装期间，请将整个解压文件夹保留在电脑上。