将Figma布局转换为Ffltter、SwiftUI和Tailwind。OSS和99%的测试

大多数代码插件的设计都很糟糕，有些甚至是付费的。该项目旨在通过在Tailwind、Ffltter和SwiftUI中生成响应布局来提高标准。我们的计划是最终增加对Jetpack Compose的支持，可能还会增加对标准HTML或其他框架(如Reaction Native、Bootstrap或Fluent)的支持。欢迎您提供反馈、想法和合作伙伴关系！

这个插件采用了一种非传统的方法来提高代码质量：它甚至在开始转换到代码之前就优化了布局。标准的图形节点(代表每一层)是一件令人愉快的工作，但是如果不修改用户项目，它就不能修改一个层。出于这个原因，我决定将其虚拟化，重新创建官方实现并将其命名为AltNodes。在将节点转换为AltNode的过程中，插件执行以下操作：

这个过程也可以看作是一个中间表示，有一天可能允许这个插件生活在Figma之外。

查找未知对象(具有多个子项且没有垂直或水平对齐的组或框架)时，尾随模式对最佳情况使用插图，对最差情况使用从标准CSS向左、从上到上的插图。颤振模式使用Stack和Positioned.Fill。这两个通常都不推荐，而且很容易就会击败响应能力。在许多情况下，只需将某些元素包装在组或框架中即可解决以下问题：

提示：您也可以选择单个项目，而不是选择整个页面。这对于调试和组件化都很有用。例如：您可以使用插件生成单个元素的代码，然后使用for循环复制它。

宽度：顺风的最大宽度为256px。如果项目通过此设置，宽度将设置为w-full(除非它已经是相对的，如w-1/2、w-1/3等)。这通常是一个功能，但要小心：如果项目中的大多数图层大于256px，插件的效果可能不是最优的。

高度：插件尽可能避免设置高度，因为宽度和高度在CSS中的工作方式不同。H-Full的意思是达到父母的完全高度，但父母必须要有，而W-Full并不要求这样。在实验期间，在大多数情况下，避免固定的高度会带来更好的响应性，并避免不确定的情况。

对齐：当前项目按照其平均位置在行/列内对齐。TODO：找到改进这一点的方法。

堆栈：在一些更简单的情况下，可以将堆栈替换为Container和BoxDecation。发现这些案例并对其进行优化。

材质样式：文字可以与现有材质样式匹配(如当文字大小为20时输出Headline6)。

识别FlatButton：该插件可以识别特定的按钮并输出它们，而不是总是使用Container或Material。

项目配置为使用webpack或ROLLUP进行建设。作者找不到在webpack中正确配置Svelte的方法，所以添加了Rollup。但Rollup的稳定性比webpack差很多，在编辑打字文件时，它会在手表模式下定期崩溃。所以，如果你打算只处理打字稿，我再次建议你坚持使用webpack。如果您要在UI中进行更改，您现在需要使用Rollup。

此自述文件和图标的Figma文件也已打开，欢迎更改！请在这里检查。

我做出决定时考虑的是它将如何让大多数人受益，但我可以(而且很可能会这样做！)。错了很多次。发现一个窃听器？有改进的主意吗？请随时添加问题或给我发电子邮件。拉取请求也非常受欢迎。