Mirror copy of a website iin figma

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?

Answer

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.

Attribution
Source : Link , Question Author : David , Answer Author : Gleb Sabirzyanov

Leave a Comment