Transform Web Pages into Figma Designs Instantly with HTML to Design Plugin

guys what's up in this video I want to talk about a quick plugin that you can use to actually extract your own websites directly from HTML to figma and obviously this can be done for other websites too that you actually need in figma for inspiration maybe checking out their font sizes uh checking out their colors just playing around with elements so on and so forth and I actually did this with my own website and obviously showing this with my own website wouldn't be impressive so I'm just going to show it with the Apple iPhone website and let's actually just have a look at it now one thing that a lot of people don't really know is how to actually use this plugin so I'm just going to go ahead and I'm going to show you how to do so so imagine you're going to basically open the plugin and I am going to show you where I'm going to share a link for this plugin as well so what a lot of people do is they just go ahead and enter the URL and they caner you can enter multiple URLs as well and they can click on import and it's going to import the website you can also decide the view ports that you actually want and the themes if they have like multiple themes you can decide whether the page should be Auto layout or or should it create like Styles and use those Styles and stuff along those lines I would recommend again you can use Auto layout you can use the default view Port that you actually want and the light mode or dark mode depending on what you want and you can just start get started now this doesn't actually deliver the best results and a lot of people may just again frown on that and just leave this plugin alone but that's not really recommended because there's a much better way to use this plugin as well and let's just see what it actually generates so this is what this plug-in generated and I think it generated something quite incredible I mean it works pretty good I think for the most part it looks good some images are messed up here but that's primarily because I think I used auto layout so I can just basically go to the wrapping Auto layout and say that these things are going to be side by side and it already fixes it so you may have to fix certain things here and there but that's pretty much it similarly I can go to another website like let's go to the design Joy website that I was talking about earlier I'm just going to show you how to actually use that in another way so this is is the design Joy website now what a lot of people are doing unfortunately and someone and Brett actually from design Joy posted it someone's actually cloning his website and some other websites and they're saying hey all of these websites are available in figma with assets and stuff along those lines follow me and I'm give I'm going to give you these websites for free and that's basically illegal you can't really just go ahead and sell someone's website for followers or for free or something along those lines so definitely don't do that this is more for your own personal work uh for Inspirations maybe and stuff along those lines so let's go ahead and actually try the same thing with design Joy so I'm going to go ahead I'm going to open the plug-in again I'm going to say that I want to copy this particular website and I'm going to do the same thing and wait for a while and see how it actually works so this is what it actually looks like it it also mentioned that there were some fonts that were unavailable so let's actually just have a look at it now as you can see most of the sections here are empty and the reason for that is like uh Brett or whoever actually designed this website we it has scrolling animations now most websites are going to have scrolling animations so the content actually doesn't really appear until you scroll through the whole page well that makes it really hard for this plugin to work which is why I wanted to mention that you can just basically scroll down and have everything generated then you can download the Chrome extension for this and then you can say I want to export this page so you can say I want to export the full page it's going to go ahead and Export the full page now that it's rendered for you in the browser this is going to be a much better way to actually go ahead and import any of these websites directly into figma because you are going to basically have most of the things that are loaded out so let's just wait for it to actually generate the file the file is generated and we're going to try the same thing out we're going to delete this particular example we're going to go here and we're going to use the generated um h2d file and basically paste it here okay so this is what it looks like it also mentioned that again as I mentioned this font is unavailable so it has used inter instead now obviously since the font is unavailable some of the elements may not necessarily be rendered or the font may not necessarily be there so if you actually want to download the font you can download the font and then try it out but as you can see most of the page is actually generated you just need to fix this font and I think it's going to be good because I think this particular font that's actually being used that's not rendered is actually grifter now as you can see this is grifter and this top one is also grifter which is particularly why this font really looks weird so that's pretty much it do subscribe to hit the Bell icon for more valuable resources related to figma and I'll see you later take care bye

Channel: AM Design

Views: 2,234

Keywords: html to figma design, figma tips and tricks, figma tutorial for beginners, figma tips u0026 tricks - ui designers superpower, figma plugins, figma tutorial, figma web design, figma plugin tutorial, figma to html, website to figma, html to figma, figma tips, ui ux design, figma course, ui design, ux design, afshint2y, figma, @afshin, ui tutorial

Id: 2waVjHi9xtk

Length: 4min 36sec (276 seconds)

Published: Mon Jan 22 2024