Mise en page automatique Figma vs Flexbox et grille CSS : combler l'écart entre la conception et le code
Comment la disposition automatique Figma correspond à la boîte flexible et à la grille CSS (direction, espace, remplissage, étreinte, remplissage, enroulement) et où elles diffèrent, afin que les conceptions survivent au transfert.
À retenir
La mise en page automatique de Figma se comporte un peu comme la flexbox de CSS : la direction correspond à la direction flexible, l'espace à l'espace, le remplissage au remplissage, "Hug content" au dimensionnement par contenu, "Remplir le conteneur" pour flex-grandir ou pleine largeur, et envelopper pour flex-wrap. Le flux de grille de la mise en page automatique correspond à la grille CSS. Des différences apparaissent avec les tailles minimale et maximale, l'habillage du texte, l'alignement de la ligne de base et les points d'arrêt réactifs, alors vérifiez-les explicitement lors du transfert.
La cartographie
Le guide de Figma décrit les cadres de disposition automatique qui organisent les enfants par direction, espacement, remplissage et alignement, avec des flux horizontaux, verticaux et en grille et un habillage facultatif. Chacun a un équivalent CSS proche :
Câlin, remplissage et réparation
Dans Figma, un cadre défini pour épouser le contenu est redimensionné en fonction de ses enfants, et un enfant défini pour remplir le conteneur s'étire pour remplir l'espace disponible ; Figma note que si un enfant est prêt à se remplir, le parent ne peut plus le serrer dans cette direction. Dans CSS, les équivalents sont le dimensionnement basé sur le contenu (auto ou fit-content) et flex : 1 ou width : 100 %. Le guide flexbox de MDN explique comment flex-grow, flex-shrink et flex-basis distribuent l'espace, ce qui est le côté CSS de la même idée.
Où apparaît l’écart
La plupart des bugs de transfert proviennent de plusieurs domaines :
- Tailles minimale et maximale : définissez-les aux deux endroits, sinon le texte et les conteneurs se comportent différemment aux extrêmes.
- Texte : la hauteur de ligne, le retour à la ligne et la troncature diffèrent entre le rendu du texte Figma et le navigateur.
- Alignement de la ligne de base : CSS peut s'aligner par la ligne de base du texte ; vérifiez comment cela était prévu.
- Enfants absolus : « Ignorer la mise en page automatique » de Figma (anciennement position absolue) correspond à position : absolue dans un parent positionné.
- Réactivité : les cadres de mise en page automatique n'ont pas de points d'arrêt ; définir comment les mises en page changent à chaque largeur.
Grilles
Utilisez le flux de grille de mise en page automatique pour de véritables mises en page bidimensionnelles et mappez-le à la grille CSS, que MDN décrit comme un système de présentation du contenu en lignes et en colonnes. Les lignes flexibles encapsulées ne sont pas identiques à une grille : les éléments d'une ligne encapsulée ne s'alignent pas dans les colonnes.
Le mouvement est le plus grand écart
La mise en page correspond assez bien de Figma à CSS. Ce n’est pas le cas de Motion : les transitions prototypes doivent être reconstruites dans le code et les états sont souvent perdus. C'est la lacune des outils avec des environnements d'exécution, tels que ExodeUI (nous le fabriquons) et Rive, destinés aux composants interactifs.
Principes clés à retenir
- Direction de mise en page automatique, espace, remplissage et enveloppe de la carte vers flexbox
- Câlin ≈ dimensionnement du contenu ; Remplissage ≈ flex : 1 ou 100 % de largeur
- Le flux de grille correspond à la grille CSS
- Vérifiez les tailles min/max, le texte, les lignes de base et les points d'arrêt lors du transfert
- Le mouvement et les états constituent le plus grand écart entre la conception et le code
Questions fréquentes
Sources
- Guide to auto layout — Centre d'aide Figma
- Basic concepts of flexbox — Documents Web MDN
- Basic concepts of grid layout — Documents Web MDN