Is there a “generate CSS/HTML” feature or plugin in Sketch app

I have found a script that does exactly that (generates CSS and HTML for the layers and offers an option of exporting those in % values) and cuts the work for the web-dev in half for Photoshop. Now I am curious if anybody has come across/up with a plugin or can point me to a native feature like that for Sketch app. The absence of such is making my transition to Sketch reaaally painful. Or being new to Sketch I am just missing something ideologically different about the way Sketch works with CSS and HTML.


This might not be quite the answer you’re looking for, but I find it better than handing mediocre, auto-generated styles to the engineers.

Selective markup

I’m sure you’ve discovered Sketch’s context menu CSS grabber. You can select as many objects as you like and you’ll get the CSS on your clipboard faster than you can paste it.

Copy CSS Attributes context men

There’s no selectors of course, it’s really just CSS notes. Each block is called out by a preceding comment using the layer’s name, like so:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

File annotation

Sketch Measure is a plug-in that generates various levels of annotation according to your specs. There’s a demo video here. The basic idea is to annotate the important numbers and let the dev write their own code.

Sketch Measure plug-in

Beyond annotation

You can also try a tools like these, alone or in combination:

  • Zeplin creates a stand-alone, shareable version of your Sketch design for your dev’s inspection, pulling out specs on demand.
  • Marvel is a prototyping tool that imports Sketch files. Nothing communicates like an interactive prototype!

Experimental HTML generator

I’ve never used this, and it is clearly in the early stages of development but, the Blade plug-in looks promising.

Blade is a Sketch 3 plugin for automatically HTML generating. It will
generate tag <div> for group, tag <p> for text , etc.

enter image description here

Source : Link , Question Author : Rakhilya Lála Ibildayeva , Answer Author : plainclothes

Leave a Comment