FigmaToCode：设计稿转代码 - 布局方案剖析！

Figma编码 大多数设计到代码的插件都是不好的，有些甚至是付费的。 该项目旨在通过在 ， 和生成响应式布局来提高。 该计划最终将增加对以及可能的标准HTML或其他框架（如 ， 或。 反馈，想法和合作伙伴表示赞赏！ 这个怎么运作 该插件采用了一种非常规的方法来提高代码质量：它甚至在转换为代码之前就优化了布局。 标准的Figma（代表每个图层）很有趣，但是如果不修改用户项目就无法修改图层。 因此，我决定对其进行虚拟化，重新制作正式的实现并命名为AltNodes 。 在将Node转换为AltNode的过程中，插件将执行以下操作： 该过程也可以看作是并且可能有一天可以允许该插件在Figma之外居住。 硬箱 当找到未知对象（一个或多个带有多个子对象且没有垂直或水平对齐方式的Group或Frame ）时，Tailwind模式将使用作为最佳情况，而使用标准CSS的left和top作为最坏情况。 Flutter模式使用Stack和Positioned.fill 。 通常不建议两者都使用，它们很容易破坏响应能力。 在许多情况下，只需将某些元素包装在“ Group或“ Frame即可解决： 提示：