2

我正在寻找一种将 SKETCH 转换为 HTML 和 CSS 的方法，我希望我可以修复整个代码以更好地满足我的需求并添加一些 JS。

4

3 回答 3

1

  • 外包 如果你想外包，有很多外包开发公司，比如 ReliablePSD 或 HTMLPanda

  • Sketch Plugins 很少有Sketch插件可以这样做，但是生成的代码是非结构化的，具有绝对位置

  • SaaS 工具 有几种 SaaS 工具或编辑器，但我们尝试过并发现它并不容易使用。App的工具也很少（反应原生和颤振）

    如果工具帮助您自动生成代码，那么可能存在混乱或错误的结构，因为仅通过视觉设计的一个屏幕很难确定正确的响应行为。我们已经挑战了这个问题，并经过了几次迭代的开发和分析。我们发现乱码的根本原因是结构错误。错误的结构是因为大多数工具试图猜测或使用现有的 Sketch 组结构，该结构旨在用于视觉，而不是用于响应式布局。因此，我们的解决方案决定将这些关键问题留给用户，但提供了一种非常快速和直观的方式来通过可视化编辑器对 Web 进行编码。在我们早期的实验中，它确实快得多，但您仍然需要进行基本的编辑才能导出结构和质量代码。（反应或 HTML/CSS）。

于 2020-08-24T17:40:16.200 回答
0

Launchpad是一个从草图文件生成网站的工具。（并非完全免费）

也就是说，从 Sketch（或其他设计工具）转换是手动的事情。如果您right-click在图层上，您可以使用Copy CSS Attributes这将帮助您获得在浏览器中重现所需的 CSS（它并不总是完美的）

于 2017-05-21T09:58:11.660 回答
0

您可以使用 Desech Studio 导入您的草图文件以获取转换后的 html/css。但是转换不会是像素完美的，因为它会尝试嵌套元素并使用 css 网格定位它们。所以你仍然需要在之后调整边距和大小。

还有其他工具，但我还没有找到任何可以使用 flex 或网格定位元素的工具。他们使用绝对位置代替，这在进行响应时很难使用。

于 2021-07-15T09:33:28.337 回答