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

October 10, 2023
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

Guillaume Hambourger

UI Designer chez ATECNA
PLUS D'ARTICLES

Vous pourriez également être intéressé

Utilisez le plugin "Insert Big Image" pour importer de grandes images depuis FigmaUtilisez le plugin "Insert Big Image" pour importer de grandes images depuis Figma
Le plugin Figma "Insert Big Image" permet d'importer des images de grande taille sans perte de qualité. Il découpe l'image en plusieurs images plus petites, chacune respectant la limite de 4096 pixels de Figma.
Lignes élégantes et connexions intelligentes, maîtrisez le plugin Autoflow dans FigmaLignes élégantes et connexions intelligentes, maîtrisez le plugin Autoflow dans Figma
Le plugin Autoflow pour Figma simplifie la création de connexions entre les frames, offrant des lignes intelligentes, esthétiques, et évitant intelligemment les obstacles. Il est idéal pour les concepteurs d'applications mobiles, d'interfaces web, et d'autres projets de conception.
Utilisez l’ensemble des icons de Google grâce au Plugin Figma “Material Design Icon”Utilisez l’ensemble des icons de Google grâce au Plugin Figma “Material Design Icon”
Le plugin Material Design Icon pour Figma vous permet d'intégrer facilement des icônes Material Design dans vos créations. Il propose une interface intuitive, une large sélection d'icônes, et des fonctionnalités de personnalisation avancées.