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.