2

I'm trying to improve my design skills and decided I would try to do a redesign of reddit or bbc website. I use Figma and started from scratch. Then it dawned on me perhaps there is a way to do this by importing the website itself/mirror copy of it into Figma. I imagine there must be a tool where I can input the URL of the website and it would give me some file I can then import into Figma and then start editing the site from that? I know from web development there are services to copy an entire sites source files, and surely there must be something similar on the design side of things? So designers can quickly get the website into Figma to start playing/tweaking all the parts of it from that. Instead of starting from a blank canvas each time, and having to build them all up one by one?

Improve this question
1

2 Answers 2

Reset to default
4

Even though I don't see how importing a site into Figma would be able to help you with the redesign as you said you are starting from scratch, there is a solution!

There is a plugin called HTML to Figma. Just install it and run, then enter website URL and it should render it directly into Figma. It may be slightly buggy but I guess it's as good as conversion would get because it's technically difficult to render HTML.

Plugin creators also suggest to use their Chrome extension and it may be able to help the plugin render webpages a bit better. Also it would help you to import pages that are available only to you as an authorized user, such as settings or your private profile info.

Improve this answer
0

I don't use Figma, however there are online services (such as cloudconvert) which can convert a web page from a URL to a PDF which can contain both vector and raster images. I think there are also some browser plugins which allow you to save a web page as a PDF. And if Figma allows import of PDFs, that route might work for you.

Here's an example (sorry, but this is using Inkscape, not Figma). I used an online converter, then imported one PDF page into Inkscape. All of the elements which are vector are preserved and editable, and obviously the photos are raster.

enter image description here

If Figma can't import a PDF, then perhaps you could use Inkscape to save the document as an SVG. Presumably, Figma can import SVGs.

Improve this answer
4
  • thanks, what convertor did you use?
    – David
    Sep 30, 2019 at 12:54
  • @David I mentioned the name of the site in my answer in the first sentence. I don't want to recommend any conversion sites however, since many are bogus or simply don't work. It might be better to go down the route of using a browser plugin.
    – Billy Kerr
    Sep 30, 2019 at 13:13
  • awesome I got it working :) am i right that the convertor should also grab the fonts etc? as when I import into figma everything is there except fonts seem I have to manually add each time
    – David
    Sep 30, 2019 at 13:16
  • @David I suspect the fonts would need to be installed on your computer first if you plan on editing the text, but that's a separate issue and is because of licensing restrictions. Fonts can be embedded in a PDF for display purposes, but that doesn't mean you get the rights/or ability to use them. You may have to substitute them for fonts that are installed on your computer, or go find the fonts and install them.
    – Billy Kerr
    Sep 30, 2019 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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