*Update – We just launched The Side Project Accelerator, an 8-week online program to share everything we learned while building and growing Hacking UI. We’re looking for people who want to improve their personal branding, become thought leaders and launch side projects. Applications are open until July 25th. Check it out →
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.
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 🙂
- 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
More UX & Frontend goodness
- Master Class #1: This is Our New Robot, He’s Here to Replace You ( w/ Matty Mariansky) - February 16, 2017
- The New Year’s Portfolio Challenge – Winners and Showcase - January 26, 2017
- Submit your portfolio for The New year’s Portfolio challenge - January 2, 2017
- Join The New year’s Portfolio challenge - December 8, 2016
- Announcing the results of the 2016 Design Tools Survey - December 2, 2016
- Take part in the 2016 Design Tools Survey - November 17, 2016
- How to start public speaking – with Rizwan Javaid (SPA alum) - November 1, 2016
- The man who sold his last name and is now selling his future – Jason Zook - September 28, 2016
- Start building your personal Brand (from my talk at ITWeekend in Kiev) - September 18, 2016
- Bryn Jackson (Spec.fm) on how he built a gigantic podcast network with over 5 million downloads - September 8, 2016