Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:13Length:1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 Exporting Assets

In this final lesson, you’ll learn how to export assets in Figma. There are a few ways you can go about this, so let’s see how to do that and then wrap up this Figma tutorial.

4.1 Exporting Assets

Welcome back to the course, in this lesson you'll learn how to inspect a Figma file and the benefits this has for a developer. So let's begin. So let's say you were a developer and you've been given view-only access to this file. And it's your job to convert this from a design to working app. So, how do you do that? Well, when you are in view-only mode, obviously you cannot delete or change the layout of any design. What you can do instead is you can select an element, and you can immediately see its dimensions and also how its positioned in relation to other elements. So for example, with this title selected, if I hover on my main frame, I can see the distance between this text and the edges. If I hover over this bit,I can see the distance between this and this. And it just goes on and on and on and I can do the same with any other element. What's more, when I select an element I get immediately CSS code for it. So if I select this input, we can see the CSS for it here, the width, height, left, top, the background, opacity, border radius. So all the properties that I would need as a developer to transform this into a working component in a web page. What's also nice is that if you notice in the comment, it tells me the name of the shared, or excuse me the color style that I'm using. And speaking of color styles, if I don't have anything selected, I get access to all the local styles. So this is the button text, titles, paragraphs, basically anything that the designer created in terms of styles, I have access to it here. And I can always click on this little button and be taken to this page where I can see a preview and also Get access to the CSS. And I can switch between code and table style. Also, I can switch between CSS and iOS this is I believe swift code. And also if I'm developing for Android, I also get code for that. And this works for any element. Here in the inspector. If I select this for example, I can switch between CSS, IOS, and Android. That is very, very cool. Now, I also get access to the color styles. And I can see all the colours here. And I also get access to any other styles created by the designers. As I was saying previously here, you can also see the mobile grid that I've created previously. And by the way, if you're noticing slight differences in this design, it's because it's an older version of the two screens that we designed in this course. But I decided to show you this one because it just had a few more elements here. Now apart from seeing all of this you can also right click Any element in the page and it can copy that element as text, CSS, SVG, or it can copy its properties. So, by having access to these features, it's really easy to go from design to code. All right, so hopefully this answered some of your questions regarding using Figma as a developer. As I saw, it's really simple to just get accurate measurements on elements. Get code that you can use CSS code or code for iOS or Android that you can use right away. And this will just make your your job a lot easier. Now, another part of the whole development process is exporting assets. So as a developer you'll at some point be exporting certain assets as images, icons for example or large images, logos. And in the next lesson, I'm gonna show you how you can do that in Figma. So I'll see you there.

Back to the top