Figma规模化设计七条黄金法则：从自动布局到AI协作的工程化实践

1. 项目概述：为规模化设计而生的Figma规则库

如果你是一名UI/UX设计师，或者正在尝试用AI辅助工具（比如Cursor或Claude）来生成设计稿，那你一定遇到过这样的场景：设计文件在迭代中逐渐变得混乱不堪，图层命名随心所欲，组件实例被随意拆解，响应式布局全靠手动拖拽调整。最终，设计稿与开发实现之间仿佛隔着一道鸿沟，协作效率低下，设计系统形同虚设。这正是“saralobo/rules-figma”这个项目要解决的核心痛点。

这是一个面向规模化设计的Figma最佳实践与规则集合。它不仅仅是一份文档，更是一套完整的、可执行的“设计宪法”。其核心价值在于，它同时服务于人类设计师和AI智能体，确保无论是人工操作还是通过Figma API、MCP（Model Context Protocol）进行的程序化设计，产出的设计稿都具备一致的高标准、可维护性和可交付性。项目提出了七条绝对规则，从文件组织、图层命名到自动布局、响应式策略和组件架构，覆盖了设计资产从创建到交付的全生命周期。对于希望建立严谨设计流程的团队，或是探索AI辅助设计边界的个人来说，这套规则提供了一条清晰的路径，能将散乱的设计实践，转变为可预测、可扩展的工业化流程。

2. 核心设计哲学与七条绝对规则解析

这套规则库的底层逻辑，是将设计视为一种“工程化”的产物，而非纯粹的艺术创作。它强调约束、一致性和自动化，其终极目标是让设计稿本身就成为一份清晰、无歧义的“设计说明书”，能够被团队成员、开发工程师乃至AI智能体无缝理解和处理。

2.1 规则一：万物皆用自动布局

这是所有规则中最基础、也最不容妥协的一条。“Everything uses auto-layout — No manually positioned elements.”

• 为什么是“绝对规则”？自动布局（Auto Layout）是Figma实现动态、可适配设计的基石。手动排列元素虽然直观，但无法形成系统性的约束关系。当需要调整间距、适配不同内容或屏幕尺寸时，手动布局意味着大量的重复劳动和潜在的错位风险。自动布局通过定义容器内元素的排列方向、间距和对齐方式，建立了一个自适应的系统。
• 实操要点与常见误区：
  • 从框架（Frame）开始：创建任何屏幕或组件时，首先将其转换为Frame，然后立即应用自动布局。避免在画布上直接堆叠形状和文本。
  • 理解三种尺寸模式：这是自动布局的精髓。
    • 固定（Fixed）：元素保持你设定的宽/高不变。常用于图标、固定大小的按钮或头像。
    • 填充（Fill）：元素会拉伸以填满父容器在对应方向上的剩余空间。这是实现响应式的关键，常用于主要内容区域。
    • 拥抱内容（Hug）：元素的宽/高由其子内容（如文本长度、内部元素）决定。这是最常用的模式，用于按钮、标签、文本段落等。
  • 嵌套是常态：复杂的界面几乎总是由多层嵌套的自动布局框架构成。例如，一个导航栏（水平自动布局）内部可能包含一个Logo（固定）、一个搜索框（填充）和一组图标按钮（水平自动布局）。
• 给AI的特别提示：在通过API创建元素时，必须遵循“先追加子元素，再设置填充模式”的顺序。这是一个极易出错但至关重要的模式，规则库中将其列为第七条绝对规则，我们会在后面详细解释。

2.2 规则二：语义化图层命名

“Every layer has a semantic name —Section/Header, notFrame 237.”

• 从“是什么”到“做什么”：命名的目的不是为了描述外观（如“蓝色矩形”），而是揭示其目的和在界面结构中的角色。Button/Primary比Rounded Rectangle 5包含的信息量要大得多。
• 命名结构建议：采用父级分类/具体名称的格式。例如：
  • Container/Main Content
  • Form/Email Input Field
  • Card/Product Image
  • Navigation/Desktop Menu
