CSS Grid vers Figma : Ce Qui Survit à la Conversion en Calques

CSS grid se traduit dans le flux grid auto layout de Figma presque propriété par propriété. Les tracks deviennent des tracks. Les spans deviennent des spans. Le gap devient du gap. Deux notions propres à CSS, grid-template-areas et subgrid, n'ont pas d'équivalent natif dans Figma, elles sont donc reconstruites ou aplaties. Cette référence passe en revue ce qui se transpose directement, ce qui ne se transpose pas, et ce qui se passe quand une grille importée est trop complexe pour être reproduite comme un layout fonctionnel.

Comment les tracks de CSS grid deviennent des tracks Figma

Une page construite avec display: grid arrive dans Figma sous la forme d'un frame réglé sur le flux grid auto layout. L'essentiel de ce qui définit cette grille en CSS trouve une place directe dans les contrôles de grille de Figma. Le grid auto layout de Figma organise un frame en lignes et colonnes, appelées tracks, exactement comme grid-template-columns et grid-template-rows le font en CSS. Un objet qui s'étend sur plusieurs cellules dans la source, défini avec grid-column ou grid-row, devient un objet avec une valeur Column span ou Row span dans Figma. On y arrive en réglant l'objet sur fill container, puis en le redimensionnant jusqu'aux bords des cellules.

Le reste des propriétés courantes se transpose presque aussi proprement :

Une différence mérite d'être notée : justify-items et align-items en CSS fixent l'alignement pour tout le conteneur en une fois, alors que Figma applique cet alignement objet par objet à l'intérieur de sa cellule. Le résultat visuel correspond généralement, mais une grille importée peut finir avec chaque objet portant son propre réglage d'alignement au lieu d'une seule règle au niveau du frame.

L'unité fr est facile à manquer, elle mérite donc sa propre mention. En CSS, 1fr 2fr répartit l'espace disponible à un tiers pour la première colonne et deux tiers pour la seconde. Dans Figma, ce même ratio vient du réglage d'un track sur fill container plutôt que sur une taille fixe, donc une colonne qui utilisait fr dans le CSS source devrait arriver en se redimensionnant avec ses voisines plutôt qu'en restant à une largeur fixe. Selon le jeu de données actuel de caniuse, CSS grid bénéficie de 96,89 pour cent de support global dans les navigateurs, avec un support complet depuis Chrome 57, Firefox 52 et Safari 10.1. Presque toutes les pages qu'un designer importe aujourd'hui reposent sur du vrai CSS grid, pas sur un repli flexbox ou tableau.

Ce que CSS grid possède et que le grid auto layout de Figma n'a pas

Deux notions de CSS grid n'ont pas d'équivalent natif dans Figma. Savoir lesquelles fait gagner du temps en vérifiant l'import.

grid-template-areas. CSS permet de nommer des régions d'une grille avec une syntaxe en art ASCII et de placer des éléments par nom de région plutôt que par numéro de ligne et colonne. Le grid auto layout de Figma n'a pas de système de nommage équivalent. Quand une page utilise grid-template-areas, l'import reconstruit la position de chaque élément sous forme de span explicite de colonne et de ligne. Cela reproduit le layout, mais fait perdre le mappage lisible par nom de région qu'un développeur verrait dans le CSS.

subgrid. La référence CSS grid de MDN décrit grid-template-columns: subgrid comme un moyen pour une grille imbriquée d'hériter des tracks de son parent, afin que les éléments de l'enfant s'alignent automatiquement sur les lignes de grille du parent. Figma n'a aucune notion de subgrid. Un layout avec subgrid arrive sous forme de deux frames de grille aux tracks indépendants, un parent et un enfant imbriqué, chacun avec son propre gap et padding, selon le guide auto layout de Figma. Les deux frames ne restent pas alignés entre eux comme ils l'étaient dans le navigateur. Cet alignement doit être reconstruit à la main.

grid-auto-flow, la propriété qui contrôle comment CSS place les éléments qui tombent hors de la grille explicite, ne se transpose pas non plus comme un réglage nommé. Figma se rapproche de son propre chef du même placement de gauche à droite, de haut en bas, avec un réagencement automatique quand un objet est supprimé. Mais le dimensionnement implicite des tracks que contrôlent grid-auto-rows et grid-auto-columns en CSS n'a pas de champ explicite à vérifier ensuite.

