Allégez les fichiers de vos projets Figma grâce au plugin “Downsize”

Introduction

Même si l’évolution des outils de design fait qu’il est toujours plus simple et rapide de designer une interface utilisateur, un problème est et reste récurrent : le poids de fichiers. En effet, même s’il on exporte peu les fichiers Figma, ils n’en reste pas des fichiers avec un certains poids. Ce poids peut varier en fonction du nombre d’éléments de manière générale, mais surtout en fonction du nombre d’images et de leurs dimensions initiale par rapport à leur zone d’utilisation.

Les images plus petites aident les fichiers à se charger plus rapidement et réduisent l'utilisation de la mémoire. Pour avoir utilisé la fonctionnalité nativement présente sur Sketch “Reduce File Size” qui permettrait de réduire la taille d’un fichier. Il fallait trouver un équivalent pour Figma permettant d’avoir la main sur le niveau de compression au minimum voir même des options supplémentaires.

Cet équivalent, c’est le plugin Figma "Downsize", qui permet de continuer de travailler dans les meilleures conditions malgré un projet trop volumineux ou bien un projet comprenant trop d’images avec une dimension non adaptée.

Fonctionnalités

PNG TO JPG

Lorsque vos images ne sont pas avec un fond transparent, c’est-à-dire, lorsqu'elles n’utilisent pas de couche alpha, vous allez pouvoir convertir des images PNG utilisés en JPG pour optimiser davantage le gain d’espace.

COMPRESS

En diminuant de manière sélective le nombre de couleurs de l'image, l’image comprendra moins d'octets. La différence est presque invisible, mais il y a une très grande différence dans la taille du fichier. Je recommande de régler le niveau de compression sur une valeur supérieure à 30, sinon vous risquez de perdre en qualité d'image.

RESIZE

La fonction de redimensionnement a une particularité basée sur la dimension de l’image et celle de remplissage. Disons que votre objet à une dimension de 100 par 100 pixels avec une image de remplissage de 200 par 200 pixels. Si vous choisissez un multiplicateur de 4x, au lieu de "mettre à l'échelle" l'image à 400 par 400 pixels, elle gardera sa taille originale de 200 par 200 pixels, car l’image ne fait pas 4 fois celle de l’objet, elle n’a donc pas une dimension de 400 par 400 pixels.

A contrario, si l’image est beaucoup trop grande par rapport à l’objet, par exemple 800 par 800 pixels, pour un objet de 100 par 100 pixels, lorsque vous appliquez un multiplicateur de 2x, vous aurez une compression de l’image équivalent à 2 fois la taille de l’objet et donc a une image ayant une dimension de 200 par 200 pixels.

Conclusion

Pour conclure sur ce plugin Figma Downsize, je dirais que la promesse est tenue et que tous les designers étant passés par Sketch et ayant utilisé la fonctionnalité “Reduce File Size” pourrons s’y retrouver. Le besoin principale étant de pouvoir continuer a designer dans les meilleures conditions et cela passé par alléger le poid du ou des fichiers sur lequels on travail.

Le point positif qui peut être pris en compte pour la passation avec les équipes techniques, est de pouvoir imposer des images avec une dimension propre au retina avec des images déjà compressées en termes de poids.

‍

LIENS PRATIQUES

‍Plugin Figma