01. Le contexte
Auto layout Figma rassemble les trois premiers projets réalisés en cours de Design UI utilisant l’auto layout. Pour chaque exercice, une capture d’écran d’une page existante servait de modèle à recréer (pour l’un d’entre eux, en noir et blanc, ce qui impliquait aussi de reconstruire un thème couleur cohérent à partir de zéro).
02. Le Défi
- Construire chaque page presque exclusivement en frames auto layout imbriquées les unes dans les autres, en ne sortant de cette logique que pour les éléments purement décoratifs
- Simuler un comportement responsive complet : passer du desktop au mobile avec des frames qui se redimensionnent et se réorganisent presque automatiquement, sans quasiment rien retoucher à la structure
- Utiliser des variables Figma pour centraliser les valeurs réutilisables (couleurs, espacements …) plutôt que les répéter manuellement
- Reconstruire un thème couleur cohérent à partir d’une capture en noir et blanc, pour l’un des trois exercices
Prototypes & illustrations
Une structure invisible qui rend tout cohérent, sans qu’on la remarque : c’est exactement ce que fait l’auto layout, et c’est aussi ce que fait le CSS. Pratiquer l’un m’a aidée à mieux comprendre l’autre.