: 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

@Phylliss782

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.



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.



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.

Vote Up Vote Down

@Jessie844

See the following links blog.mengto.com/the-best-hidden-features-in-sketch/
Follow Meng To's blog to keep up to date with interesting Sketch tutorials, tips & even tricks. blog.mengto.com/ designcode.io/

Vote Up Vote Down