当组件数量一多（按钮、输入框、卡片、标签等），圆角与描边很容易在不同组件里“越改越乱”：有人手动改成 6px，有人用 8px；描边颜色也会出现多个近似值。最好的做法不是反复人工修补，而是把“规范”做成可复用、可全局替换的变量与样式。
本教程以 Figma 的 Variables（变量）+ Styles（样式）为核心，做出一套可维护的圆角与描边体系：以后改规范只改一次，组件自动跟随。
1）打开右侧面板的 Variables，新建一个 Collection，例如命名为 Tokens。
2）在 Collection 里创建一组 Number 类型变量（单位是 px 但你直接填数字即可）：
• radius/0 = 0
• radius/4 = 4
• radius/8 = 8
• radius/12 = 12
• radius/16 = 16
3）如果你们有多套端（Web / iOS / Android），可以在同一 Collection 建多个 Mode（例如 Web、iOS），让同名变量在不同 Mode 下数值不同，但组件引用不变。
1）选中一个典型组件（例如按钮容器的矩形）。
2）在右侧的 Corner radius（圆角）输入框里，点变量图标（小方块/链条样式），选择 radius/8。
3）如果组件有不同状态（default/hover/pressed/disabled），确保它们的圆角都绑定到同一个变量，而不是各自填死数值。
4）对“卡片”“弹窗”“输入框”等不同层级组件，可分别绑定到 radius/12、radius/16 等变量。关键点是：以后你改 radius/12 的值，所有绑定它的组件会一起变。
描边通常包含两件事：颜色与粗细。建议都变量化：
1）在同一 Collection 里创建颜色变量（Color）：
• border/default = #D0D5DD
• border/strong = #98A2B3
• border/focus = #2E90FA
2）创建描边粗细变量（Number）：
• border/width/1 = 1
• border/width/2 = 2
3）如果你们有暗色/浅色主题，直接用 Mode 管理同名颜色变量在不同主题下的值。
变量解决“值”，但组件里经常还要统一“组合”（例如 1px + default 颜色；2px + focus 颜色）。这里用 Stroke Styles 很合适：
1）画一个矩形，设置 Stroke 为 1px，颜色使用变量 border/default（而不是直接填色值）。
2）在右侧 Stroke 面板里点四点菜单，选择 Create style，命名为：
• stroke/default/1px
3）再做一个 focus 描边：2px + border/focus，保存为：
• stroke/focus/2px
4）之后组件只需要应用 Stroke Style，而不是每次都手动配宽度与颜色。
你可以把“规范”落到组件结构里，避免组件作者随意修改：
1）在主组件里把圆角绑定变量、描边应用 Style。
2）在组件属性（Variants/Properties）里只暴露必要的开关（例如：尺寸、状态、是否描边），不要暴露圆角数值。
3）如果确实需要不同圆角（例如 pill 按钮），也用变量（radius/999 或 radius/pill）而不是填 999。
当你接手旧文件时，最头疼的是大量 6、8、10 混在一起。一个可执行的改造流程：
1）先定义 Token（radius、border）与少量 Stroke Styles。
2）从最高复用的组件开始改（按钮、输入框、卡片）。
3）每改完一类组件，就在页面里找同类实例，确认 UI 没跑偏。
4）最后再处理零散的普通图层（非组件）。
• 变量改了没生效：检查你改的是不是当前 Mode（例如 Web/Light）。
• 描边样式看起来不一致：确认组件用的是 Stroke Style，而不是某个实例被手动覆盖。
• 圆角只改了一部分：组件里可能有多个图层（背景、描边层、遮罩层）都需要绑定同一圆角变量。
• 团队协作混乱：给 Token 和 Style 建统一命名规范（如 category/name/value），并把“禁止填死数值”的规则写进团队规范。
当产品改版要求“整体更圆润”，你只需要：
1）把 radius/8 从 8 改为 10（或 12）。
2）把 stroke/default/1px 仍保持 1px，但将 border/default 的颜色略微加深。
3）所有引用变量与样式的组件会自动更新，几分钟完成全局统一。
这就是变量化与样式化的价值：一次改动，全局一致。
