Figma 设计系统
如何在Figma中为iOS/iPadOS/macOS、Android和Web构建设计系统，基于官方Figma MCP服务器。每一个值都是一个变量。样式用于由变量组成的复合体：文本样式、效果样式、渐变填充样式。纯色样式已过时。
MCP工具调用属于随Figma插件一起提供的插件技能（figma:figma-use、figma:figma-generate-library、figma:figma-generate-design及其同类）。Figma维护它们。将此技能与它们一起加载。在机制上，插件技能优先；在流程和完整性上，本技能优先。
快速参考
| 主题 | 参考文档 |
|---|---|
| 所有技能的令牌命名：层级、家族、各平台转换规则、代码语法；变量集合、模式、排版、间距、圆角 | reference/token-architecture.md |
| 组件和状态列表、Auto Layout、属性、Slots、必选的交互状态连接 | reference/component-architecture.md |
| 在Figma中构建液态玻璃：Apple工具包、参数、玻璃令牌、API限制 | reference/liquid-glass.md |
| 将视觉风格应用于现有设计（重构，而非令牌替换） | reference/applying-styles.md |
| 从零构建和复制应用的操作顺序、文件结构、Dev Mode交接、可访问性、反模式 | reference/workflows-and-handoff.md |
| 四大门禁的完整说明、如何根据任务缩放、每平台的最小屏幕集 | reference/gates.md |
| 会变化的Figma信息：计划门禁、限制、Beta状态、MCP工具和技能名称、工具包链接、已过时 | reference/platform-status.md |
门禁
四条规则，由我制定，在每次会话开始和整个过程中检查。它们静默失败，且在交接时代价最高。
- 暗色画布优先。 每个页面的画布在有任何内容之前必须是
#1E1E1E。如果是白色，停下来修复。 - 无空页面或画框。 创建它，完全填充它，然后继续。没有最小屏幕集的平台是不完整的。
- 令牌名称与代码库完全一致。 使用已发布的名称。不要发明新名称。
- 亮色和暗色，两者都要。 每个语义颜色都有两种值，每个屏幕在完成前都必须在两种模式下构建和审查。
完整的构建需要全部四个门禁。对现有文件的小编辑不能使文件变得更糟，任何已损坏的内容会被报告，而不是静默修复。reference/gates.md 包含原因、缩放规则和最小屏幕集。
在Figma中：
暗色画布：
figma.currentPage.backgrounds = [{
type: 'SOLID',
color: { r: 0.118, g: 0.118, b: 0.118 }, // #1E1E1E
opacity: 1
}];
figma.currentPage 是一个页面。使用 figma:figma-use 中的页面切换规则对每个页面重复操作，并在创建每个新页面时设置。手动方式：右键单击空白画布 → 背景颜色。截屏查看。
无空页面。 在填充页面的同一步创建页面。如果存在 🎨 Tokens 页面，则在触及 🎛 Components 页面之前，变量集合应已在其中。
令牌名称。 变量路径和每个变量的代码语法遵循 reference/token-architecture.md。如果代码库中已命名某个令牌，则以该名称为准。
亮色和暗色。 语义颜色集合上的亮色和暗色模式。将其顶部画框分别设置为每种模式来审查每个屏幕。
分工
此技能提供Figma流程和令牌名称。值和平台规则来自拥有它们的技能。
| 需求 | 拥有者 |
|---|---|
| 四大门禁和最小屏幕集 | 本技能 (reference/gates.md) |
| 调色板值以及每个语义角色别名对应的原始色 | color-system |
| Apple字体大小、系统颜色、液态玻璃规则和外观、操作系统版本 | apple-platform |
| Material颜色角色、形状缩放、窗口大小类、库版本 | android-platform |
| CSS中的Web令牌、代码中的断点 | web-platform |
| 运动令牌名称和值 | motion-design |
| 样式目录 | visual-styles |
会话启动
- 加载
figma:figma-use以及适合任务的插件技能：figma-generate-library（用于令牌和组件）、figma-generate-design（用于屏幕）、figma-design-to-code（在读取设计以进行实现之前）。 - 打开会话。使用文件键和一行描述的任务调用
create_session，在任何其他文件工具（包括只读工作）之前。新文件：先调用create_new_file，然后create_session。 - 先读后写。现有文件有页面、集合和约定。在添加内容之前找到它们。
- 检查门禁，根据任务缩放。
设计风格
在构建任何令牌或组件之前，先与 visual-styles 技能确认视觉风格。如果未指定风格，则默认使用平台自己的设计语言。在不同风格之间，令牌层级、组件结构、Auto Layout 和状态连接保持不变。只有值和结构细节会变化。reference/applying-styles.md 说明了如何在Figma中应用风格。
理念
设计系统是设计与代码之间的契约。在Figma中定义的令牌与SwiftUI、Compose和CSS中使用的令牌相同。名称、值和层次结构在所有三者中保持一致。没有工程作为受众的设计系统只是一张贴纸图。
设计一切。每个屏幕、每个状态、每个边缘情况。空、加载、错误、部分内容、溢出、长文本、短文本、禁用。只覆盖快乐路径的设计只是一块情绪板。工程团队会在代码中发明缺失的状态，而且它们通常是错误的。
像素完美意味着完全精确。将所有内容绑定到变量，进行测量。一个宽度为17px的组件，因为“看起来差不多”而不算像素完美。
两种工作模式
从零构建。 设计系统优先，组件其次，屏幕最后。在触摸任何组件之前定义令牌。
复制现有应用。 先审计，提取隐含系统，正式化，然后在正式化的令牌上重建组件。切勿跳过审计。
两者在 reference/workflows-and-handoff.md 中有详细步骤。