第 1 步：下载并导入 SVG
在图标详情页复制「SVG」格式或直接下载源文件，然后在 Figma 中把 .svg 文件拖进画布；也可以复制 SVG 代码后，在 Figma 画布上直接 Ctrl/Cmd+V 粘贴——Figma 会自动把代码解析成可编辑矢量图层。
导入后建议第一件事检查画板尺寸：本站品牌图标统一带 viewBox，导入后框选图层按 Shift+A 添加自动布局，或用「Frame selection」包一层固定尺寸的 Frame，方便后续约束缩放。
TIP粘贴失败的 99% 原因是复制了 <img> 引用而不是 SVG 源码——切换到「SVG 源码」复制格式重试。
第 2 步：改成可换色结构
Figma 中把图标的填充色统一改为单个 Color Variable（变量），后续换品牌色只改变量即可。如果图标是多色品牌标（如社交平台 logo），保留原色即可，不要强行拆分。
单色线性图标建议把描边设置为「Scale」约束下的 uniform stroke，缩放图标时线条粗细才不会失控。
第 3 步：建立组件与变体
选中图标 Frame，Ctrl/Cmd+Alt+K 创建组件；如果你需要同一路标的多套风格（线性/面性/双色），为每个风格各导入一份，再合并为一组 Component Set，用 property 命名 style=line|solid|duotone。
尺寸变体同理：16 / 24 / 32 各建一层，用 size 属性切换。本站详情页的「尺寸阶梯」预览可以直接当作各尺寸的视觉基准。
第 4 步：发布团队库
把组件放进一个独立的「Icons」页面并发布为 Library，团队成员即可在任意文件里通过 Assets 面板搜索使用。组件命名建议用 分类/名称 的斜杠结构（如 brand/cloud），Figma 的资产搜索会按斜杠分层过滤。
需要批量处理几十个 SVG（压缩、改色、打包）时，可以先用本站的 SVG 工具箱离线处理完再统一导入，比逐个手改快得多。
