Sketch to Html / CSS

Question

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

Answer 1

• Outsourcing If you want to outsource, there are a lot of outsourcing development company for that, such as ReliablePSD or HTMLPanda

• Sketch Plugins There is few sketch plug-in to do so, but the generated code is unstructured with absolute positions

• SaaS Tools There are several SaaS tools or editors, but we have tried and found it's not easy to use. There're also few tools for App (react native & flutter)

  If the tools help you to automated generate the code, then there might be possible messy or wrong structure because it's hard to decide the right responsive behavior only by the one screen of the visual design. We have challenged this problem and after a few iterations of the development and analysis. We find the root cause of the messy code is because of the wrong structure. The wrong structure is because most of the tools try to guess or use the existing Sketch group structure which is intended for visual, not for responsive layout. So our solution decides to leave those key problems for users but provide a very quick and intuitive way to code web by the visual editor. In our early experiment, it indeed much faster but you still need to do basic editing in order to export the structure and quality code. (React or HTML/CSS).

Answer 2

There is Launchpad a tool to generate website from sketch file. (not completely free)

That said converting from Sketch (or other design tools) is a manual thing. If you right-click on layer you can use Copy CSS Attributes which will help you get the CSS needed to reproduce in browser (it's not always perfect)

Answer 3

You can use Desech Studio to import you sketch file to get the converted html/css. But the conversion will not be pixel perfect because it will try to nest elements and position them with css grids. So you still have to adjust the margins and sizes afterwards.

There are other tools, but I haven't found anything that positions elements with flex or grids. They use position absolute instead, which is pretty hard to work with when doing the responsiveness.