必须按原子→分子→模板层级构建Figma设计系统：先建Tokens变量集统一颜色/字体/间距等；再做带变体和变量绑定的原子组件；接着组装含插槽与交互的分子组件；最后搭建响应式模板与自动同步的文档页。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在Figma里从零搭建一套能被团队复用、开发能直接对接、后期还能随业务扩展的设计系统，而不是堆砌一堆孤立组件。这要求你必须按原子→分子→模板的层级逻辑推进，跳过任意一层都会导致组件无法联动、变量无法统一、文档难以维护。
第一步：建好设计令牌（Tokens）这个“中央银行”
所有颜色、字体、间距、圆角、阴影，都必须先定义成变量，不能直接写死数值。否则改一个蓝色，全文件手动找替换，三天都干不完。
1、点击左上角文件名→“新建页面”，命名为 【Tokens】，并拖到页面列表最顶端——这是整个系统的数据源头，必须一眼可见。
2、在右侧属性面板顶部，点击“Variables”标签页→点击“+ Add variable set”→依次创建五个变量集：Color、Typography、Spacing、Radius、Shadow。注意命名全部小写、用短横线分隔，比如 【color-primary-500】，别写成 ColorPrimary500 或 colorPrimary500，否则开发拉取时会解析失败。
3、往 Color 变量集里添加主色：点击“+ Add item”→名称填 【primary-500】→类型选 “Color”→值设为 #4A6FF3；再加一个中性色 【neutral-700】 → #333333。每加一条，立刻在 Description 栏写清楚用途，例如“按钮点击态、链接悬停色，禁止用于背景”。
4、Typography 里加 heading-lg：名称 【heading-lg】，类型选 “Typography”，字体填 Inter，字号 24px，行高 32px，字重 Bold。Spacing 里加 spacing-md：数值设为 16，单位选 px。这些数值后面全靠它驱动，错一个，所有组件间距就全乱。
第二步：做出可变体的原子组件（Atoms）
原子不是随便画个按钮就行，它必须带属性开关、绑定变量、支持导出进库。没这三样，后续所有组件都只是静态图片。
方法一：做带变体的图标 Symbol
新建页面，命名为 【Atoms】。用矩形工具画一个 24×24 的框→用钢笔或矢量网络画个右箭头→全选→右键→“Create component”。双击进入组件编辑模式，在右侧面板点“Properties”→“+ Add property”→类型选 “Variant”→名称填 “size”，选项加 20 / 24 / 32；再加一个 “color” 属性，选项填 neutral-700 / primary-500 / danger-500。
方法二：做按钮基座 Symbol（关键！）
画一个矩形→文字工具打“Button”→全选→右键→“Create component”。进入编辑后，在 Properties 里加三个 Variant 属性：variant（primary / secondary / outline）、size（sm / md / lg）、state（default / hover / disabled）。每个组合都要手动设置对应颜色变量和文字样式变量——比如 primary-default 要调用 color-primary-500 和 typography-body-md，【千万不能手填 #4A6FF3 或写 14px】。
完成后，回到主画布，右键该 Symbol → “Edit properties” →勾选 “Include in library”。这一步不做，其他页面就插不了实时更新的按钮。
第三步：组装带语义的分子组件（Molecules）
分子是真正能用的功能单元，比如搜索栏、用户卡片、导航菜单。它必须包含内容插槽、响应式占位、默认交互反馈，不能只是几个原子简单拼在一起。
第一步：新建页面 【Molecules】，拖入一个 “Button / Base” 组件实例→拖入一个 “Input / Text” 原子（需提前做好并入库）→再拖一个清空图标（Icon / Close）。
第二步：水平排列三者，用 Auto Layout 包裹：全选→右键→“Add auto layout”。设置主轴间距为 spacing-md（即调用变量，不是填 16）→左右留白用 padding，也绑定 spacing-lg 变量。
第三步：双击进入该 Symbol 编辑，右侧面板点 “Properties” → “+ Add property” →类型选 “Instance swap” →名称填 “placeholder”，选项设为 “Search…” 和 “Enter keyword”。这样插入到不同页面时，能单独覆盖占位文字，不破坏源组件。
第四步：给整个 Symbol 加 description：“带清空功能的搜索栏，支持深色模式切换，hover 时输入框边框变 primary-500，禁用态整体 opacity 0.5”。写清楚，后面别人用才不会瞎改。
第四步：搭响应式模板与文档页（Templates & Docs）
模板决定设计系统怎么落地，文档页决定别人愿不愿意用。没模板，组件就是玩具；没文档，团队根本不会认你这套体系。
新建页面 【Templates】，用 Frame 工具画一个 1440×1024 的画板→用 Auto Layout 拉出三栏布局：左侧导航栏（固定宽 280px）、中间主内容区（flex grow）、右侧边栏（固定宽 320px）。所有区域内部用已入库的分子组件填充，比如导航栏用 “Navigation / Sidebar”，主区放 “Card / User Profile”。
新建页面 【Docs】，顶部放大标题 “Design System v1.0” →下方分区块：左侧放 Tokens 表格（手动列出 color-primary-500 等变量名+值+用途），右侧放 Atoms 预览图（每个图标/按钮贴三种尺寸+三种颜色变体）→中间插入 Molecules 实例，每个都附带 Figma 链接和代码片段示例（如 React 中如何传 size=”lg”）。
最后，选中 Docs 页面所有内容→右键→“Create component”→命名为 “DS / Documentation Page”。这样以后每次更新，只需改这一个组件，所有引用它的页面自动同步。
