Figma 组件与变量对照
从同一份已核对的 Figma 原文件对照表读取组件、变量与 Token 关系。
阅读目标版本的 LICENSE。来源:FigmaComponentMap 的 public-map 区;来源指纹:bb1afc337ca397c2。当前代码包版本:0.3.0-alpha.11。每次组件包版本变化都须重新生成并检查映射与源码下载链接。映射更新时间以正文记录为准;使用者副本即使出现相同节点 ID,也须在副本内重新核对目标,不直接套用原文件链接。
文件入口与双向使用
从 Figma 找代码:先确定文件,再按页面、组件名、类型与变体查下方组件表;变量按集合、名称、类型、mode 查变量表。组件官网链接提供公开用法,源码导出以组件目录和包入口为准。从代码找 Figma:从组件导出名或 CSS Token 查本表相应行,打开原文件节点;不得只因名称相同就重写 Figma 值或代码值。
用户使用自己的副本时,应先给出副本文件 URL 和待修改组件或变量的名称;AI 在副本内用页面/集合、名称、节点类型、属性或 mode 和当前值重新定位,遇到重名或不一致时要求用户指定目标。原文件链接只用于定位参照,不能直接修改用户副本;用户副本不会因官方文件后续修改而自动同步。下方的“对应”表示职责、名称或 Token 语义相符,不表示全部组件变体和公开代码 API 已逐项验证。
变量 ↔ Token
本轮从原文件读取 9 个集合、79 个本地变量:Colors 31、Spacing 10、Size 12、Corner Radius 12、Visibility 1/2 各 1、Font Weight 2、Font 2、Paragraph Spacing 8。变量 ID 是原文件内的核对标识;用户副本应按集合+名称+类型+mode 重新查找。颜色四个 mode 依次为 SnowUI-Light、SnowUI-Dark、iOS-Light、iOS-Dark;31 项别名解析后的 RGBA 值与当前版本源码包中的组件主题 CSS 四主题逐值一致。颜色的精确取值仍以该主题文件为代码权威;以下索引不另复制第二份主题数值表。
Colors(31)
按变量名称自然排序;同名系列的数字按数值升序排列。
Corner Radius、Size、Spacing(34)
按集合名称、再按变量名称中的数字升序排列。下表记录本轮读取的值,顺序为 Standard / Expanded (+4) / Expanded (+8) / Condensed (-4),名义单位为 px。Standard 与代码 Token 在 16px 根字号、scale=1 时对应;其他 Figma 模式的更新遵守下方 Standard 基准与模式联动规则。代码 --gap-scale、--size-scale、--radius-scale 是乘数,不能代替这些 Figma 模式的加减关系。组件公开 size、gap 等 Prop 仍须按各自 API 解释,不能直接传 Token 后缀。
Standard 基准与模式联动规则
Corner Radius、Size、Spacing 三个集合均以每个已映射变量的 Standard 为基准。设 Standard 的名义 px 值为 S,一次修改必须计算并一起写入四个模式:
用户说“--radius-1 改为 8”时,是修改该 Token 的名义基准值,并沿既有映射定位到 Corner Radius / 4(原文件变量 ID 11828:14224):Standard 改为 8,其他模式一起改为 12、16、4。不能改去操作 Corner Radius / 8,也不因数值变成 8 自动重命名变量、Token 或改变关联身份。--size-*、--gap-* 同理通过本表定位各自变量;变量名称与 Token 后缀用于识别,不能代替读取当前 Standard 值。代码中的 rem 换算与同步范围按现行样式规范执行。
该指令默认是映射变量的基准值改动;只有明确指定“某个实例/组件的局部覆盖”时才按局部修改解释。实际执行时先确认目标是官方原文件还是用户提供的副本,读取该变量四个模式的当前值,再同步代码基准值、Figma 四模式及受影响的对照记录;不得只改 Standard 或保留其他模式旧值。用户副本须重新定位,原文件变量 ID 不能直接当成副本身份。
当前零值快照与计算边界:上表 Corner Radius / 0 与 Spacing / 0 的当前读取结果是 0 / 0 / 0 / 0,与上述统一公式不一致。本次规则整理保留其实际读取值,不把旧值自动认定为用户批准的公式例外,也不据此宣称已完成模式同步。后续实际同步时按新 Standard 计算;若新 Standard 小于 4、使 Condensed (-4) 为负值,应先报告该值及目标属性约束,由设计文件所有者确认处理方式,不能自行加入截断为 0、取绝对值或保留旧模式值等新规则。本节中的“改为 8”是操作示例,不是本次实际改值指令。
其他变量(14)
按集合与变量名称自然排序;Paragraph Spacing 的数字按数值升序排列。
Figma 的 Paragraph Spacing 控制同一文本对象内相邻段落之间的额外间距,不改变同段文字的行距;Text=0 / Paragraph=N 表示两种 Figma mode 的取值。SnowUI 一方页面 utility .text-*.paragraph 则为整个元素设置 margin-bottom:把每段拆成独立元素时可形成相近的段间距,但末段也可能留下下边距,且不会改变单个文本对象内部的段落间距。组件包目前没有与 Figma 此属性语义等价的公开 Token 或 Text Prop;外部产品也不必引入该页面 utility。Font Weight 的反转 mode、Font 的 SF Pro/Bai Jamjuree/Space Grotesk mode、两个 Visibility 布尔集合也没有现成的同名全局 CSS Token。它们是明确的映射缺口,不用近似值、单个 CSS 属性或其他语义 Token 冒充一一对应。字体家族的当前默认是 --font-family: var(--font-inter),字距默认 0;其他字体 mode 是否加入代码主题须单独确定。
组件对应表
本表记录 Figma 文件所有页面中的主组件与组件集,不逐一展开组件集里的变体。链接精确指向原始 Figma 文件中的节点。页面专用、品牌专用和归档组件也列出,但不强行对应到通用代码组件。SnowUI 组件名称与官网路径依据公开组件目录与组件用法。
这份文件共核对 115 个顶层主组件或组件集(Base 24、Common 36、Mobile 3、Brand 7、Hello 1、Design system 10、Dashboard 7、Settings 4、ChatGPT 10、AI Chat 6、Authentication 2、Archive 4、License 1)。其余页面没有发现顶层主组件或组件集。— 表示目前无经核对的独立 SnowUI 组件页面,不表示该设计无法用 SnowUI 组件组合实现。本表只读核对了 Figma 节点名称、类型、说明、部分属性与组件目录,尚未逐一验证所有变体的精确 API 映射。