When I first moved to Sketch I was looking for a way to migrate all my recent PSD’s to it, but an extensive Google search lead to no results.
Today, two years later – there is still no product that does this.
Yeah, I know! Crazy, right?
Think about how much this sort of product can make.
Heck – Adobe should build that kind of product. They would see massive income from doing so. At least they’ll get something out of all their Sketch immigrants.
Update 2017: There’s a chrome extension called Protoship Teleport that does what I’m about to explain in similar manner, not as good but faster! You should check it out as well.
Well, anyways, I found this quick method to import any webpage into Sketch in vector format, and this fortunately saved me sooooo much time. So, I’m happy to share this with you here. Enjoy!
The 5 steps to convert any webpage to an editable vector Sketch document
- Download Paparazzi – a free screenshot capture app for the mac.
- Launch Paparazzi, then type in any website’s URL into the URL bar and press ‘enter’.
- Wait until the screenshot loads, then launch Sketch, and drag the screenshot into any open Sketch document.
- In Sketch – filter the layer panel for the word “clip”, then select all layers and hit the ‘backspace’ key on your keyboard to delete all those layers. (These are the masks that keep you from selecting elements on your document.
- That’s pretty much it. Now you can cmd+click any layer to choose it, and hit ‘enter’ or double click to edit.
What about animations & interactive web pages?
So, I made a video that will show you this. The video is available for list members only.
If you’re not on our newsletter yet – I invite you to join the UI Hacker nation, and also this is a great way to keep in touch and be updated when we launch new articles and products for the community 🙂
[mc4wp_form id=”25071″]
Known issues
- This is good for web pages only – so if you have iOS apps this guide is of no help to you, I know.
- This process breaks every element into small pieces, and separate layers. This means that if you had a paragraph – each line will be in a seperate text layer. If you had a white box with a grey border and a box-shadow – the box-shadow will be one layer, the top border one layer, right border one layer, left border one layer, bottom border one layer, and white background alone as a layer of its own.
- If you have PNG sprites – those will show as one image – with all sprites, all across the document. That can get messy but luckily sprites are dying and SVG is becoming a standard.
- For some reason some SVG based icons won’t show up.. I don’t know why.
Enjoyed this guide?
Please share this post with all Sketch lovers you know 🙂
You also might want to check out any of the Sketch Manual series here on Hacking UI:
Part1: How & why I moved to Sketch (story, resources and insights)
Part2: Basic & Advanced Sketch Customization (Plugins, shortcuts, and more)
Part3: This current article
Part 4: A Year Using Sketch – An Honest Review
Part 5: How I made a Sketch Plugin for my team without knowing code
Enjoy!
Sagi
