Figma MCP Server

# 绝对定位转相对布局研究 ## 研究概述 本文档总结了将绝对定位（`position: absolute` + `left/top`）转换为相对布局（`margin`、`padding`、`gap`）的行业实现和学术研究。 ## 1. 行业实现 ### 1.1 FigmaToCode (bernaferrari/FigmaToCode) **方法**: AltNodes 中间表示层 **要点**: - 使用 4 阶段转换流水线： 1. 节点转换 - Figma 节点 → 优化后的 JSON 2. 中间表示 - JSON → AltNodes（虚拟 DOM） 3. 布局优化 - 检测自动布局、响应式约束 4. 代码生成 - 框架特定输出 - 对于复杂布局（绝对定位 + 自动布局），做出"关于结构的智能决策" - 检测父子关系和 z-index 排序 - 最佳情况使用 `insets`，最差情况使用 `left/top` **来源**: https://github.com/bernaferrari/FigmaToCode ### 1.2 Facebook Yoga 布局引擎 **方法**: C++ 实现的 CSS Flexbox **Padding/Margin 计算**: ``` paddingAndBorderForAxis = leadingPaddingAndBorder + trailingPaddingAndBorder marginForAxis = leadingMargin + trailingMargin ``` **解析算法**: - UnitPoint: 直接像素值 - UnitPercent: `value * parentSize / 100` - UnitAuto: 对于 margins 返回 0 **关键函数**: - `nodeLeadingPadding()` - 前端 padding - `nodeTrailingPadding()` - 后端 padding - `nodeMarginForAxis()` - 轴向总 margin - `resolveValue()` - 单位转换 **来源**: https://github.com/facebook/yoga ### 1.3 imgcook（阿里巴巴） **方法**: 基于规则 + 基于 CV 的布局算法 **要点**: - 将设计图层转换为带绝对位置的扁平 JSON - 使用基于规则的算法合并相邻的行/块 - 使用基于 CV 的方法进行泛化（像素级比较） - 未公开 margin/padding 计算的具体公式 **局限性**: 实现细节未公开 **来源**: https://www.alibabacloud.com/blog/imgcook-3-0-series-layout-algorithm-design-based-code-generation_597856 ### 1.4 teleportHQ UIDL **方法**: 抽象 UI 描述语言 **要点**: - UIDL 中的类 CSS 样式属性 - 用于间距常量的设计令牌（→ CSS 变量） - 似乎不处理基于坐标的转换 **来源**: https://github.com/teleporthq/teleport-code-generators ## 2. 学术研究 ### 2.1 GUI 布局推断算法 **论文**: "A layout inference algorithm for Graphical User Interfaces"（2015） **方法**: 使用 Allen 区间代数的两阶段算法 **阶段 1: 坐标 → 相对定位** - 将基于坐标的定位转换为相对定位 - 使用有向图和 Allen 关系 - 建立元素之间的空间关系 **阶段 2: 模式匹配与图重写** - 应用探索性算法 - 模式匹配以识别布局结构 - 图重写以获得布局解决方案 **结果**: - 97% 忠实于原始视图 - 84% 在调整大小时保持比例 **来源**: https://www.sciencedirect.com/science/article/abs/pii/S0950584915001718 ### 2.2 Allen 区间代数 **13 种基本关系**（适用于空间布局）: | 关系 | 符号 | 描述 | | ------ | ---- | ------------------------------------------ | | 在前 | p | A 在 B 开始前结束（有间隔） | | 相遇 | m | A 正好在 B 开始处结束 | | 重叠 | o | A 在 B 之前开始，它们重叠，B 在 A 之后结束 | | 被结束 | F | B 在 A 期间开始，一起结束 | | 包含 | D | A 完全包含 B | | 开始 | s | A 和 B 一起开始，A 先结束 | | 相等 | e | A 和 B 相同 | | 被开始 | S | B 在 A 开始时开始，B 在之后结束 | | 期间 | d | B 完全包含 A | | 结束 | f | A 在 B 期间开始，一起结束 | | 被重叠 | O | B 在 A 之前开始，它们重叠 | | 被相遇 | M | A 正好在 B 结束处开始 | | 被在前 | P | B 在 A 开始前结束（有间隔） | **应用**: 确定空间关系以推断布局结构 **来源**: https://ics.uci.edu/~alspaugh/cls/shr/allen.html ## 3. 关键洞察 ### 3.1 Padding 推断公式 当父容器有子元素时，可以推断 padding： ``` paddingTop = firstChild.y - parent.y paddingLeft = firstChild.x - parent.x paddingBottom = (parent.y + parent.height) - (lastChild.y + lastChild.height) paddingRight = (parent.x + parent.width) - (lastChild.x + lastChild.width) ``` **对于行布局**（flex-direction: row）: - 按 X 位置排序子元素 - `paddingLeft` = 第一个子元素距父元素的左偏移 - `paddingTop` = 子元素中最小的顶部偏移 - `gap` = 子元素之间的一致间距（已实现） **对于列布局**（flex-direction: column）: - 按 Y 位置排序子元素 - `paddingTop` = 第一个子元素距父元素的顶部偏移 - `paddingLeft` = 子元素中最小的左偏移 - `gap` = 子元素之间的一致间距（已实现） ### 3.2 单独的 Margin 计算 对于没有与主轴完美对齐的元素： ``` 对于行布局: expectedY = parent.y + paddingTop marginTop = child.y - expectedY 对于列布局: expectedX = parent.x + paddingLeft marginLeft = child.x - expectedX ``` ### 3.3 交叉轴对齐 vs Margin 当元素有不同的交叉轴位置时： **选项 A: 使用 align-items + 单独的 margins** ```css .parent { display: flex; align-items: flex-start; } .child-offset { margin-top: 10px; /* 单独偏移 */ } ``` **选项 B: 使用 align-items: center/stretch** 如果所有元素都居中或拉伸，则不需要单独的 margins。 ### 3.4 绝对定位保留 某些元素必须保持绝对定位： - 重叠元素（IoU > 0.1） - 堆叠元素（z-index 层叠） - 超出父元素边界的元素 - 装饰性/背景元素 ## 4. 建议算法 ### 步骤 1: 分类元素 ``` 对于每个有子元素的父元素: 1. 检测重叠元素（IoU > 0.1）→ 保持绝对定位 2. 剩余元素 → 流式元素 ``` ### 步骤 2: 检测布局方向 ``` 对于流式元素: 1. 分析水平与垂直分布 2. 确定主轴（行或列） 3. 计算 gap 一致性 ``` ### 步骤 3: 计算 Padding ``` 如果检测到布局: 1. 按主轴位置排序子元素 2. paddingStart = 第一个子元素距父元素起始的偏移 3. paddingEnd = 父元素结束 - 最后一个子元素结束 4. 分析交叉轴以获得 paddingCross ``` ### 步骤 4: 计算单独的 Margins ``` 对于每个流式子元素: 1. expectedPosition = 基于 padding + gap + 前面的元素 2. actualPosition = 子元素的当前位置 3. 如果差异 > 阈值: - 为子元素添加 margin ``` ### 步骤 5: 清理样式 ``` 对于流式子元素: 1. 移除 position: absolute 2. 移除 left, top 3. 如果计算出则添加 margin 对于父元素: 1. 添加 padding 2. 保留 gap（已实现） 3. 保留 display: flex/grid ``` ## 5. 实现注意事项 ### 5.1 边界情况 1. **负 margins**: 当元素轻微重叠时 2. **混合对齐**: 部分元素居中，其他不是 3. **可变 gaps**: 元素间距不一致 4. **百分比值**: 可能需要将 px 转换为 % ### 5.2 阈值 | 参数 | 推荐值 | 来源 | | ------------- | ------ | ------- | | Padding 检测 | >= 0px | 标准 | | Gap 一致性 CV | <= 20% | imgcook | | 对齐容差 | 2px | 通用 | | 重叠 IoU 阈值 | 0.1 | imgcook | ### 5.3 优先级顺序 1. Grid 检测（规则网格的最高优先级） 2. Flex 检测与 padding 推断 3. 回退到绝对定位 ## 6. 参考文献 1. **FigmaToCode**: https://github.com/bernaferrari/FigmaToCode 2. **Facebook Yoga**: https://github.com/facebook/yoga 3. **imgcook 博客**: https://www.alibabacloud.com/blog/imgcook-3-0-series-layout-algorithm-design-based-code-generation_597856 4. **Allen 区间代数**: https://en.wikipedia.org/wiki/Allen's_interval_algebra 5. **布局推断论文**: https://www.sciencedirect.com/science/article/abs/pii/S0950584915001718 6. **teleportHQ**: https://github.com/teleporthq/teleport-code-generators 7. **Yoga Go 移植版**: https://github.com/kjk/flex ## 7. 结论 从行业实现中获得的关键洞察是，将绝对定位转换为相对布局需要： 1. **空间分析**: 使用 Allen 区间代数或类似方法来理解元素关系 2. **Padding 推断**: 从第一个/最后一个子元素的偏移计算父元素 padding 3. **Margin 计算**: 处理不符合主要布局的单个元素偏移 4. **选择性保留**: 对于真正重叠的元素保持绝对定位 算法应该保守——只有在对布局结构有信心时才进行转换，否则保留绝对定位以保证准确性。