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 回答