Icônes flèche noirecliquez ici
Accueil > Académie

Auto Layout : Comment créer un design dynamique sur Figma

Sommaire

🧐 Qu’est-ce qu’une card ?

Une card (carte en français) est un composant de l'interface utilisateur qui crée un groupe visuellement distinct d'informations logiquement liées.

Elle se compose généralement :

  • d'un titre
  • d'un court morceau de description (résumant le contenu de la page résultante)
  • d'une image
  • d'un appel à l'action

Mais son contenu varie surtout du contexte dans lequel elle est utilisée.

💡 Un peu de contexte

Imaginons que nous sommes en train de concevoir un site de location d’hébergement de luxe. Pour présenter les différents logements sur une page liste nous allons utiliser des cards. Cela permettra de donner un avant-goût et les informations principales aux visiteurs.

🛠️ En pratique

Étape 1 : Créer les éléments qui vont se trouver dans le composant

Dans notre exemple nous allons avoir besoin :

  • d’une image (420x260px)
  • d’un titre (26px)
  • d’une courte description (16px)
  • de tags (typo 12px, padding left/right 16px, padding top/bottom 8px)
  • d’un bouton (typo 18px, padding left/right 24px, padding top/bottom 16px)

Étape 2 : Ajouter une structure automatique

Sélectionner tous les éléments et appliquer une structure automatique.

Pour cela, deux méthodes :

  • Je sélectionne tous les éléments, clique droit, “add auto-layout”
  • Je sélectionne tous les éléments, shift + A

Étape 3 : Créer un système d’espacement

Après avoir ajouté une couleur de fond ainsi qu’une légère ombre portée pour y voir plus clair, il est temps de définir les valeurs d’espacement/padding de notre card.

Ici j’ai opté pour un système très simple de 32px partout.

Étape 4 : Paramétrer le comportement des éléments

Pour que notre card fonctionne correctement il ne faut pas oublier de paramétrer les différents éléments pour anticiper leur comportement.

→ L’image devra être en width FILL, height FIX

→ Les textes devront être en width FILL, height HUG

→ Les tags devront être en width FILL, height HUG

→ Le bouton, width FILL, height HUG

Étape 5 : Ajouter des valeurs minimales & maximales

Enfin, pour s’assurer qu’il n’y ait pas d’utilisation disproportionnée de notre card nous allons lui imposer des valeurs minimales et maximales.

Sélectionnez votre card

Cliquez sur le chevron à côté de W

Cliquez sur “Add Min Width” et définissez une valeur minimale (par exemple 300px)

Cliquez sur “Add Max Width” et définissez une valeur maximale (par exemple 620px)

Étape 6 : Vérifier le comportement du composant

Votre card est fin prête ! Vérifiez tout de même que le comportement de resize se passe bien, mais si vous avez suivi ce tuto à la lettre, ça devrait le faire 😎


DERNIERS TUTORIELS

Découvrez nos autres tutoriels publiés récemment

Créer un effet holographique sur Figma

Figma

Créer un bouton avec un effet glowy sur Figma

Figma

Auto Layout : Comment créer un design dynamique sur Figma

Figma

Envie de recevoir du contenu exclusif ?

Nous vous envoyons un condensé d’informations UX, Webdesign, Webflow et Bonus 1 fois par mois dans votre boîte mail.