Locofy.ai 导出HTML图片偏移的根本原因是默认将Figma绝对定位转为flex布局，导致top/left丢失；解决需开启Project Settings中的Use absolute positioning开关，并对图层命名添加@absolute后缀。
Locofy.ai 导出的 HTML 为什么图片位置总偏移？
根本原因不是 figma 设计不准，而是 locofy 默认用 flex + justify-content 布局，而 figma 的绝对定位（absolute position）在导出时被强行转成相对布局逻辑，导致 top/left 值丢失或被重算。
- Figma 中拖拽图层产生的“精确像素偏移”在 Locofy 里默认不保留为
position: absolute，而是转成margin或transform，后者受父容器尺寸和缩放影响极大 - 如果图层嵌套层级深（比如在 Frame → Group → Image），Locofy 更倾向用嵌套
div+padding模拟，而非还原原始坐标 - 导出前没启用
Use absolute positioning for precise alignment开关（藏在 Project Settings → Code Generation 里），这是最常被跳过的一步
怎么让 Locofy 输出带 top/left 的精准图片定位？
必须手动干预生成逻辑，不能依赖默认导出。关键动作只有两个：改设置 + 改图层命名规则。
- 进
Project Settings→Code Generation→ 打开Use absolute positioning for precise alignment - Figma 中给要精准对齐的图片图层重命名，加上后缀
@absolute（例如logo@absolute），Locofy 会识别该标记并强制为其生成position: absolute+top/left样式 - 确保该图层的父容器是直接子级 Frame（不要套多层 Group），否则
@absolute可能失效 - 导出后检查生成的 HTML 中对应
<img>是否包裹在position: relative的父<div> 内——这是绝对定位生效的前提 <h3> <code>background-image和<img>在 Locofy 里行为完全不同Locofy 对两种图片处理路径完全分离：前者走 CSS 背景图逻辑（支持
background-position精调），后者走 HTML 元素流式布局（依赖top/left或margin）。选错就对不齐。- 如果设计稿中图片是作为 Frame 的背景填充（Figma 的
Fill类型），Locofy 默认输出为background-image，此时对齐靠background-position: 12px 8px控制，不是top/left - 如果设计稿中是独立
Image图层（拖进来 PNG/JPG），Locofy 默认当<img>处理，才适用@absolute规则 - 想统一用
top/left控制？那就别用 Frame Fill，全部改用独立Image图层 +@absolute命名
导出后仍偏移 1–2px 怎么快速排查？
不是 Locofy bug，大概率是浏览器渲染差异或单位换算残留。重点查三处：
- 看生成的 CSS 里有没有
transform: translate(-50%, -50%)—— 这是 Locofy 对“居中对齐”的默认实现，会引入 subpixel 渲染误差；改成left: 50%; top: 50%; margin-left: -XXpx; margin-top: -YYpx更稳 - Figma 文件是否启用了
Pixel Perfect模式（View → Pixel Perfect）？没开的话，画布缩放会导致坐标读取偏差 - Locofy 导出的 HTML 默认加了
box-sizing: border-box，但如果你手写样式覆盖了它，又没重置padding/border，就会吃掉几个像素
真正难的不是导出，是意识到 Locofy 不是“所见即所得”工具，而是“所见→可配置映射”的代码生成器。对齐精度取决于你告诉它“你想怎么映射”，而不是它自动猜。
- 如果设计稿中图片是作为 Frame 的背景填充（Figma 的
