Sketch to Html / CSS

Question

I'm looking for a way to convert from SKETCH to HTML and CSS, I'm hoping I could then fix the whole code to better suit my needs and add some JS to it.

Answer 1

I believe we have better solution in 2022 for this question.

Before, conversion tools use "absolute position" and wrong group structure to produce messy code.

You can use pxCode plugin (figma to html) which can produce clean and responsive code.

How pxCode works?

1. require users to SmartGroup to ensure the HTML structure is 100% correctness which is crucial for the responsive behaviors.
2. use CSS flex and flow content rather than absolute position
3. pxCode allows users to adjust responsive settings based on the structure in flexible ways which can control CSS quality by using MediaQuery

Furthermore, pxCode support React and TailwindCss also if you would like to use.

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-clickon 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.

Answer 4

• 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).