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

1. 项目概述为规模化设计而生的Figma规则库如果你是一名UI/UX设计师或者正在尝试用AI辅助工具比如Cursor或Claude来生成设计稿那你一定遇到过这样的场景设计文件在迭代中逐渐变得混乱不堪图层命名随心所欲组件实例被随意拆解响应式布局全靠手动拖拽调整。最终设计稿与开发实现之间仿佛隔着一道鸿沟协作效率低下设计系统形同虚设。这正是“saralobo/rules-figma”这个项目要解决的核心痛点。这是一个面向规模化设计的Figma最佳实践与规则集合。它不仅仅是一份文档更是一套完整的、可执行的“设计宪法”。其核心价值在于它同时服务于人类设计师和AI智能体确保无论是人工操作还是通过Figma API、MCPModel 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 ContentForm/Email Input FieldCard/Product ImageNavigation/Desktop Menu带来的巨大好处极速搜索在拥有数百个图层的文件中你可以瞬间通过搜索“Header”或“Button”找到所有相关元素。清晰的手工交接开发工程师可以直接从图层名称理解元素功能无需反复询问设计师。AI可理解性语义化的名称让AI智能体能准确识别元素的意图从而进行正确的修改或生成关联内容。2.3 规则三屏幕固定内容填充“Screen FIXED, Content FILL × FILL — The responsive skeleton.”这是一条关于响应式设计的核心策略。它定义了一个清晰的层级结构最外层的屏幕框架Screen Frame尺寸设置为固定Fixed。这定义了设计稿的视口基准尺寸例如桌面端1440px宽度移动端375px宽度。内部的内容容器Content Container其尺寸应设置为水平填充Fill和垂直填充Fill。这意味着它会撑满整个屏幕框架。内容区域内的模块再根据需要使用Hug或Fixed模式进行精细布局。工作原理当屏幕框架的尺寸改变例如从桌面尺寸切换到平板尺寸由于内容容器是Fill模式它会自动适应新的屏幕尺寸。然后内容容器内部基于自动布局的模块会按照自身的约束如换行、间距调整进行重组从而实现整体的响应式适配。这比单独为每个内部元素设置复杂的约束Constraints要更可靠、更易于维护。2.4 规则四全面使用变量与设计令牌“No hard-coded colors — Use variables/tokens everywhere.”硬编码的颜色、字体、间距等样式值是设计系统腐化的开端。规则库提倡使用Figma变量Variables来构建一个三层令牌体系。三层令牌架构原始值Primitives最底层的、与具体场景无关的值。例如#4361ee蓝色、16px基础单位、Inter字体系列。语义令牌Semantic Tokens赋予原始值以意义。例如color-primary映射到#4361eespacing-md映射到16pxfont-body映射到Inter Regular。组件令牌Component Tokens在特定组件中使用的语义令牌。例如button-background映射到color-primarybutton-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”的元素时操作顺序至关重要。错误顺序会导致失败创建一个新节点如矩形。将其尺寸模式设置为FILL。将其追加append到父节点中。正确顺序必须遵守创建一个新节点。首先将其追加到父节点中。然后再将其尺寸模式设置为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规则库可以无缝集成到这一工作流中。文件准备将规则库中相关的Markdown文档如自动布局、命名规范复制到你的项目目录下例如.cursor/rules/文件夹内。格式转换将文件后缀从.md改为.mdc。添加元数据在文件顶部添加Cursor Rules的元数据头。例如对于自动布局规则文件--- description: Auto-layout rules for Figma screen construction globs: [*.figma, *.design] # 可以指定对哪些文件类型生效 alwaysApply: true ---生效完成以上步骤后当你在Cursor中与AI助手讨论Figma设计或编写相关代码时它会自动引用这些规则文件中的条款确保其建议和操作符合你制定的设计规范。3.3 MCP模型上下文协议的潜力MCP允许AI模型如Claude连接到外部工具和服务。Figma MCP服务器可以让Claude直接“操作”Figma文件。此时这套规则库就成为了Claude在操作Figma时的“行动指南”。例如当你对Claude说“在首页添加一个导航栏”Claude会基于规则库的指引创建一个名为Navigation/Main的Frame。立即对其应用水平自动布局。在其中创建名为Logo、Menu Container、User Avatar的子元素。按照正确的顺序设置Menu Container为填充模式以占据中间空间。使用设计令牌中的颜色变量为背景上色。整个过程无需人工干预细节且产出物完全符合团队规范。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创建设计令牌。在“本地变量”中开始建立你的三层令牌体系。先定义原始值品牌色、灰度色、字体、间距尺度如4px为基数、圆角尺寸。再创建语义令牌color-bg-primary,color-text-secondary,font-heading-lg,spacing-section。在设计组件时绑定组件样式颜色、文本样式到这些语义令牌。步骤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 问题嵌套太多层自动布局后图层结构变得很深选择和管理起来很麻烦。策略这是追求结构化必然的代价但可以通过技巧缓解。使用“选择父级/子级”快捷键在Mac上是Cmd Click选择下层Cmd Option Click选择上层。熟练使用可以快速在层级间导航。合理使用“组Group”虽然自动布局Frame是主力但有时将几个关联的、不需要复杂响应逻辑的Frame临时编组可以简化图层列表。但记住组不具备自动布局的约束能力最终可能还是需要转换为Frame。折叠图层在图层列表中将已完成的、复杂的嵌套结构折叠起来保持工作区的清爽。5.3 问题设计令牌变量在管理深色/浅色模式时如何设置最有效率最佳实践为你的“颜色变量集合”创建多个“模式Modes”例如Light和Dark。你的语义令牌如color-bg-primary应该绑定到不同的原始值集合。在Light模式下它绑定到gray-50浅灰在Dark模式下它绑定到gray-900深灰。在画布上你可以通过顶部的模式选择器一键切换整个文件所有使用该变量的元素的颜色主题。关键在于永远不要在组件或页面上通过“本地样式覆盖”来硬编码颜色必须始终引用变量。5.4 问题团队中有人不遵守规则破坏了文件规范怎么办技术与文化结合教育先行组织内部分享会讲解这些规则如何让每个人的工作更轻松尤其是后续修改和对接开发时。建立审查Review机制在将设计稿交付开发或进入下一阶段前进行简单的同行审查重点检查自动布局、命名和组件使用情况。利用插件辅助检查有些Figma社区插件可以扫描文件检查是否有未命名的图层、未使用自动布局的Frame等作为自动化检查工具。从新项目开始在全新的、重要的项目中强制推行这套规则让大家看到其带来的秩序和效率红利比改造一个旧文件更有说服力。5.5 场景如何用这套规则处理一个复杂的、包含侧边栏和内容区域的数据仪表盘整体框架最外层Screen Frame设为固定尺寸如1920x1080。一级布局内部创建一个水平自动布局的Frame尺寸Fill×Fill。它有两个子项Sidebar(Fixed宽度如280px) 和Main Content Area(Fill宽度)。侧边栏内部Sidebar是一个垂直自动布局的Frame内部包含LogoFixed、导航菜单项垂直排列每项Hug高度和用户信息Fixed。内容区内部Main Content Area是一个垂直自动布局的FrameFill × Fill。顶部是Header(Hug高度)中间是Dashboard Grid。仪表盘网格Dashboard Grid可以使用Figma的网格Grid功能来定义列或者用多个水平/垂直自动布局Frame嵌套来模拟网格。每个数据卡片本身也是一个遵循原子设计原则的复杂组件。命名每一层都进行语义化命名如Layout/App Shell,Navigation/Sidebar,Card/Metric KPI。响应式当屏幕Frame变窄时由于Main Content Area是Fill它会自动收缩。你可以为Sidebar设置一个最小宽度并在更窄的断点下通过创建不同的组件变体如折叠侧边栏来切换。这套规则不是束缚创造力的枷锁而是将设计师从重复、琐碎、易错的劳动中解放出来的脚手架。它让设计师能更专注于信息架构、用户体验和视觉美学本身而将实现的一致性和规范性交给系统和规则。当人类设计师与AI智能体共用同一套“语言”和“法律”时设计的生产力与可靠性将迎来质的飞跃。开始尝试在你的下一个Figma文件中应用第一条规则——为你创建的每一个Frame按下Shift A你会发现秩序之美就此开始。