0

I'm fairly new to Sketch, and beside it being a wonderful tool to design websites from the ground-up in my current job I am often required to modify or add elements to already exisiting websites.

As the client usually wants to see what he will get before it gets published, I've thought that, well, sketching new elements in Sketch might be a good idea.

Now, to my question - as you might guess, recreating the page from the ground up in Sketch is fairly counterproductive, when I need to design only a small portion of the page or a subpage for example. Is there any simple way to import existing page into sketch?

I guess it could be done by taking screenshots and pasting them over artboard, but maybe there is a better method?

Improve this question
1
  • The only thing that comes to mind is exporting site to pdf and then importing that to sketch... not sure how feasible it is though. With Photoshop you could use PageLayers.
    – Joonas
    Jan 11, 2017 at 8:37

1 Answer 1

Reset to default
2

The logic is that you want to convert the webpage to vector. Saving as PDF is not a good solution in most cases. Probably there is still not a perfect converter out there, but you can try with this simple HTML to SVG converter. Only thing you have to do is to paste the URL, specify the width of the browser (good for responsive websites) and press "Convert to SVG". SVG graphics present on the website remain as vectors. You can than import the exported SVG to Sketch and clean it up. Depends lot of the website you're trying to import. Cookies, animations, js popups etc. can be an issue. Pretty good for a free demo solution.

SketchApp website to SVG imported in Sketch 2

Improve this answer
1
  • Huh, that looks interesting, I'll give it a try, thanks!
    – Hassan
    Jan 11, 2017 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.