Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.3 hours
140786 adam noonan thumbnail figma 02 400x277px 102417
  • Overview
  • Transcript

4.1 Inspecting and Exporting Assets

We’ve covered how you might use Figma if you’re a designer. Now, in this final lesson, we’ll examine how to use it from a developer’s point of view.

4.1 Inspecting and Exporting Assets

Hello and welcome back to this course. In this lesson, you are going to learn how to use Figma from a developer's point of view. So we're logged in, in Chrome with ADi developer, who currently can only view via Demo Mobile App project. So let's go ahead and open this. And as you can see, I have access to the layer panel. But I do not have access to the components. And just as a comparison, I'm going to jump back and forth between this screen, which is the Figma on my ADi Purdila account, and this screen which is on my developer account, right? So what am I missing here? Well, I'm missing all the tools, except for comments. So I cannot add anything to the page. I can select elements, But I cannot move them, right? I can only access their properties, but I can not change their properties. And one of the things that I really like about this, is the fact that I can select an element and it immediately tells me its size. And without me pressing any key or anything, it acts as if I was pressing the old key. Showing me distances to the page edge, or to the nearest elements, all right? I can select any element. Again, it gives me its size and distance to other elements. I can even select the entire art board. Now, depending on what element I select, I get various properties in the right panel here. If, for example, I select this rectangle, let me just zoom in here. So if I select this rectangle, I get a list of properties, but I can also see the CSS code, all right? It tells, well, tells me position absolute, height, left, right, 0, top, etc. Now I don't have to use all of these, but for example the color might be useful, so I can just copy this line or I can copy the height. Maybe I choose this, the rectangle for the input, right? Again, it gives me a background color, it gives me a border radius. If I'm developing for iOS, I can also get swift code, so that's pretty cool. Overall, this view that I have here makes my job, as a developer, much easier. It's really fast to just be able to click an element and get a bunch of the CSS for it. And not only that, but also positioning context. Now, if I want to export some assets, I can do that as well. I can select pretty much anything I want, for example, this icon, all right? And I can hit the Export button, it gives me options for the size. I can choose original size, twice the size, three times the size and so on. A suffix if I want to, the format, currently only supports PNG, JPNG, and SVG. And then I can export like this. I also get a preview, right here. But the thing is, if I select multiple elements like, let's say, for example, I also want this logo to be exported as SVG and I also want this icon to be exported as, let's see a PNG and also this one as a PNG. Then what I can do is simply hit this Export button and apart from being able to export my original screens, I can deselect the ones that I don't want to export. I can also export the ones that I just selected. And all I gotta do is hit Export, and that will generate those images automatically for me. Really handy feature, as I said, it makes the developer's job much, much easier. Now that's pretty much it for Figma and for this lesson. Please join me in the next video for the conclusion, see you there.

Back to the top
Continue watching with Elements