13

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.

Improve this question
0

2 Answers 2

Reset to default
11

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

Improve this answer
3
  • 1
    I improved the Blade Readme with an architecture overview/guide for others to have a better chance working on it to further improve it... github.com/kristianmandrup/blade
    – user75148
    Aug 28, 2016 at 21:16
  • 2
    We've released Protoship UIPad that does exactly this. It is a code generator for Sketch that converts Sketch designs into HTML, CSS, SASS, and React components. It uses BEM for CSS and uses margins, paddings, floats, and flexbox instead of absolute positioning. protoship.io/tools/uipad.html.
    – Jasim
    Dec 19, 2016 at 18:36
  • "We've released" is misleading - Protoship has been a Waitlist for a year, and still is.
    – Chris Moschini
    Oct 19, 2017 at 12:53
1

See the following links http://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. http://blog.mengto.com/ https://designcode.io/

Improve this answer
1
  • Hi Kiodour, could you please explain a bit more what we'll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing!
    – AndrewH
    May 5, 2015 at 16:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.