• 带来的巨大好处：
  1. 极速搜索：在拥有数百个图层的文件中，你可以瞬间通过搜索“Header”或“Button”找到所有相关元素。
  2. 清晰的手工交接：开发工程师可以直接从图层名称理解元素功能，无需反复询问设计师。
  3. AI可理解性：语义化的名称让AI智能体能准确识别元素的意图，从而进行正确的修改或生成关联内容。

2.3 规则三：屏幕固定，内容填充

“Screen = FIXED, Content = FILL × FILL — The responsive skeleton.”

这是一条关于响应式设计的核心策略。它定义了一个清晰的层级结构：

1. 最外层的屏幕框架（Screen Frame）：尺寸设置为固定（Fixed）。这定义了设计稿的视口基准尺寸，例如桌面端1440px宽度，移动端375px宽度。
2. 内部的内容容器（Content Container）：其尺寸应设置为水平填充（Fill）和垂直填充（Fill）。这意味着它会撑满整个屏幕框架。
3. 内容区域内的模块：再根据需要使用Hug或Fixed模式进行精细布局。

• 工作原理：当屏幕框架的尺寸改变（例如，从桌面尺寸切换到平板尺寸），由于内容容器是Fill模式，它会自动适应新的屏幕尺寸。然后，内容容器内部基于自动布局的模块会按照自身的约束（如换行、间距调整）进行重组，从而实现整体的响应式适配。这比单独为每个内部元素设置复杂的约束（Constraints）要更可靠、更易于维护。

2.4 规则四：全面使用变量与设计令牌

“No hard-coded colors — Use variables/tokens everywhere.”

硬编码的颜色、字体、间距等样式值是设计系统腐化的开端。规则库提倡使用Figma变量（Variables）来构建一个三层令牌体系。

• 三层令牌架构：

  1. 原始值（Primitives）：最底层的、与具体场景无关的值。例如：#4361ee（蓝色）、16px（基础单位）、Inter（字体系列）。
  2. 语义令牌（Semantic Tokens）：赋予原始值以意义。例如：color-primary映射到#4361ee，spacing-md映射到16px，font-body映射到Inter Regular。
  3. 组件令牌（Component Tokens）：在特定组件中使用的语义令牌。例如：button-background映射到color-primary，button-padding映射到spacing-md。

• 实操心得：从项目一开始就建立变量集合。即使最初只有几个颜色和字号，也要坚持使用。当需要支持深色模式或多主题时，你只需要在变量集合中创建新的模式（Modes），并重新映射语义令牌，所有使用该令牌的组件都会自动更新，这比手动查找替换要高效和准确一万倍。

2.5 规则五：永不拆解组件实例

“Never detach instances — Override properties instead.”

这是维护组件系统一致性的铁律。当你从组件库中拖出一个按钮实例后，如果需要修改，必须使用Figma提供的**覆盖（Override）**功能来更改文本、图标或颜色等属性，而绝不应该右键选择“拆解实例（Detach Instance）”。

• 拆解的危害：拆解后，该元素就与原始主组件断开了链接。当主组件更新时（比如修改了圆角大小），所有未拆解的实例都会自动更新，而拆解过的实例则成为“孤儿”，需要手动逐一修改，极易导致界面不一致。
• 正确的覆盖方式：通过右侧属性面板进行覆盖。良好的组件设计应提前通过变体（Variants）和组件属性（Component Properties）来暴露常用的可定制选项，使得覆盖操作直观且可控。

2.6 规则六：用间距建立视觉层次

“Space between groups ≥ 2× space within — Visual hierarchy through proximity.”

这条规则源于格式塔原理中的“接近性”原则。相关的元素应该靠得更近，不相关的元素则应分开。在数值上，它给出了一个实用的启发式方法：组与组之间的间距，至少应该是组内元素间距的两倍。

