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.