Hi everyone. In this video we are going  to unstrap images ready for export. Depending on how much you know about development, uh,  your developer will want the full image  and they will do the fill crop fit option  in code on their side. So they want the full image. But if I export this from  figment right now, it's gonna crop it down,  it's gonna give it rounded corners. How do I liberate this image so I can send it  to my developer at the full size or a specific size?

I'll show you that as well. Alright, let's jump in, right? The easiest way is with a sweet plugin. So go to plugins and type in, uh, export original images. Okay? And run that and basically does what it says.

Okay? I'm going to click in this. Okay? It is a fill inside of this frame  and I'm gonna say, do I want it to be a p and g or a jpeg? 80% JPEG's gonna be good for me. And for selection we're gonna just have the things  that are selected and click export.

Let's use the name from my instance. That's cool. Let's check it out. Oh yes, it went and unpacked it  and brought it in at its original size. That was brought into Figma. Uncropped, no round of Corners Koha.

You can do it. A whole group of things. You can decide,  you can select everything on the page  or I'm just gonna click this event listing loads of images  or cropped in there. And you can use this option  that says select everything, including the children. Don't forget about the children. Okay, now hit export.

You'll get a zip file. Okay, let's have a look. Let's unpack it. And inside that zip file,  oh my goodness, look at that. They're all in there. All the crazy, uh, aliens  and all the other images that we bought in through plugins.

Super handy. Alright? Uh, there is the hacky way. It works just as good. The problem is, is that your developer might wanna be  self-sufficient and doesn't want to have to go through  and sift through all the files to find the right image. Match up the names.

What you can do is when you share a  file, okay, you copy the link, you send it  to your developer, you have educated them that they need  to go to the inspect tab, okay? And they've used it before maybe, and they can go round  and they can grab CSS or iOS or Android code,  but they can't get to the image. Why can't I see the image? C, s, s? Anything? Nothing.

Why can't I see the image? It's go inside,  keep clicking, keep clicking. Still nothing. Ah, but there's a hack. I feel like in the near future it'll just be listed here. Okay?

But the moment, if you go to any of these, okay,  and switch from the code view to table view for some reason,  you can click on that and it opens up in a new tab. There you go. You can copy  and paste that out, right click, copy, image, or save it. There you go. You might use it yourself instead  of the plugin, just grab the few images that you need. You can copy it and paste it back into Figma.

If you want paste it back in,  it's the full size that I got it. It's a great way of being able to kind  of like extract images from plugins  and figure out where they are, what they're called. What it's also useful for is, uh, doing sizings so  that I need to send them to my developer. I'm actually using the browser view. I'm gonna go back to my desktop view  and hopefully shift a, there it is over there. Daniel's working on it.

Okay? This image here, okay? If I go to design, I need to make sure it is being marked  for export, okay? And what not everyone knows is I can do the full size  or like half size or double size depending on what I need. But if you go down to this one that says W  or H, you might have some maximum  requirements for your website. Okay?

Let's say that you might have  for a thumbnail or something. It's one 50 w as long as you put W in there,  it'll export 150 pixels wide. That's a handy one. You might decide  that you've got a couple of versions. There is a 300 W or an H for height. You can go through and keep adding exports.

Click export image one. Terrible name, but now, there you go. Got image one, PNG and image one at two x. There you go. Right? That's it.

That is how to unstrap images from inside of frames  and rounded corners and drop shadows  and kind of pull it all out. Ready for export.