• 应用示例：假设一个卡片组件内部，图片和标题之间的间距是8px。那么，这个卡片与页面中下一个卡片之间的间距，至少应该是16px。这能清晰地在视觉上区分出“卡片内部的内容关联”和“两个独立卡片之间的分隔”。
• 技巧：在Figma中，你可以使用“间距调整器”（选中多个元素后出现的蓝色圆点）快速统一组内间距，并确保组间间距遵循此倍数关系。这比手动输入数值更快，且能保持视觉节奏的一致性。

2.7 规则七：API操作的核心顺序

“Append to parent BEFORE setting FILL — The #1 API error prevention rule.”

这条规则专门针对通过Figma Plugin API或MCP进行程序化设计的场景。当AI或脚本需要创建一个尺寸模式为“填充（Fill）”的元素时，操作顺序至关重要。

• 错误顺序（会导致失败）：

  1. 创建一个新节点（如矩形）。
  2. 将其尺寸模式设置为FILL。
  3. 将其追加（append）到父节点中。

• 正确顺序（必须遵守）：

  1. 创建一个新节点。
  2. 首先将其追加到父节点中。
  3. 然后再将其尺寸模式设置为FILL。

• 原因解析：在Figma的API逻辑中，一个节点的布局约束（包括Fill模式）的计算，依赖于它已知的父节点上下文。在它被放入父容器之前，Figma无法确定“填充”所参照的坐标系是什么。先追加，再设置模式，符合这个依赖关系。这是无数开发者踩过坑后总结出的黄金法则，规则库将其提炼为第七条绝对规则，避免了AI在自动化设计时出现布局错乱。

3. 面向AI智能体的深度适配与MCP模式

“saralobo/rules-figma”项目的另一个前瞻性亮点，是它明确将AI智能体（如Cursor、Claude with MCP）视为一等用户。这意味着，这些规则不仅是给人读的，更是给AI理解和执行的。

3.1 为什么AI需要专门的设计规则？

人类设计师可以凭借经验和直觉处理模糊的指令，比如“把这个按钮弄大点”。但AI需要极其明确、结构化、无歧义的指令。模糊的规则会导致AI生成不一致、不可用的设计稿。例如，如果规则只说“使用自动布局”，AI可能会在复杂的嵌套场景中错误地应用尺寸模式。因此，项目中的docs/07-figma-api-patterns.md文件至关重要，它详细规定了程序化设计时的操作顺序、错误处理和特定模式。

3.2 如何作为Cursor规则使用？

Cursor编辑器支持自定义规则文件（.mdc），这些文件会作为上下文提供给其内置的AI助手，指导它如何编写代码或执行任务。这个Figma规则库可以无缝集成到这一工作流中。

1. 文件准备：将规则库中相关的Markdown文档（如自动布局、命名规范）复制到你的项目目录下，例如.cursor/rules/文件夹内。
2. 格式转换：将文件后缀从.md改为.mdc。
3. 添加元数据：在文件顶部添加Cursor Rules的元数据头。例如，对于自动布局规则文件：

   --- description: "Auto-layout rules for Figma screen construction" globs: ["*.figma", "*.design"] # 可以指定对哪些文件类型生效 alwaysApply: true ---

4. 生效：完成以上步骤后，当你在Cursor中与AI助手讨论Figma设计或编写相关代码时，它会自动引用这些规则文件中的条款，确保其建议和操作符合你制定的设计规范。

3.3 MCP（模型上下文协议）的潜力

MCP允许AI模型（如Claude）连接到外部工具和服务。Figma MCP服务器可以让Claude直接“操作”Figma文件。此时，这套规则库就成为了Claude在操作Figma时的“行动指南”。例如，当你对Claude说“在首页添加一个导航栏”，Claude会基于规则库的指引：

1. 创建一个名为Navigation/Main的Frame。
2. 立即对其应用水平自动布局。
3. 在其中创建名为Logo、Menu Container、User Avatar的子元素。
4. 按照正确的顺序设置Menu Container为填充模式，以占据中间空间。
5. 使用设计令牌中的颜色变量为背景上色。

整个过程无需人工干预细节，且产出物完全符合团队规范。

4. 从零开始实施这套规则体系的实战指南

理解了核心理念后，如何在一个新项目或现有项目中落地这套规则呢？以下是一个循序渐进的实战指南。

