Style Sync可实现Figma图层名称与Design Tokens自动双向同步：一、安装插件并初始化映射；二、配置正则规则绑定命名与Token；三、批量校准不规范图层名；四、启用实时监听同步；五、导出带图层路径的Tokens JSON供开发使用。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中维护设计系统，但发现图层名称与Design Tokens命名不一致，导致开发无法准确映射样式变量，则可能是由于人工维护不同步或命名逻辑未对齐。以下是使用Style Sync工具实现图层名称与设计系统自动匹配的具体操作路径：
一、安装并初始化Style Sync插件
Style Sync是一款专为Figma设计的双向同步工具，可将图层名称实时解析为Design Tokens语义结构，并反向将Token变更推送至对应图层，确保命名与变量定义严格一致。该工具依赖图层命名中的BEM式分段结构识别Token类型与层级。
1、打开Figma文件，在右上角点击“Plugins”→“Search plugins”，输入“Style Sync”并安装。
2、首次运行插件时，系统提示授权访问当前文件的图层结构与Local variables数据，点击“Allow”。
3、插件启动后自动扫描所有页面，识别含斜杠命名（如color/background/default）或下划线命名（如spacing_xl）的图层，并将其归类为候选同步节点。
4、在插件面板中点击“Initialize Sync Mapping”，工具将生成默认映射规则：前缀为color/的图层→color Tokens；前缀为spacing/的图层→dimension Tokens；前缀为typography/的图层→typography Tokens。
二、配置图层命名到Token的语义映射规则
Style Sync支持自定义正则表达式匹配图层名片段，从而将任意命名格式精准绑定至Token属性。该步骤决定哪些图层被纳入同步范围，以及其值如何写入Token字段。
1、在Style Sync面板中点击“Edit Mapping Rules”，进入规则编辑界面。
2、添加新规则，设置Pattern字段为color\/([a-z]+)\/([a-z\-]+)，表示匹配形如color/primary/500或color/text/disabled的图层名。
3、在Target Token字段中输入color-$1-$2，使图层名color/primary/500生成Token名color-primary-500。
4、勾选“Sync value from layer fill”选项，使该图层的填充色值（如#3b82f6）自动写入对应Token的value字段。
5、点击“Save Rule”，规则立即生效，所有匹配图层右侧将显示同步状态徽章已绑定 color-primary-500。
三、执行批量图层名称校准与Token写入
当图层已存在但命名不规范时，Style Sync可基于当前Token库反向重命名图层，确保Figma内所有视觉元素名称与Token语义完全对齐，消除“Group 7”“Rectangle 23”等无效标识。
1、在Style Sync面板中切换至“Batch Renaming”标签页。
2、点击“Scan for unmatched layers”，工具遍历全部图层，筛选出未命中任何映射规则的图层（如名为“Blue Button”的按钮）。
3、在结果列表中勾选需校准的图层，点击“Apply Token-based naming”，系统根据其填充色、字体大小等实际属性，从Token库中匹配最接近的语义名称。
4、确认重命名预览，例如将“Blue Button”替换为Button/Primary/Default，将“Small Text”替换为Typography/Body/Sm。
5、点击“Execute Rename”，所有选中图层名称即时更新，并同步创建或更新对应Local variables中的Token条目。
四、启用实时双向同步监听模式
Style Sync提供后台监听机制，当图层属性或Token值发生变更时，自动触发对端更新，避免因手动修改造成命名与变量脱节。该模式要求Token必须存在于Local variables中且已被插件索引。
1、返回Style Sync主面板，点击右上角齿轮图标，进入“Sync Settings”。
2、开启“Enable live two-way sync”开关，并勾选“Update layer name when token value changes”和“Update token value when layer name or style changes”两个子项。
3、点击“Start Listening”，插件开始监控图层面板与Variables面板的所有写入事件。
4、测试同步效果：修改一个已绑定图层的填充色，观察对应Token的value字段是否同步更新；反之，修改color-primary-500的value为#1e40af，确认图层填充色实时变更为深蓝。
5、同步成功时，图层名称旁显示动态徽章↔️ Live Sync Active。
五、导出带命名映射关系的Tokens JSON供开发使用
Style Sync支持将当前同步状态导出为结构化JSON文件，其中不仅包含Token定义，还附带每个Token所关联的Figma图层ID与路径，便于前端构建类型安全的样式引用系统。
1、在Style Sync面板中点击“Export”按钮，选择“Export with Layer Mapping”选项。
2、确认导出内容包含三项：tokens（标准Style Dictionary格式）、layer_references（含node_id、page_name、layer_path字段）、sync_rules（当前启用的正则映射逻辑）。
3、点击“Generate & Download”，获取tokens-with-mapping.json文件。
4、该文件中每项Token均附加"figma_layer_path": "DS_Colors/Primary/500"字段，开发可据此在代码中建立图层路径到CSS变量的直连映射，例如DS_Colors/Primary/500 → --color-primary-500。
