Sync your Figma assets with your dev environment

Learn how to use Figma Asset Downloader CLI to work with Figma like a boss!

The problem

Recently, the Design team at Alpha started to use Figma in order to prepare the assets for the app I'm currently involved in, which is called Evermind and aims to help people to build the skills needed to manage stress and become more resilient.

Our Design team is really happy with the change from Sketch to Figma, and they really seem to be more productive and enjoy a lot the collaborative work that it promotes.

Suffice to say, that if they are happy, this has a direct impact in the product and, hence, also in the Development team. Although Figma has actually a way to export images directly from their tool it rapidly became a bottleneck for our Development team: it was a pain to be constantly exporting and reorganizing the assets in a convenient folder structure for our mobile app (2x, 3x and so on...).

The investigation

First, I decided to look for a tool that could be integrated in our development flow and automatically sync the assets from Figma. Some sort of CLI that would allow us to even integrate this into our CI pipelines if we needed it. The fact is that I couldn't find any kind of tool that suited our simple needs, so I decided to build my own.

As you may know if you've read some of my previous articles, I'm very fond of Rust so this was also an opportunity to write something with it and help to spread its usage 😉.

The solution

Luckily for me, Figma has a super nice API so it was really simple to build something that could export all the assets from any Figma Document I wanted with just a simple command call.

I just had to focus on building a nice CLI by leveraging the amazing StructOpt crate and some of the usual suspects like Tokio, Reqwest and Serde.

I stuck to the plan and eventually Figma Asset Downloader CLI came to life. It was simple, and it worked for us! 🎉

Read the docs if you want to learn more about it.

The improvements

After some days of using it, although we were happy with it, we found that the images generated from Figma were not being really optimized: jpg images were huge, and we felt that png optimization could be improved a little bit, too.

So I put some super cool crates into the mix, namely image for jpg and oxipng for png, and voilà, we got some cool image optimization capabilities into the CLI, just right away! 😮

The roadmap

The tool is open source and it's been published under the MIT license, so feel free to use it, adapt it and extend it.

Although the roadmap of this tool is mainly driven by the needs of my current team at Alpha Health, I'll be more than happy to hear other team's needs and perhaps try to implement these new features into it.

For the moment, as per one of my team colleagues suggestion, I'm considering to extend it by adding some sort of manifest that could help you to identify which files have changed their name, just to avoid having missing images in your app due to some misspelling in the Figma asset.

EDIT: This feature was added on April 30th, 2020

Of course, that's only an example.

Not only I'm hoping that this tool will be extended by the suggestions and efforts of other teams but I'm verifying that it's also increasing the interest of my teammates in Rust as a language, so, so far, it has been worth developing it.

Enjoy! 😊

--
Originally published at robertohuertas.com on April 19, 2020.