On this UI Design lesson we take a look at multiple ways to export our assets and my compression techniques.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right. So let's take a look at a couple of ways. We can explore all of our assets. The traditional way would be where you would actually send this over this whole layout and connect it to a plugin called Zeplin. You can actually connect your design files, hook them up with Zeplin and start creating some really interesting guidelines for the developers.
It helps with creating some of those red lines, directly into the design. But the cool thing is with Figma, it already does that for us. So whenever you send out a link or a presentation over to a designer, the designer will not have editor view, but they will have the ability to start viewing all the code and exporting specific files.
But in order for them to export those files, you need to actually manually go one by one. And select the layer and export and decide which formats and sizes that you need. Typically, you would have two sizes at one X, which is the original size in this case, a 79 by 26 and a 2 X, which has a suffix right before it.
Now, when the actual developer gets the link or the shared link that you are going to send them. They will have access to both the code and the ability to export that file in multiple formats. So you can actually send that task of exporting all the assets over to the developers.
If you work in a big production or a larger team where you don't have to take care of that, but if you do work in like your own boutique studio or you're a freelancer, you would have to definitely start thinking about compressing the files. The way I like to compress files is using a plugin called tiny compressor.
So if I just simply use cmd + / forward slash tiny image compressor right away, I'd get this pop-up and what it does, it asks me to select some of the frames that I'd like to export. Right? So for example, if I select this nice logo, notice how that gets updated into my pop-up of the tiny image compressor.
It has the settings that I want it to. So it's really powerful. We can change the quality of how we want that to be rendered That's one way to do it. We'd have to do it one by one, exporting every single image. And of course, making sure that the settings that we want are correct notice here also it gives you kind of like some additional settings for you to convert all JPEGs into images or to webP, which is a Google format.
So progressive JPEG compression is very, it's an older version of JPEG, but it actually is very useful because if you have a very large graphic, like a background image, progressive JPEG, what it does, it loads the image by pixels. And so it will load up a very low resolution version first, and then it progressively starts loading up the higher resolution version.
So it's actually pretty useful, but it's only for rasterized images. So you can play around with some of the settings here. I like to use this tool to just export all of our assets and have them all ready to go. Another way to do it is if you did export all the images already, you could use a third-party plugin.
Like tiny png.com. This one is a little bit limiting because they only allow you to upload 20 images at a time. So that's if you're running a smaller website or something like that, you could use that. Another one is an app called imageOptim this is one of the most popular ones out there. If you want to just start dropping all your files, it will compress them out.
But because, you know, Figma has all these tools already incorporated. It really makes no sense to have to do that extra step. So instead, I'd like to use that plugin. If you are looking to export all of your assets without really worrying about having to select every layer and naming them and exporting all the settings.
What I recommend you use and try out is an app called Anema. Anema allows you to export an entire page or a frame, and turns that into HTML, and CSS. But the cool thing about it is that it also allows you to export the code out of all that and all the images. So it does all that hard work of exporting all the graphics that you have on one single page.
And it gives you all the compressed images, but you have to pay a plan in order for that to work. Cool so that's about it, about exporting our assets. I'll see you on the next lesson.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS