Aide sur Figma : Pourquoi est-ce que mes éléments bougent lorsque je change la taille de mon frame ?
Tags: figma, design, help, webdev
Published: 2023-08-28 09:49:26

Disponible en: [🇬🇧](https://dev.to/boutvalentin/figma-helps-why-my-elements-are-moving-when-changing-the-length-of-my-frame--151h), [🇫🇷](https://dev.to/boutvalentin/figma-helps-pourquoi-mes-elements-bougent-lorsque-je-change-la-taille-de-mon-frame--3cpe), [🇮🇹](https://dev.to/boutvalentin/figma-aiuta-perche-i-miei-elementi-si-spostano-quando-cambio-le-dimensioni-del-mio-frame-4b5i)

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](https://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_.

![Exemple d'image contraint avec les valeurs top et gauche](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bvphaw1ywmd1nrj9cup.png) 

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](https://www.boutvalentin.com).

Cet article est également disponible dans d'autres langues :
- [EN / English](https://dev.to/boutvalentin/figma-helps-why-my-elements-are-moving-when-changing-the-length-of-my-frame--151h)
- [IT / ITaliano](https://dev.to/boutvalentin/figma-aiuta-perche-i-miei-elementi-si-spostano-quando-cambio-le-dimensioni-del-mio-frame-4b5i)