Chapter 11: Exporting Assets and Managing the Handover Process

At the moment, you have successfully completed the stage of building a prototype of our interface, which you configured and tested in Presentation view and possibly within the Figma mobile application. You have come a long way to get where you are, all the while mastering Figma and comprehending the principles of the design working process. Therefore, we can safely say that your future projects will be easier in terms of working with Figma since you can now not only use all the necessary functions of this design tool but also the more complicated ones, since real projects require much more detailed work at each stage of interface design.

Speaking about working on the really complex products, you need to understand that there is a large team of professionals behind each product, and designers are one of the key players, involved in frequent communication with their colleagues. And this aspect is just as important as what...

Exporting from Figma

At this point, you have a pretty clear overview of the exact work behind analysis, design, interactive prototyping, and product testing. Now you will focus on the very last stage – working on the handover of all resources and assets, which happens after you have made sure that your design is absolutely ready for it. The first thing that you need to know about is the Figma tools: these allow you to prepare and export the file and individual elements to everyone who will then work on the actual development of the application or website. There are several ways to do this, as well as several formats that Figma offers for it. This and more will be presented to you in this section of the chapter.

What formats are supported?

First, we need to define an important difference between saving and exporting in Figma, as well as other design tools. By clicking on File in the menu bar (desktop version only) or on the Figma logo in the upper left corner and then File...

Exploring the Inspect tab

As you can see, the right panel contains a huge number of functions, settings, and tools. It took you several chapters and a lot of practice to get to know it at a good level. All that's left for now is the last tab of this panel, namely Inspect, and in this section, you will fill this missing gap and explore it in detail. The main peculiarity of this tab is that, unlike Design and Prototype, it is also available to those with only view permissions, so it is a great tool for developers and external collaborators. This is what this tab looks like without any active selections:

Figure 11.5 – The Inspect tab

It basically consists of two parts: one is dedicated to Styles and Interactions and the other is about Code snippets, and now we will dive into both.

Styles overview

Let's start right off with part of a complete overview of the entire Styles library, which you can see in the Inspect panel with no active selections...

Handing over the project for development

Your journey was as exciting and interesting as it was intense, wasn't it? You have gone through the important steps in designing a generic product. Of course, all phases have been minimized to keep the overview for you as complete as possible. Nevertheless, we can say that at the moment, you have keys with which you can approach any other projects on your future path, which will be devoted to the creation of real products, and therefore the designs will be much more detailed and elaborate. In addition, it is likely that you will be a part of a whole team working on a complex digital product, and it will also be a very interesting journey in which you will combine tools that you already know and discover new, more advanced features.

So, does our work really end here? Can we really consider the project closed? Of course, even after testing the product, getting approval, and providing the developers with the necessary resources, there...

Summary

In this chapter, you discovered that Figma can not only be an efficient and fast design tool but goes beyond that, considering the needs of other team members who might work in collaboration with designers. Thus, you learned how to export a whole file or its individual elements from Figma in several possible formats, as well as how to set up elements for subsequent export while still at the active design stage. Also, you have finally explored the functionality of the last tab of the right panel, namely Inspect. In addition, you learned about what a design system is and how to document and assign descriptions for styles and components in your projects so that everything is well organized and easy to use.

In the next and final chapter, you'll see how to extend Figma by discovering the amazing Figma Community, where you can explore hundreds of cool UI kits, templates, and plugins from creators around the world. Using Figma Community resources, you can not only speed up...