Lorsqu'on parle de design, notamment de prototypes ou de maquettes d'une application ou d'un site web, Figma est l'outil le plus populaire et le plus utilisé par les designers et les freelances.
Pour autant, il peut arriver que des comportements involontaires fassent leur apparition pendant que l'on travaille sur Figma, nous faisant perdre souvent beaucoup de temps tout en ruinant notre design. C'est d'ailleurs ce qui m'est récemment arrivé.
Alors que je prototypais mon nouveau site web, qui devrait sortir très bientôt (www.boutvalentin.com), un problème malheureusement familier a fait son apparition. À chaque fois que j'augmentais la taille de mon frame, certains éléments à l'intérieur de celui-ci se mettaient aussi à grandir et à bouger. Ce problème m'est d'ailleurs aussi arrivé avec le mécanisme de regroupement d'éléments.
Pour corriger ce problème, il faut en réalité faire attention à la manière de placer nos éléments dans ces frames.
En effet, par défaut, les éléments sont placés, ou plutôt "contraints", en fonction de leur distance avec le haut et la gauche de leur parent. En d'autres termes, l'origine (X,Y) de nos éléments correspond au coin supérieur gauche de notre frame.
En utilisant ces contraintes, lorsque nous augmentons la taille de notre frame ou de notre groupe, notre élément restera à la position définie précédemment.
Le problème fait son apparition lorsque des éléments ne sont pas contraints par le coin supérieur gauche de leur parent.
Les éléments positionnés selon d'autres contraintes auront des comportements divers et variés. Par exemple, un élément positionné avec le paramètre scaled se verra grandir ou s'élargir en fonction de la manière dont nous modifions son parent.
Pour mieux comprendre le problème, nous devons garder en tête que ces contraintes déterminent pour chaque élément sa position en fonction de son parent. Ainsi, un objet positionné avec des contraintes de type centre placera votre élément au centre de son parent. Si l'on modifie la taille de notre frame, le centre de ce parent se verra déplacé, affectant la position de ses enfants.
En résumé, pour éviter que vos éléments ne bougent de manière inattendue, vous devez utiliser les contraintes les plus cohérentes avec la manière dont vous allez agrandir le parent. En utilisant les contraintes liées au coin supérieur gauche, vous pouvez modifier la taille du parent par le haut, le bas ou sur les côtés sans risquer de voir vos éléments s'étirer ou se déplacer de manière étrange.
Les autres contraintes peuvent être utiles si vous voulez positionner ces éléments en fonction d'un point différent du parent. Mais par défaut, vous auriez souvent meilleur compte d'utiliser la contrainte du coin supérieur gauche.
J'espère que cet article vous a aidé à corriger votre design et à mieux comprendre les contraintes et le positionnement des éléments sur Figma.
Valentin
Si vous avez besoin d'un site web, d'un consultant, de conseils ou d'audits en Cybersécurité, DevOps ou en Développement Web, n'hésitez pas à me contacter et à consulter mon site web.
Cet article est également disponible dans d'autres langues :
Top comments (0)