Comment préparer un fichier Figma qui se construit vite dans Framer

Préparez votre fichier Figma comme ceci. Frame desktop en 1200 de large. Auto layout sur chaque conteneur, y compris la frame extérieure. Décidez fill ou fixe pour chaque élément pendant que vous êtes encore dans Figma. Faites ça et une landing page passe dans Framer en un après-midi. Sautez l’étape et vous reconstruisez la moitié de la page à la main, ce qui fait la différence entre un build d’une journée et un build de trois.

Designez aux largeurs que Framer utilise vraiment

Le canvas de Framer arrive avec trois breakpoints, et ses pages produit montrent les onglets Desktop 1200 et Tablet 810. Le code publié sur framer.com correspond. Les images responsives sont servies avec des règles pour min-width 1200px, pour 810px jusqu’à 1199.98px, et pour max-width 809.98px. Construisez donc une frame desktop de 1200 de large. Ajoutez une frame tablette de 810 si la mise en page change vraiment à cet endroit. Ajoutez une frame téléphone autour de 390. Designez en 1440 en espérant que ça passe, et vous obtenez un hero qui ne tombe juste que sur votre propre écran.

De l’auto layout sur tout, y compris la frame extérieure

La leçon de la Framer Academy dit que l’auto layout, la hiérarchie et les propriétés fill sont repris à l’import. C’est toute l’astuce. Une section construite en auto layout arrive dans Framer comme un stack qui sait déjà se redimensionner. Une section construite en traînant des boîtes à la bonne place arrive en calques libres que vous devez reconstruire. Emballez chaque section dans un auto layout vertical. Emballez chaque ligne dans un auto layout horizontal. Utilisez des gaps plutôt que d’écarter les éléments avec du vide. Tout calque posé hors d’une frame en auto layout est un calque que vous construirez deux fois.

Tranchez fill ou fixe avant de livrer

Dans Figma, réglez le conteneur de section sur fill container. Donnez au conteneur de contenu interne une largeur maximale fixe, du genre 1200 ou 1140. Réglez les cartes d’une même ligne sur fill, pour qu’elles se partagent la largeur à parts égales. Ça se transpose directement dans Framer, où vous mettez Width sur 100% ou 1fr et Max Width sur le conteneur de contenu. L’article de dépannage de Framer dit qu’une largeur fixe ou un Max Width trop grand est la raison la plus fréquente pour laquelle une page ne remplit pas l’écran sur le breakpoint Phone. Chaque nombre fixe oublié dans Figma est un bug que vous transmettez.

Nommez vos styles de texte et réutilisez-les

Nommez votre typo et réutilisez-la : H1, H2, H3, corps large, corps, légende, surtitre. Dans Framer, vous les reconstruisez une fois dans le panneau Assets, sous Styles, puis vous les appliquez depuis le panneau de droite, sous Text et Styles. Chaque style de texte Framer peut porter ses propres tailles par breakpoint pour Desktop, Tablet et Mobile, avec la taille de police, l’interligne, l’interlettrage et l’espacement des paragraphes. Si votre fichier Figma contient quatorze tailles de titre légèrement différentes, vous construirez quatorze styles de texte ou vous vivrez avec une typo qui tombe mal sur mobile.

Vérifiez la licence de police dès le moodboard

Framer inclut Google Fonts et Fontshare, et vous laisse envoyer vos propres fichiers via l’onglet Custom du sélecteur de police. Framer vous demande aussi de vérifier que vous détenez la bonne licence avant d’envoyer une police sur un site. Une licence desktop couvre une maquette Figma. Elle ne couvre pas une page en ligne. Réglez ça pendant que vous choisissez la typo, pas la veille du lancement, parce que changer de police change toutes les coupures de ligne de la page.

Exportez les images à la taille où elles s’affichent

Framer compresse les images en WebP et AVIF au niveau du edge et les redimensionne pour chaque appareil, comme le documente sa page performance. Ça règle la livraison. Ça ne rattrape pas une capture d’écran collée en 4000 pixels de large, et ça ne transforme pas un logo PNG en SVG. Exportez les images matricielles à environ deux fois leur taille d’affichage. Utilisez du SVG pour les logos et les icônes. Écrivez le texte alternatif pendant que le contenu est encore frais dans votre tête.

La checklist de livraison du fichier Figma

Avant de déclarer le fichier Figma terminé, passez sept vérifications. La frame desktop fait 1200 de large. Chaque section est dans une frame en auto layout. Les conteneurs de section sont en fill, et les conteneurs de contenu portent la largeur maximale. La typo tourne sur des styles nommés, sans tailles orphelines. Les polices ont une licence web et les fichiers sont prêts à envoyer. Les images sont exportées à des tailles raisonnables, avec du SVG pour tout ce qui est vectoriel. Les noms de calques se lisent comme vous les voulez dans la liste de calques de Framer, parce que ces noms arrivent exactement comme vous les avez laissés.