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

April 19, 2024
X
MINUTES
PARTAGER SUR
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

Guillaume Hambourger

UI Designer chez ATECNA
PLUS D'ARTICLES

Vous pourriez également être intéressé

Créez des expériences web révolutionnaires avec le duo dynamique de Webflow & SplineCréez des expériences web révolutionnaires avec le duo dynamique de Webflow & Spline
Explorez de nouvelles dimensions avec Webflow et Spline ! Cet article dévoile comment ces plateformes combinent design 2D et modélisation 3D pour des interactions utilisateurs captivantes. Découvrez comment cette synergie révolutionne le web design et libère votre créativité.
Spline, l'outil de conception 3D dans le navigateur avec collaboration en temps réelSpline, l'outil de conception 3D dans le navigateur avec collaboration en temps réel
Spline révolutionne la modélisation 3D avec sa simplicité, sa puissance et sa polyvalence. Cette plateforme intuitive permet à quiconque de créer des modèles 3D époustouflants, d'animer des scènes dynamiques et de développer des expériences interactives engageantes. Idéale pour les professionnels et les amateurs, Spline libère votre créativité 3D.
Introduction à Responsively, l’application pour optimiser le responsive de Votre Site WebIntroduction à Responsively, l’application pour optimiser le responsive de Votre Site Web
Découvrez Responsively, l'application révolutionnaire qui simplifie le développement web réactif. Testez et visualisez votre site web en temps réel sur plusieurs appareils simultanément, garantissant une expérience optimale pour tous les utilisateurs.