Quand l'import ne peut pas reproduire la grille

Tout workflow de capture vers Figma finit par rencontrer un frame qu'il ne peut pas reconstruire comme une grille fonctionnelle. En général, le CSS repose sur quelque chose pour lequel le modèle de layout de Figma n'a pas de place : grid-template-areas combiné à des régions qui se chevauchent, par exemple, ou un subgrid imbriqué sur plusieurs niveaux. Quand cela arrive, l'approche raisonnable est un repli sur le positionnement absolu. L'objet conserve sa taille et son emplacement capturés, mais il cesse de se comporter comme un track réactif et doit être traité comme fixe.

UnHTML suit exactement ce schéma quand il convertit une page. Il transpose les layouts flex et grid du CSS réel de la page vers l'auto layout natif de Figma, et quand un frame ne peut pas reproduire la géométrie capturée, il bascule de lui-même sur le positionnement absolu plutôt que de deviner une grille cassée, avec le changement noté dans le rapport d'import. Ce même rapport consigne aussi les substitutions de polices. Une police manquante est remplacée par défaut par Inter, et comme les cellules de grille sont parfois dimensionnées selon les mesures d'une police précise, une police substituée peut modifier la façon dont une ligne ou une colonne se réorganise, même quand la structure de la grille elle-même s'est importée proprement.

Rien de tout cela ne fait du résultat un clone pixel pour pixel de la page originale. Ce n'est d'ailleurs pas l'objectif. grid-template-areas et subgrid sont les deux endroits où un designer devrait s'attendre à passer quelques minutes à reconstruire des relations que CSS exprimait gratuitement. Tout le reste dans le tableau ci-dessus devrait déjà être à sa place.

Une checklist rapide pour les pages chargées en CSS grid

Quelques vérifications éliminent l'essentiel des tâtonnements lors de la relecture d'un import de grille :

1. Cherchez d'abord grid-template-areas dans le CSS source. S'il est présent, attendez-vous à ce que le frame importé contienne des spans explicites plutôt que des régions nommées, et à perdre le mappage lisible entre le nom d'une région et son contenu jusqu'à ce que vous renommiez les calques vous-même.
2. Cherchez ensuite subgrid. Une section avec subgrid arrive sous forme d'un frame parent et d'un frame enfant aux tracks séparés. Vérifiez que les deux restent alignés visuellement, et ajustez le gap ou le padding de l'enfant s'ils ont dérivé.
3. Vérifiez toute colonne ou ligne qui utilisait fr. Confirmez que le track Figma correspondant est réglé sur fill container, pas sur une largeur fixe, sinon redimensionner le frame plus tard ne réagencera pas le contenu comme le faisait la page d'origine.
4. Ouvrez le rapport d'import avant de toucher aux calques. Une substitution de police comme un repli sur le positionnement absolu y apparaissent, et l'un ou l'autre peut expliquer une ligne qui paraît légèrement décalée avant même de chercher la cause.
5. Traitez justify-items et align-items comme une vérification par objet, pas par frame. Parce que Figma applique cet alignement à chaque objet à l'intérieur de sa cellule plutôt qu'une seule fois au niveau du conteneur, changer l'alignement d'un élément ne se répercute pas sur ses voisins comme le ferait modifier la règle CSS.

Aucune de ces étapes n'exige de toucher au CSS lui-même. Ce sont les cinq mêmes choses qui valent la peine d'être vérifiées sur n'importe quel import chargé en CSS grid, que la grille vienne d'une page marketing, d'un dashboard, ou d'un layout éditorial avec plusieurs régions imbriquées.

Conclusion

L'essentiel de ce que fait un layout CSS grid trouve une place directe dans le grid auto layout de Figma : les tracks deviennent des tracks, les spans des spans, le gap du gap, et l'unité fr du dimensionnement fill container. Les deux vrais manques sont grid-template-areas, qui perd ses noms de région et se reconstruit en spans, et subgrid, qui arrive sous forme de frames imbriqués séparés plutôt que d'un système aligné. Une page qui s'appuie sur l'un des deux est la première à vérifier après un import.

UnHTML applique exactement ce mappage grid vers auto layout sur des pages réelles, et sa page tarifaire comprend un niveau gratuit plafonné à 500 calques plus une mise à niveau Pro à paiement unique qui supprime ce plafond.