1

Front-End dev here, forgive me if this has already been asked before. When coding HTML/CSS from a sketch design is there a way to identify what kind of html element corresponds to the sketch component?

When I export to HTML using Anima or similar, it makes almost everything a <div> element. Some sketch components are self evident, such as links <a>, <images>, <button> etc. When it comes to text for instance, is there any way to tell if it's a <div>, <span>, <p> element, etc etc? Do I just need to use my judgement in this case?

Any guidance on this would be welcome. Thanks!

verynear
  • 11
  • 5
  • You should judge it by urself. How should Sketch know if you need a `
    ` or just a `
    `?
     – jdickel Mar 27 '20 at 19:57
  • good point @jdickel - i guess that makes sense why these sketch to HTML conversion tools make everything a div. It's just annoying because I can export all the CSS from the sketch design, but that can change depending on which elements are used and/or any global styles – verynear Mar 27 '20 at 20:04
  • I just recreate everything from scratch instead of exporting the HTML from Sketch (rhyme not intended). So i can create/implement the grid/framework of my choice. – jdickel Mar 27 '20 at 20:07
  • @jdickel - yeah I think thats what ill end up doing. Oh well, so much for shortcuts – verynear Mar 27 '20 at 20:10

1 Answers1

0

A good tool to help you import the sketch design file is Desech Studio. This will create a clean html structure, but most likely if you do it manually, it will be slightly better. Elements are also positioned with css grid, not position absolute.

This is a good place to start, otherwise you have to do it manually by looking at how the content can be split into grids, and create the necessary grids. With experience you get the hang of it.

dreamLo
  • 1,612
  • 12
  • 17