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.
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.
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.
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.
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.
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.
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.
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.