Optimiser le changement d’échelle grâce au Plugin Figma Scale !

October 10, 2023
Optimiser le changement d’échelle grâce au Plugin Figma Scale !

Introduction

Aujourd'hui, les proportions prennent de plus en plus d’importance dans les conceptions d’interfaces, car elles apportent une certaine harmonie sur l’ensemble d’une page et permettent de fluidifier la lecture du contenu. Lorsque l’on souhaite modifier la taille d’un élément en gardant ses proportions, le plus simple est d’utiliser la fonction "scale", qui permet de modifier la valeur de l'échelle de n'importe quel élément.

Malheureusement, il est bien souvent laborieux d’obtenir la taille exacte souhaitée. Par exemple, pour obtenir une largeur trois fois supérieure de celle d’un élément à 50px, nous devons faire un petit calcul mental pour savoir jusqu’ou s’arrêter avec la fonction "scale". Bien souvent la valeur exacte n'arrive pas toute suite et il faut jouer un peu en déplaçant légèrement la souris pour ne pas avoir 149px ou encore 151px, mais bien 150px.

Le plugin Scale vous permet de simplifier et d'ajouter certaines options non-présentes de base sur Figma, pour modifier la valeur de l'échelle de vos éléments. Pour cela, il vous suffira simplement de le paramètre pour avoir le rendu attendu.

Fonctionnalités

MULTI-SÉLECTION

Sélectionnez un ou plusieurs éléments ( frame ou calques ) que vous le souhaitez pour appliquer le même changement d’échelle.

ÉCHELLE EN LARGEUR, EN HAUTEUR OU EN POURCENTAGE

Pour un rendu attendu, traiter le de la meilleur des façon. Vous pouvez choisir sur une valeur fixe en basant sur la largeur ou la hauteur ou bien tout simplement appliquer un pourcentage par rapport à la taille actuel de votre élément.

SÉLECTIONNEZ UN POINT D'ANCRAGE POUR LA MISE À L'ÉCHELLE

Dans le cas ou votre élément n’est pas dans une frame en auto-layout vous n’allez pas pouvoir choisir la position de l’élément après modification. C’est pour ça que le plugin vous permettra de choisir un point d’ancrage avant d’appliquer la modification.

Conclusion

Pour celles et ceux ayant utilisé Sketch avant de basculer sur Figma, les fonctionnalités du plugin vous rappellerons des souvenirs, mais surtout, il vous permettra de retrouver vos habitudes. C’est notamment ce qui m’avait motivé à chercher un plugin comme celui-ci.

Pour conclure, "Scale" nous permet de modifier simplement l’échelle de n’importe quel élément tout en nous offrant diverses options pour que n’importe quel designer puisse se l’approprier. "Scale" est le plugin à ajouter et à utiliser dès que vous voulez changer rapidement la taille d’un élément tout en gardant les proportions de base, finis les calculs et les modifications approximatives

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.