7

Can I convert a website into sketchapp file?

over 5 years ago from , Maker & founder of Visual Inspector @CanvasFlip Inc

Hey guys, I have to redesign one of my earlier portfolio website which is like 4 years old. I don't have editable PSD or Sketch version and I ( preferably) don't want to start from scratch.. :(

Is there a way I can convert website into Sketch app? It's hardly 10-12 pages. Any pointer will be highly appreciated.

TIA, VM

23 comments

  • Matt Smadner, over 5 years ago

    Download paparazzi browser. Navigate to a page. Drag and drop it from the browser into your artboard.

    edit:

    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.

    9 points
  • Robert PaigeRobert Paige, over 5 years ago

    https://protoship.io/tools/teleport.html

    1 point
  • Weston Thayer, over 5 years ago

    This probably won't be useful for you after reading your description, but going off of

    Can I convert a website into a sketchapp file?

    That's an interesting problem! react-sketchapp is probably the closest solution. In a nutshell, it reads React and renders it into Sketch as real layers (not images). You'd have to create your website in React Native though.

    1 point
    • Vipul. MishraVipul. Mishra, over 5 years ago

      Well yes, it's not what I'm looking for right now but surely helpful for my future projects. Thanks for sharing.

      0 points
    • Vipul. MishraVipul. Mishra, over 5 years ago

      Well this also opens possibility of converting HTML in Sketch Layers. Would be interesting to build sometime like that? Are you in?

      0 points
      • Weston Thayer, over 5 years ago

        Heh a pure HTML renderer would be on a similar level of difficulty to writing your own renderer for a web browser. You'd have to handle all the quirks of the CSS and HTML specs. I don't have that kinda free time!

        0 points
  • Vipul. MishraVipul. Mishra, over 5 years ago

    Guys thanks a lot for your awesome feedback. This has been very helpful. Here's my experience so far:

    • Paparrazi: Easy to browse the web pages and grab them inside Sketch artboard but it sort or squeeze the whole page in a weird way. Did someone experience the same or I'm doing something wrong?

    • Convert Web page to PSD to Sketch: Tried too many times. Had some success from web page to PSD but still struggling with Sketch part. Wish it could work.

    However, I have recreated some of the web pages and filling element from other page - testimonials, demo pages etc.. Is there any way I can grab part of HTML stuff from website into Sketch as editable piece.

    Love you guys for your feedback. Thanks.

    0 points
  • Joel Cook, over 5 years ago

    So I recently ran into this same situation and this is what I ended up doing.

    I purchased this mac app that converts web pages to a psd: https://www.pagelayers.com/

    Then I uploaded that psd to: https://avocode.com/convert-psd-to-sketch

    ^ the avocode program is still in beta so there were a couple times that I never received the sketch file.

    But hope this helps!

    0 points
    • Vipul. MishraVipul. Mishra, over 5 years ago

      Woah.. that's like way too far fetched for an one-off gig.. What's the accuracy of something like this?

      I heard PSD to Sketch has some glitches in itself. and never tried page layers stuff, so bit confused about it.

      Thanks for sharing @Joel. Much woww...

      0 points