4.1 第一阶段：奠定基础（文件与命名）

• 步骤1：建立文件结构。参照01-file-organization.md，在Figma文件中创建清晰的页面（Pages）结构。一个典型的建议结构是：
  • 🏠 Cover：项目封面，说明文件内容。
  • 📱 Screens：存放所有最终界面稿。
  • 🧩 Components：存放所有组件（从原子到生物）。
  • 🗃️ Archive：存放废弃或历史版本的设计，保持主区域整洁。
• 步骤2：开启命名革命。从此刻起，为创建的每一个图层、组、框架命名。使用分类/名称的语义化格式。对于现有文件，可以分批进行重命名，优先处理高频使用的组件和核心页面。
• 避坑提示：不要试图一次性重命名整个混乱的旧文件，这会让人崩溃。可以借助一些Figma社区插件来辅助批量重命名，但核心逻辑仍需自己把握。

4.2 第二阶段：构建骨架（自动布局与响应式）

• 步骤3：强制使用自动布局。新建任何框架后，养成肌肉记忆：Shift + A（应用自动布局快捷键）。从最小的按钮、标签开始练习，理解Hug、Fill、Fixed的区别。
• 步骤4：搭建响应式框架。为每个主要的屏幕框架应用“规则三”。将最外层Frame设为固定尺寸（如桌面1440x1024），将其内部的“内容容器”Frame设置为Fill×Fill。然后在这个内容容器内进行具体设计。
• 实操心得：在早期，可以多使用Figma的“原型（Prototype）”功能中的“预览”模式，拖动屏幕边缘，实时查看你的自动布局和填充设置是否真的能流畅适配。这是检验响应式策略最直观的方法。

4.3 第三阶段：注入灵魂（组件与令牌）

• 步骤5：创建设计令牌。在“本地变量”中，开始建立你的三层令牌体系。
  1. 先定义原始值：品牌色、灰度色、字体、间距尺度（如4px为基数）、圆角尺寸。
  2. 再创建语义令牌：color-bg-primary,color-text-secondary,font-heading-lg,spacing-section。
  3. 在设计组件时，绑定组件样式（颜色、文本样式）到这些语义令牌。
• 步骤6：构建组件库。从最小的“原子”（按钮、输入框、图标）开始创建为主组件。大量使用“变体（Variants）”来管理不同状态（默认、悬停、禁用）和类型（主要、次要、警示）。为组件设置清晰的属性（如“图标”、“文本”）。
• 重要警告：在团队中，组件库和变量集合最好由专人维护在单独的“团队库（Team Library）”文件中，其他设计文件通过“启用库”来调用。这保证了单一数据源。

4.4 第四阶段：协作与自动化（AI与开发）

• 步骤7：为开发交付做准备。利用Figma的“开发模式（Dev Mode）”，检查你的设计稿。确保图层命名清晰，组件实例未被拆解，变量使用正确。开发工程师可以在这里直接查看尺寸、间距、颜色值（显示为变量名而非色值）和获取代码片段。
• 步骤8：引入AI规则。如果你是个人或小团队探索AI辅助设计，将关键的.md文件转为Cursor的.mdc规则。在与AI协作时，明确要求其遵循这些规则，并观察其产出质量的变化。你会发现，指令越符合规则，AI生成的设计稿就越可用。

5. 常见问题与高级场景应对策略

在实际推行这套规则的过程中，你肯定会遇到各种疑问和边界情况。以下是一些典型问题的解答和进阶技巧。

5.1 问题：我的设计有很多不规则、非矩形的元素（比如异形背景），怎么用自动布局？

• 策略：自动布局的核心是管理元素的排列和尺寸，而非元素本身的形状。对于异形背景图，你可以将其作为一个Fixed尺寸的图片或矢量图形，放入一个自动布局的Frame中。这个Frame负责定位，而背景图作为其子元素。复杂图形的内部元素布局，仍然可以在其上层或内部使用自动布局Frame来组织。

