Figma is an outstanding instrument that’s fast turning into a favorite amongst UX/UI and internet designers. It’s possible you’ll create responsive internet designs quickly and easily using this free browser-based instrument.
Whereas most people create their designs from scratch in Figma, you is likely to be impressed by precise internet sites and easily create a Figma design straight from an present HTML net web page. That is the way in which to do it.
Why You Should Create Figma Designs From HTML
There are numerous causes you would possibly want to duplicate an present internet design as a Figma design. Doing this by means of the Figma plugin saves time, allowing you to cope with fine-tuning your design.
Working in the direction of internet design by recreating present internet pages is an effective method to examine from the masters. You can also use the HTML to Figma design instrument when you have got beforehand designed and printed an web net web page that you just simply’ve misplaced entry to. Instead of redesigning it from scratch, it could actually prevent time by altering it once more to Figma to work on it as soon as extra.
Now that you just acknowledge why this instrument is likely to be helpful, it’s time to review the way in which it really works.
The best method to Convert Any Web page Proper right into a Figma Design
To start out any Figma-based design work, it is important open Figma and log in or enroll. It’s best to make the most of the browser mannequin, Figma, or receive the desktop app; they every work the equivalent method for this mission.
Open a New design file to begin your HTML to Figma design mission.
Step 1: Receive the html.to.design Plugin
To have the flexibility to straight convert a dwell site proper right into a Figma design, you’re going to want a plugin. There are quite a few plugins on Figma to help alongside along with your designs, along with plugins to create mockups for telephones and devices. It’s possible you’ll add your remodeled site design to a mockup later if you want to.
To acquire the plugin, select the Figma menu (Figma emblem) > Plugins > Uncover further plugins. Alternatively, you might select Belongings > Plugins. From each chance, variety inside the search bar html.to.design.
Uncover the selection provided by divRIOTS and select Run. This opens the plugin as a dialog subject in your Figma canvas.
Step 2: Paste the Web page URL
The html.to.design plugin is free, however it does present knowledgeable mannequin. It’s possible you’ll full your design course of solely with the free mannequin.
Uncover the site you have to make a Figma design of. It’s best to make use of a public site—not an web net web page that will solely be accessed by logging in. We’re going to utilize our homepage, MakeUseOf.com.
Copy the entire URL and paste it into the import subject on Figma, altering the Apple site placeholder.
Step 3: Load Your Design
After pasting the site’s URL, open Settings beneath the import subject to pick the size of the design. It’s possible you’ll import the design for various devices, nonetheless you’ll have larger success choosing a desktop system within the occasion you used a desktop URL and better success using a mobile URL for mobile devices.
There are moreover personalized selections for devices or sizes that aren’t obtainable as default selections. We’re choosing MacBook Skilled 14” with a Light theme.
If you’ve specified your system and take a look at settings, select Import to hold your HTML design to life in Figma. Wait until the load bar is full for the Figma design to populate.
Counting on which site you’ve used, you would possibly uncover a pop-up subject explaining some typefaces needed to get changed. This may be as a consequence of copyright for licensed typefaces. Figma will change them with typefaces you have entry to.
Exit out of any pop-ups, then exit from the plugin dialog to see your new design in its full sort.
Step 4: Edit Your Figma Design
From proper right here, you might begin to edit your Figma webpage in any method you have to. As talked about, this HTML to Figma function means you could study the way in which present webpages had been designed to encourage you to create your particular person from scratch. You would possibly use the underside design from the site and create a presentation using transitions in Figma, or simply study the way in which webpages are prepare by completely different designers.
On the left menu, you’ll uncover the layers. Since this has been remodeled straight from HTML, the layers may be further detailed—and even sophisticated—than what you’re used to when designing your self. Select a bit inside the design to go looking out the highlighted layers on the left menu.
It’s possible you’ll change photos, retype titles and physique textual content material, or switch points all through the construction by double-clicking the design aspect. The html.to.figma plugin would not replicate animation or transition settings when clicking hyperlinks or altering pages. It’s possible you’ll add these by your self.
The best method to Convert a Private Webpage
The overwhelming majority of the strategy of creating a private site—one which requires an account to entry—versus a public webpage is equivalent. However, in its place of pasting the URL, you might in its place use a Chrome extension that generates a file.
To start out, open Figma and the html.to.figma plugin within the equivalent method as sooner than.
Step 1: Receive and Run the Chrome Extension
It’s possible you’ll solely use this extension with Google Chrome, so open Chrome to begin. From the Figma plugin dialog subject, select Chrome extension—or open the extension proper right here in your Chrome browser.
Select Add to Chrome > Add Extension in order so as to add the extension to your browser.
With the extension added, navigate to the private site or net web page you need to replicate the design of—we’re using an Instagram net web page—and select the extension. Collapsed extensions are found beneath the puzzle piece icon in your browser.
It’ll ask in case you want to seize all the net web page or just what’s in view. Make your selection after which the seize will appear in your downloads as an .h2d file.
Step 2: Drag the Generated File Into the Figma Plugin
Go to your Figma app or the Figma site in your browser and drag your downloaded .h2d file into the sphere. The file will load and generate within the equivalent method as most people site chance.
Like with most people webpage mannequin, you might double-click on components of the design to edit them or click on on by the left-hand menu to see the place they appear on the construction.
It’s possible you’ll want so as to add new design elements to the webpage design, like a Figma frosted glass influence, or you possibly can even replicate parts of the web net web page design as a grasp template for Figma shows. In 2022, Adobe acquired Figma, so we’ll anticipate further pleasant strategies to utilize Figma ultimately.
Use Any Web page for Inspiration in Your Figma Designs
Whereas Figma is primarily for designing internet sites or UX/UI pages from scratch, it’s a terrific different to populate present internet pages to see how they’d been constructed. You can also make your internet design a copy of an present site within the occasion you’re undecided the place to begin out from an empty slate.
One different good objective why it is best to make use of the html.to.figma plugin is within the occasion you already designed a site you’ve misplaced entry to. It’s possible you’ll populate the net web page in Figma and start as soon as extra with out having to really start as soon as extra.
