On this UI Design lesson we prepare to export our design assets in Figma.
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 guys. So now we are ready to export our assets. So before we do that, we need to understand simple concepts. When we export an asset, we have to put the shoes of a developer first and foremost. And the reason why is because we need to remember that assets or files that we have created can be exported in multiple formats.
But when they actually are rendered on the website, Or on the application, we need to make sure that these assets are compressed. Some files are a little bit heavier than others. And we're going to take a look at these formats. For example, let's say this hand right here, the virtual realityhand, if we look at the code property panel on the right side, in order for us to export this. And if we wanted to create this as an image into the web because of the complexity of it. It won't be able to be reproduced as code that's key difference between an actual graphic and something that recreated in HTML and CSS.
So things like a button, for example, a button is something that can definitely be created in HTML and CSS using all these properties.
So this type of elements we don't want to export because they are actually easier to just use CSS. But if we select, for example, the icon right below it. This does have some complexity to it. And we would want to export this as an SVG. And the way we do that is we use the property panel on the very far on the very bottom of it.
We click export and you'll notice that we get multiple types of formats in this case, because we want this image to scale, avoid making it pixelated on the web. We want to export it as an SVG, which is a scalable vector graphic. What this means is it uses points and it gets transformed in code, but we don't see that code, or we don't have to fiddle with it, which is really cool.
It just does the magic in the browser, simple logos like these ones can definitely be exported as SVGs. The hands in this case, we want to export these because they do have some transparency behind them. We want to use the format PNG. PNG format is used specifically for any graphics that are complex, but also have transparency.
Say, for example, this title right here, which has a nice graphic. There's a trick, in a way we can do this both with code and CSS, but a it's always good to actually use this, export a backup file as a PNG, just in case older browsers, don't support this technique can fall back into this graphic.
So what I want to do is, just give you a sense of the types of files that would require to be either a vector or a PNG. Let's say, for example, these 3d shapes, I would definitely turn those into PNG format. We just need to worry about compressing them so that they are smaller size, especially because they have a lot of shadows around and these shadows take up a lot of transparency, real estate. And so that adds extra kilobits into that file. So we want to try to avoid that. And in the next lesson, I want to show you two ways where you can export all of our assets in a very fast way and compressing them using external tools that will make this process a lot better.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS