The 5 step guide to convert any webpage into Sketch

Share on facebook
Share on twitter
Share on linkedin
Share on facebook
Share on twitter
Share on linkedin

Share

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.

Impossible to open PSDs in Sketch

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

  1. Download Paparazzi – a free screenshot capture app for the mac.
  2. Launch Paparazzi, then type in any website’s URL into the URL bar and press ‘enter’.
  3. Wait until the screenshot loads, then launch Sketch, and drag the screenshot into any open Sketch document.
  4. 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.
  5. 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

 

 

 

About the author:

hackingu_admin

hackingu_admin

Product Designer at ContrastUX

Find hackingu_admin on:

About the author:

hackingu_admin

hackingu_admin

Product Designer at ContrastUX

Find hackingu_admin on:

Articles that may interest you.

Results & Analysis of The 2017 Tech Education Survey

The Falafel Method for UI Design

Git for designers is here – Meet Abstract

This blog is brought you by Contrast UX

© 2021 All rights Reserved. Privacy Policy.

We participate in the Amazon Services, LLC Associates program, and affiliate advertising program designed
to provide a means for us to earn fees by linking to Amazon.com and affiliate sites.

© 2021 All rights Reserved. Privacy Policy.

We participate in the Amazon Services, LLC Associates Program, an affiliate advertising program designed

to provide a means for us to earn fees by linking to Amazon.com and affiliate sites.

Sign Up

for The HackingUI Newsletter