L’expand est l’action interactive d’agrandissement ou de révélation progressive d’un élément pour révéler plus de contenu.
Elle est souvent accompagnée d’une animation pour une transition fluide et intuitive.
Dans Figma, « Expand » désigne l’action consistant à augmenter la taille visible d’un élément comme un panneau, une carte, un accordéon ou un groupe de calques afin de révéler du contenu supplémentaire initialement masqué ou condensé.
Cette interaction est couramment utilisée dans les interfaces pour :
- Gérer l’espace visuel (progressive disclosure),
- Réduire la charge cognitive,
- Maintenir la hiérarchie informationnelle.
Mise en œuvre dans Figma
- Créez deux états :
- État replié (collapsed) : hauteur réduite, contenu partiel ou indicateur visuel (ex. flèche).
- État déplié (expanded) : hauteur augmentée, contenu complet visible.
- Utilisez les composants avec variantes :
Créez un composant avec des variantes Collapsed / Expanded, contrôlées via une propriété personnalisée (ex.State = collapsed | expanded). - Ajoutez une transition (dans Prototype) :
- Type : Smart Animate
- Direction : Vertical (souvent)
- Durée : 200–300 ms pour une fluidité perceptible mais rapide
- Easing : Ease-in-out pour un mouvement naturel
Astuce : Pour que Smart Animate fonctionne correctement, les calques doivent avoir le même nom et la même hiérarchie dans les deux états.
Considérations accessibilité
- Indicateur visuel clair : icône + texte (ex. « Voir plus ») pour signaler l’interactivité.
- Contraste suffisant sur les éléments cliquables.
- Support clavier : dans le prototype interactif, simulez la navigation au clavier si possible (via outils externes ou documentation).
- Annonce ARIA : bien que Figma ne gère pas directement les rôles ARIA, documentez cette intention dans vos spécifications pour les développeurs (ex.
aria-expanded="false").
Cas d’usage typiques
- Accordéons de FAQ
- Cartes produit avec description détaillée
- Panneaux latéraux contextuels
- Sections “En savoir plus” dans les formulaires ou onboarding