<aside> 👉 Installer Figma

</aside>

Les bases à connaître

Frames

Les frames sont des conteneurs qui permettent de regrouper des éléments visuels et de les organiser dans l'espace de travail. Ils sont utilisés pour délimiter des zones spécifiques d'une conception et pour créer des hiérarchies visuelles.

Les frames permettent également de créer des prototypes interactifs en définissant des zones de déclenchement pour les interactions.

<aside> 👉 En savoir plus sur les frames avec Figma

</aside>

Auto-layout & contraintes

L’auto-layout

L’auto-layout et la gestion des contraintes font partie des fonctionnalités essentielles de Figma.

L'auto-layout de Figma permet de créer des designs flexibles qui s'adaptent automatiquement à différents contenus. Il est particulièrement utile pour les éléments de l'interface utilisateur qui doivent être redimensionnés en fonction du contenu, tels que les boutons et les listes. Avec l'auto-layout, vous pouvez également créer des grilles et des alignements automatiques pour faciliter le positionnement des éléments de l'interface utilisateur.

J’utilise énormément l'auto-layout et je vous conseille de le faire car il vous obligera à mieux penser vos différents espacements. Et cela vous permettra également de gagner du temps et assurer au mieux la cohérence de vos designs.

<aside> 👉 Si vous avez oublié comment fonctionne l’auto-layout, relisez la doc Figma

</aside>

auto-layout-panel.png

Les contraintes

Les contraintes permettent de définir des règles pour les éléments afin de les positionner et de les redimensionner en fonction des autres éléments, en particulier de son parent. Vous pouvez par exemple fixer la position en X et en Y d'un élément par rapport à un autre, ou bien la hauteur et la largeur d'un élément en fonction d'un autre.

<aside> 👉 Si vous avez oublié comment fonctionnent les contraintes, relisez la doc Figma

</aside>

file-GaUxHldxdw.png

S’entraîner avec Basti UI