5.2 问题：嵌套太多层自动布局后，图层结构变得很深，选择和管理起来很麻烦。

• 策略：这是追求结构化必然的代价，但可以通过技巧缓解。
  1. 使用“选择父级/子级”快捷键：在Mac上是Cmd + Click（选择下层），Cmd + Option + Click（选择上层）。熟练使用可以快速在层级间导航。
  2. 合理使用“组（Group）”：虽然自动布局Frame是主力，但有时将几个关联的、不需要复杂响应逻辑的Frame临时编组，可以简化图层列表。但记住，组不具备自动布局的约束能力，最终可能还是需要转换为Frame。
  3. 折叠图层：在图层列表中将已完成的、复杂的嵌套结构折叠起来，保持工作区的清爽。

5.3 问题：设计令牌（变量）在管理深色/浅色模式时，如何设置最有效率？

• 最佳实践：
  1. 为你的“颜色变量集合”创建多个“模式（Modes）”，例如Light和Dark。
  2. 你的语义令牌（如color-bg-primary）应该绑定到不同的原始值集合。在Light模式下，它绑定到gray-50（浅灰）；在Dark模式下，它绑定到gray-900（深灰）。
  3. 在画布上，你可以通过顶部的模式选择器，一键切换整个文件所有使用该变量的元素的颜色主题。关键在于：永远不要在组件或页面上通过“本地样式覆盖”来硬编码颜色，必须始终引用变量。

5.4 问题：团队中有人不遵守规则，破坏了文件规范怎么办？

• 技术与文化结合：
  1. 教育先行：组织内部分享会，讲解这些规则如何让每个人的工作更轻松（尤其是后续修改和对接开发时）。
  2. 建立审查（Review）机制：在将设计稿交付开发或进入下一阶段前，进行简单的同行审查，重点检查自动布局、命名和组件使用情况。
  3. 利用插件辅助检查：有些Figma社区插件可以扫描文件，检查是否有未命名的图层、未使用自动布局的Frame等，作为自动化检查工具。
  4. 从新项目开始：在全新的、重要的项目中强制推行这套规则，让大家看到其带来的秩序和效率红利，比改造一个旧文件更有说服力。

5.5 场景：如何用这套规则处理一个复杂的、包含侧边栏和内容区域的数据仪表盘？

1. 整体框架：最外层Screen Frame设为固定尺寸（如1920x1080）。
2. 一级布局：内部创建一个水平自动布局的Frame，尺寸Fill×Fill。它有两个子项：Sidebar(Fixed宽度，如280px) 和Main Content Area(Fill宽度)。
3. 侧边栏内部：Sidebar是一个垂直自动布局的Frame，内部包含Logo（Fixed）、导航菜单项（垂直排列，每项Hug高度）和用户信息（Fixed）。
4. 内容区内部：Main Content Area是一个垂直自动布局的Frame（Fill × Fill）。顶部是Header(Hug高度)，中间是Dashboard Grid。
5. 仪表盘网格：Dashboard Grid可以使用Figma的网格（Grid）功能来定义列，或者用多个水平/垂直自动布局Frame嵌套来模拟网格。每个数据卡片本身也是一个遵循原子设计原则的复杂组件。
6. 命名：每一层都进行语义化命名，如Layout/App Shell,Navigation/Sidebar,Card/Metric KPI。
7. 响应式：当屏幕Frame变窄时，由于Main Content Area是Fill，它会自动收缩。你可以为Sidebar设置一个最小宽度，并在更窄的断点下，通过创建不同的组件变体（如折叠侧边栏）来切换。

这套规则不是束缚创造力的枷锁，而是将设计师从重复、琐碎、易错的劳动中解放出来的脚手架。它让设计师能更专注于信息架构、用户体验和视觉美学本身，而将实现的一致性和规范性交给系统和规则。当人类设计师与AI智能体共用同一套“语言”和“法律”时，设计的生产力与可靠性将迎来质的飞跃。开始尝试在你的下一个Figma文件中应用第一条规则——为你创建的每一个Frame按下Shift + A，你会发现，秩序之美就此开始。