Comment importer une maquette Figma dans Framer

Pour importer une maquette Figma dans Framer, installez le plugin gratuit Figma to HTML with Framer, sélectionnez les frames voulues, puis collez-les dans votre projet Framer. Framer conserve vos calques, vos groupes et votre structure, donc vous arrivez sur un vrai canvas web plutôt que sur un export de code figé. Tout ce qui suit le collage, c’est du nettoyage, et personne ne vous prévient que le nettoyage est le gros du travail.

Importer une maquette Figma dans Framer, étape par étape

Installez Figma to HTML with Framer depuis la Figma Community. Il est gratuit, et Framer annonce plus de 600 000 utilisateurs, donc c’est la voie officielle et pas un pont tiers. Sélectionnez les calques ou les frames à déplacer, puis lancez le plugin. Un message vous indique combien de calques ont été copiés. Passez sur votre projet Framer, cliquez sur le canvas et collez. La page Figma to HTML de Framer détaille les mêmes huit étapes : installer le plugin, copier vos maquettes Figma, coller dans Framer, continuer à éditer, rendre le tout responsive, ajouter effets et animations, ajouter des pages et des liens, publier.

Collez une section à la fois

Évitez de sélectionner la frame entière de la page pour tout déplacer d’un coup. Une landing page contient des centaines de calques, et quand quelque chose tombe de travers, vous n’avez aucun moyen de savoir quelle partie a posé problème. Collez le hero, corrigez le hero. Collez la bande de logos, corrigez la bande de logos. Descendez la page dans l’ordre où un visiteur la fait défiler. Framer dit franchement que certaines structures Figma complexes demandent un nettoyage pour le web, alors donnez-vous de petites unités à nettoyer.

Les polices, c’est la première chose à régler

La documentation de Framer est très directe là-dessus. Quand vous importez depuis Figma, une police personnalisée que Framer ne possède pas est remplacée par la police par défaut de Framer. Votre hero s’affiche d’un coup dans une sans-serif système, chaque longueur de ligne change, et vos espacements suivent. Réglez la typo avant de toucher à la mise en page. Ajoutez un calque de texte, ouvrez le sélecteur de police dans le panneau de droite, allez dans l’onglet Custom, cliquez sur Upload Fonts et envoyez votre fichier. Framer recommande le .woff2 pour la vitesse de chargement. Sélectionnez ensuite les calques de texte importés et réappliquez la police. Regardez d’abord la bibliothèque intégrée, parce que Framer embarque Google Fonts et Fontshare, et l’une des deux a peut-être déjà votre typo.

Ce qui passe, et ce qui reste sur le carreau

Les calques, les groupes et la hiérarchie passent. Les réglages de mise en page aussi : la leçon de la Framer Academy confirme que l’auto layout, la hiérarchie et les propriétés fill sont repris automatiquement. Ce qui reste sur le carreau, c’est tout ce que Figma n’a jamais eu : les breakpoints, les états au survol, les effets au scroll, ou les composants au sens Framer. La FAQ de Framer vous dit de remplacer les éléments statiques par de vrais composants après l’import. Prenez ça au sérieux. Reconstruisez votre nav, votre bouton et votre carte en composants Framer, au lieu de garder quarante copies collées que vous devrez modifier quarante fois.

Transformez les frames collées en stacks qui se redimensionnent

Une section collée qui garde des largeurs fixes en pixels va déborder sur un téléphone. L’article de dépannage de Framer en fait la cause la plus fréquente d’une page qui ne remplit pas l’écran sur le breakpoint Phone : un élément plus large que le viewport mobile, souvent une largeur fixe du genre 321 px, ou un Max Width réglé trop haut. Allez section par section, sélectionnez les conteneurs, et dans la partie Size du panneau de droite, passez Width d’un nombre fixe à 100% ou 1fr. Gardez le Max Width uniquement sur le conteneur de contenu, pour que votre colonne de texte reste lisible sur un grand écran. Faites-le d’abord sur Desktop, parce que les valeurs Desktop redescendent vers les breakpoints plus petits.

Ajoutez ensuite ce pour quoi Framer existe vraiment

C’est là que vous récupérez le bénéfice de Framer par rapport à un export de code. Réglez vos trois breakpoints. Donnez à vos boutons des états au survol et au tap. Ajoutez des apparitions au scroll sur les sections. Transformez les blocs répétés en composants, pour qu’une seule modification mette à jour toutes les instances. Construisez vos styles de texte dans le panneau Assets, sous Styles, avec des tailles par breakpoint pour Desktop, Tablet et Mobile, pour que la typo s’adapte sans que vous touchiez aux calques un par un. Rien de tout ça n’existait dans le fichier Figma. C’est cette partie qui transforme une maquette en page.

L’ordre dans lequel nous travaillons

Les polices d’abord, puis les couleurs et les styles de texte. Ensuite, section par section en partant du haut, en convertissant les largeurs fixes en fill au fur et à mesure. Créez des composants pour tout ce qui se répète. Réglez vos breakpoints ensuite, Desktop vers Tablet vers Phone, et ajoutez les interactions. Les métadonnées et les liens passent en dernier, une fois que la structure a arrêté de bouger. Cet ordre-là boucle une landing page en une journée. En travaillant dans le désordre, il en faut trois, parce que chaque correction défait la précédente.