Import web pages into Sketch

Sometimes you need to tweak or slightly redesign an existing web page without original assets. Some common ways to do this would be to recreate a page from scratch, tweak it in a web inspector, or in the worst case make a screenshot and mess with bitmap (if you enjoy pain). Another hacky way to do that is to actually convert the web page to a vector graphic. Here is how I do it:

1. Convert page to SVG

Option one: Use http://derailer.org/paparazzi/ like so https://www.youtube.com/watch?v=9cgHQyXm4_Y to import a page into sketch. If it doesn’t work well try option two.

Option two: Go to http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx and insert the desired URL of a web page and the screen size.

Note: Sometimes you want to access a page behind a login, or an offline document. You can use this chrome extension http://cl.ly/VRdx to save a webpage as a single document and feed its internal code to hiqpdf converter.

2. Import and clean up SVG.

You will notice that the imported folder would be full of empty nested folders and each element would be placed in a separate folder. Select all nested folders and check the ‘Click-through when selecting’ option.

Next, select all layers by dragging the cursor on a canvas and press cmd+g to group them together. This will result in a single folder with all the shapes and images you need to work with.

This method is not perfect, since pages are often converted with glitches and mistakes, but it provides a good starting point for recreating a document. You can download a sample sketch file of a dribbble page that I made using the above steps. For photoshop users there is also a tool called pagelayers that will do the job. If you know any better ways of converting web pages to vector graphics, please share.