Hi everyone. In this video we're gonna look at a really cool plugin. Are we looking at the Apple website? Are we looking at a Figma file? Look, outline view. It is a Figma file.
All the text is editable. What is it good for? It allows us to throw in any URL and it will try its best to convert it into a Figma file. Great for those projects where you weren't involved in the initial design. Maybe it wasn't even design of Figma, maybe it was Photoshop or Illustrator or Microsoft Paint something else and you have to go and start recreating parts. I'll show you in this video, we go and grab that button there and we make it a cool auto out.
Convert it into components and start using it in our process. It's also really handy for going and borrowing images, pulling out colors, icons, logos, a general all real cool fund tool. The tool's called H TM L to design and let me show you how to work it. Alright, to get started, I've just got a empty uh, document. It's in giraffes. I'm gonna open up the plugin.
The one you're looking for is something called H TM L to design. Hit run. There is a free and a paid version. I'm gonna go through the version of uh, free that is available to me. Now this will probably change by the time you get to it. Okay?
I'm gonna use apple.com. You can type in any URL you like. You can ask it when it's checking the website to ask for lid or dark mode and what size. Okay? This is not coming directly from Apple, it's just saying well would you like us to try and load a tablet size version of it? Does your website have a version that has tablet?
Does your website have a tablet size? It does. Well, at least Apple does. Okay, so pick that, then hit import and you can type in any URL. You can see here some of the upgrades for pro, but we can get a lot what we need in the free version at the moment. Now depending if you have the fonts, okay, like we looked at earlier, you can go and download the fonts if you need them.
Okay, I have a bunch of them. I have the Vertica that I need and now you've gotta prepare yourself 'cause there is amazingness and then there's stuff that isn't so amazing. Okay? So things that would be useful if I needed, let's say the logo, okay, I can maybe command or control click and kind of click into stuff. I could easily copy that and paste it into my other document, okay? With all my uh, logos.
Okay, maybe a master components. Okay, there we go. We might have to tidy it up. Oh no, that one's come through really nicely. Uh, are the things that might be more painful. Let's say I want this button.
Okay, so I can keep clicking. Just double clicked a few times. I've gone inside all these div tags, found the button. Unfortunately if I keep going in, this is actually not text, it's just uh, shape. Okay, the Nest vg. Why?
I have no idea. I would assume it would've been text on the website, but apparently it's either the plugin or it's Apple. They're rendering it as a vector and not actual editable text. Other useful bits is images. Okay, I can command click okay, find that image and I can say, let's export what I've got selected. Let's preview it.
Okay, as a P and G, sure jp sure hit export And we've got that image. Or just copy and paste it into a different document. Super cool. Other cool things is you can start rebuilding some components. So let's find a button. Let's use this one here.
I'm gonna come and click the outside. So I gonna grab the wrapper of this thing. Maybe you can drag this out. Okay, I'm gonna copy and paste it. It's just so I've got my own version over here and we'll see how good this is. There are going to be times where it's just easier to rebuild it.
There are gonna be times where you can just use this plugin to get you close enough there and there's gonna be some tidying up. Now first of all, I want to check if this is text. Perfect. So it is TE is text problem is, it's not auto allowed. So I'm gonna select the parent shift A for an auto layout and it's kept all the padding looks great. Um, the only trouble is that this isn't lined up and the trouble is this thing here is kind of trapped in some sort of weird mask.
So I could turn clip contents off. Okay, might get us there. What I might do is actually just used, remember all the keys plus R to resize to fit command option shift control, alt shift on a pc. And it will just kind of like redraw around the outside and that's kinda lined everything up nicely. Let's have a look at the background. It's got ginormus, uh, round of corners on it.
That's fine. I can turn it down to two or 20. Okay, so I would say that this was worth the effort of grabbing it through the plugin 'cause it only took me a little bit just to kind of get it ready. You can see how amazing it is for a website that you've inherited. You might have turned up with a job. Nobody's using Figma or at least it was designed in say, Photoshop or Illustrator before anybody was making components.
We just can't find the files anymore, download it and start recreating them. If nothing else, it's great for grabbing logos, icons, colors, and recreating some of these components. Alright, that's it. The only warning is I've made this feel like it's perfect and works really good, works really good on the Apple site and a few sites that I've tried, I've tried other sites and it just, it's actually too hard. There's just bits all broken up and the depth of all of these layers here, a little confusing. But I feel like you might be at a point now this far in the advanced course where you're like, actually I know what I'm doing.
This is super useful. Alright, that is it. I'll see you in the next video.