Why did we choose Figma?

We used so many apps in our process: Sketch for creating mocks, Cloud for store and share mocks with teammates, Zeplin for transferring mocks to developers, and PaintCode for graphic assets and colors. That’s a lot of tools! Our goal was to simplify the design process and make it fast and better with Figma.

We wanted fundamental change to our technology stack, which simplifies the design process and makes it better. Fortunately, Figma is a match for all these requirements. We worked together with engineers and considered dozens of different approaches to building our design system. We try to simplify our design process and make it fast and better with Figma.

Finally, we decided to have two library files where Dev Core is using for creating a bundle of graphic assets and styles.

• Core. Stores glyphs, colors, and font styles. Store components that we are using in mocks.
• Dev Core. Graphic assets, colors, font styles, component description.

Dev Core is the most interesting for us because this file using our developers.

Using Figma API for Dev Core file

As you may know, Figma API is powerful that can give you all you need resources from any file. Our team created a script using Figma API that allows getting all graphic assets and styles. Styles consist of colors and typography, which we used for all platforms such as iOS, Android, web.

We have a new process: a designer edits some icons or colors in the Dev core file, then notify engineers, and the team sees all the changes. Finally, we push changes to our Github project. For our team, this is a game-changer of interaction design and development.

For colors, we decided to use semantic color styles grouped by type of object. These are four groups: text, background, icons, buttons. Details you can see here.

Verification with the plugin

Furthermore, we make a plugin that validates our library, and the plugin shows an alert if you have any mistakes. Now any teammate could run this plugin after adding new assets and check the file status. Source code at Github.

What plugin do

• Validate objects name (frames, instances, colors)
• Sort all layers by name
• Check day/night objects balance
• Show an alert if the library has mistakes

Components

Additionally, we put interface components with descriptions in the Dev Core file. We created an app that shows all graphic assets and components in one place. Now we have the all-new process for creating and delivering design to the production.

Conclusion

The Figma platform makes it easier for developers and designers to work together. We use all possibilities of the Figma APIs to create our team process better and automate the workflow.