Importing websites to Sketch
There is an idea that I keep coming back to each time I start a new project, which is — how do I import a website into Sketch?
Sometimes there are just certain parts of an app, or webpage, that you want to redesign. I have done a few google searches to see what already exists; sketch plugins etc.
This article from 2016 was one of the first to come up ‘The 5 step guide to convert any webpage into Sketch’ By Sagi Shreiber which talks about five steps to convert the webpage into a SVG and import into sketch however it requires you to install various peices of software to make this process work.
The Choices
There are a number of approaches to this problem how do I get an existing site into sketch.
- Redraw the page using a imported screenshot and trace over
- Sketch plugins that convert the site to SVG it starts getting fairly complex however
- The pdf to svg method (the quickest/easiest) — which ill describe below
The PDF to SVG Method
The easiest way I have found so far, is to open the page in Safari and to File/Export as PDF and then open the PDF in Sketch — it does an ok job of rendering, however then there is a bit of tidy up job to do.
Here is an example:
What works well:
- Spacing of objects
- Sizes of objects(mostly)
- Images
- Text (words)
- Shapes
What Doesn't:
- Fonts
- Grouping of objects
- Naming of objects
- Some objects are not visible but are there — see icons for Posts alerts & Trips at the top right of the screenshot
- Shadows don't render well
Summary
Overall I think its a fairly quick way, taking less than a minute, to import a webpage into sketch and makes use of what you already have installed ie Safari with no additional plugins or software etc required.
For the fonts issue, the quickest way I have found to resolve this is to create a style from each of the unique fonts used H1,H2, Body etc. Where there are duplicates it would just be a case of applying styles you have created to those elements.
And then using a tool like fonts ninja or taking a look at the HTML code (View source) you can identify the fonts to update the styles to. This will update all instances on the sketch.
It's not always necessary to create a high fidelity version in sketch, but if you need to this may help the process.
Let me know your experiences of doing this and what methods work for you?
