How we boosted our design process

Luca Burgio , 10 April 2020

In 2018, Bending Spoons switched from Sketch to Figma. We evaluated the benefits and the reasons behind the change. Now Figma allows us to work in a faster and simpler way with developers and also teams not directly involved in the specific design process.

Starting from Figma

With Figma, we radically improved how we deliver assets and design guidelines to developers. Collaborating with other designers and developers in real-time is the key to a fast and robust design process. This process allows us to fix and optimize user experience and user interface on the way and to receive quick and precise feedback.

Internal Documentation Library

We regularly use comments on Figma, which is an easy way to give and receive feedback directly linked to screens and components.

To boost this process, we released an internal library with useful elements that allow us to attach comments and links (to a prototype, animation, or asset) below a screen or a flow. Developers will have all the links and specs right there without asking for any resource or UX behavior.

Extracting styles automatically

Our support tools team developed a Plugin, which allows the developers to directly extract and immediately work on styles data from Figma. With this process in mind, we have more rules to follow to prevent issues while developing the product.

P3 Gamut optimization

Unfortunately, at this moment, Figma still doesn't let designers export images using a P3 profile. Therefore we also created a useful internal tool to allow designers, and even developers to convert fast exported images from RGB to P3. It's a simple AppleScript that uses ImageOptim and ImageMagick libraries.

Using the cloud to manage assets

Even if Figma and our internal Plugin are helpful to extract colors and fonts styles, we still have to use Google Drive as the main repo for files that are not in the Figma project, like Lottie Animations, Prototypes, and P3 Assets.

Each project has three main folders on Google Drive: Lottie Animations, Prototypes, and P3 assets.

For all the types of files on our Drive folder, we attach a reference below each screen on Figma

The exported assets for the Figma component called

UI / Icons / Back

will be in

Assets / UI / Icons / Back.png

We're now working with developers to create an automated script that will automatically convert to P3 when we export images from Figma.

Lard - Lottie Sandbox

We are in the phase of brainstorming an internal mobile app to test Lottie Animations before putting them into the app under development. This app gives us the ability to try those animations for buttons, sliders, tab bars, and more, without stressing developers.

Do you like this story?

Follow me on Twitter to get updated when a new story is coming or if you simply want to get in touch with me.

What's the difference between Lard and LottieFiles Preview?

The simplicity of LF Preview is excellent, but we were looking for something more, like the ability to set different loops for the animation, interact with it (if you have a slider completely designed in Lottie for example), add a screen as background (to immediately have the idea of the final result) and change the Lottie's position in the screen space.

Fun fact: Just a few of us know the real meaning of the acronym of this tool, but we decided to publicly justify it with 'Lard: Lottie Animations for Rocking Designers'.

If you are currently using a different method to export assets or efficiently create prototypes, feel free to dm me.

Get updated on the next story.

Follow me on Twitter to get updated when a new story is coming or if you simply want to get in touch with me.

Get Link