Sync your Figma assets with your dev environment
Tags: rust, tools, figma, design
Published: 2020-04-19 12:44:56

---
title: Sync your Figma assets with your dev environment
published: true
date: 2020-04-18 22:00:00 UTC
tags: Rust,Tools,Figma, Design
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/x4zf2la3fe1q0uf2234s.jpg
canonical_url: https://robertohuertas.com/2020/04/19/figma-asset-downloader/
---

Learn how to use [Figma Asset Downloader](https://robertohuertasm.github.io/figma-asset-downloader) CLI to work with Figma like a boss!

## The problem

Recently, the Design team at [Alpha](https://alpha.company) started to use [Figma](https://figma.com) in order to prepare the assets for the app I'm currently involved in, which is called [Evermind](https://evermind.health/) 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](https://www.sketch.com/) to [Figma](https://figma.com), 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](https://figma.com) has actually a [way to export images directly from their tool](https://help.figma.com/hc/en-us/articles/360040028114-Getting-Started-with-Exports) 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](https://figma.com). 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](https://rust-lang.org) so this was also an opportunity to write something with it and help to spread its usage :wink:.

## The solution

Luckily for me, [Figma](https://figma.com) has a super nice [API](https://www.figma.com/plugin-docs/api/api-overview/) 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](https://crates.io/crates/structopt) crate and some of the usual suspects like [Tokio](https://crates.io/crates/tokio), [Reqwest](https://crates.io/crates/reqwest) and [Serde](https://crates.io/crates/serde).

I stuck to the plan and eventually [Figma Asset Downloader](https://robertohuertasm.github.io/figma-asset-downloader) CLI came to life. It was simple, and it worked for us! :tada:

Read the [docs](https://robertohuertasm.github.io/figma-asset-downloader) 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](https://figma.com) 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](https://crates.io/crates/image) for `jpg` and [oxipng](https://crates.io/crates/oxipng) for `png`, and *voilà*, we got some cool **image optimization** capabilities into the CLI, just right away! :open_mouth:

## The roadmap

The tool is **open source** and it's been published under the [MIT license](https://github.com/robertohuertasm/figma-asset-downloader/blob/master/LICENSE.md), 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](https://evermind.health/about-our-team) at [Alpha Health](https://alpha.company), 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](https://figma.com) 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](https://rust-lang.org) as a language, so, so far, it has been worth developing it.

Enjoy! :blush:

--
Originally published at [robertohuertas.com](https://robertohuertas.com/2020/04/19/figma-asset-downloader/) on April 19, 2020.