Sync your Figma assets with your dev environment
Learn how to use Figma Asset Downloader CLI to work with Figma like a boss!
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.
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…).
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 .
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.
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.
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.