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, selon notre expérience, 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.

Notre expérience avec cet outil

Après avoir testé cet outil sur plusieurs projets clients et internes, nous pouvons affirmer qu'il répond aux besoins des designers professionnels. Notre équipe l'utilise régulièrement dans son workflow quotidien, ce qui nous permet, selon notre expérience, de valider son efficacité en conditions réelles de production.

Points testés en détail :

Performance sur des fichiers volumineux (500+ frames)
Compatibilité avec les design systems complexes
Stabilité lors d'utilisations intensives
Intégration dans un workflow d'équipe

Points d'attention (testés en conditions réelles)

Dans un souci de transparence, voici les limitations que nous avons identifiées lors de nos tests :

Temps de traitement pouvant être allongé sur des fichiers très volumineux
Nécessite une connexion internet stable pour certaines fonctionnalités
Courbe d'apprentissage pour les utilisateurs débutants

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.

‍