Si vous travaillez sur Figma, il vous est peut-être déjà arrivé d’avoir l’erreur “Missing Fonts”. Une erreur très embêtante, car elle vous empêche de modifier votre texte. Dans notre article du jour, nous allons voir comment régler le problème des polices manquantes dans Figma.
Si vous travaillez sur Figma, il vous est peut-être déjà arrivé d’avoir l’erreur “Missing Fonts”. Une erreur très embêtante, car elle vous empêche de modifier votre texte.
Dans notre article du jour, nous allons voir comment régler le problème des polices manquantes dans Figma.
1. Repérer l’erreur “Missing Fonts” dans Figma
Avant de commencer à vous présenter les différentes solutions pour fixer cette erreur de polices manquantes dans Figma, nous allons vous décrire à quoi elle est due.
Figma est un outil de design no-code collaboratif. L’outil permet entre autres de réaliser des wireframe (Construire un Wireframe dans Figma) et de développer des maquettes de sites web ou applications mobile. Ainsi, vous pouvez travailler en équipe (UX Designer, UI Designer, etc.) sur un même fichier Figma et même partager le fichier au client en lecture seule. Travailler à plusieurs sur un même fichier en temps réel est un gros avantage, cependant, il peut y avoir quelques inconvénients.
Un des problèmes les plus fréquents, connus et agaçant de Figma concerne les polices. En effet, en travaillant en équipe ou en dupliquant un template Figma, vous pouvez vous retrouver face à des polices que vous ne possédez pas sur votre appareil. On peut le repérer au petit encadré jaune avec écrit “A ?” en cliquant sur un texte. Ce problème est frustrant car on ne peut plus toucher aux textes qui ont cette police.
Dans notre exemple, nous pouvons voir que nous ne possédons pas la police (font) Helvetica Neue. On ne peut donc plus modifier notre texte.
2. Les solutions pour fixer l’erreur de polices manquantes dans Figma
Solution n°1 : Modifier la/les police(s) du texte
La première solution pour fixer le problème de polices manquantes consiste à modifier la police de tous les textes comprenant cette erreur. Une solution qui n’est pas forcément optimale, mais qui a le mérite d’être simple et rapide.
Pour réaliser cela, vous pouvez sélectionner votre texte. Dans l’onglet Design, là où il y a l’erreur “Missing Fonts”, dans la section “Text”, vous n’avez qu’à saisir le nom d’une autre police.
Si vous souhaitez choisir une police similaire à celle que vous ne possédez pas, vous pouvez vous rendre sur le site WhatFontIs dans l’outil Similar Font. Vous n’avez qu’à rentrer le nom de police que vous n’avez pas et le site vous proposera une liste de polices similaires.
Dans notre exemple, nous ne possédons pas la police Helvetica Neue. Nous nous rendons sur le site WhatFontIS, nous cherchons “Helvetica Neue”.
Nous voyons que la police “Gothic A1 Black” est similaire à “Helvetica Neue”. On retourne dans notre fichier Figma et on change notre police par la nouvelle.
L’erreur “Missing Fonts” de Figma a disparu et je peux modifier mes textes.
Solution n°2 : Télécharger la/les police(s) manquante(s) (Missing Fonts)
La seconde solution, un peu plus technique, consiste à télécharger les polices manquantes. Dans notre exemple, nous téléchargerons la police “Helvetica Neue”.
Il existe plusieurs sites pour télécharger des polices gratuitement (Dafont.com, Myfonts.com,...). Pour notre cas, nous nous rendons sur le site freefontsfamily.com.
Nous recherchons la police (Helvetica Neue) et la téléchargeons.
Dans vos téléchargements, vous allez avoir un fichier zip du nom de votre Font qu’il faudra décompresser. Une fois décompressé, vous obtenez un fichier que vous pouvez ouvrir. Dans ce fichier, vous trouverez les différentes variantes de votre police. Vous pouvez toutes les sélectionner (Ctrl/Cmd + A), faire un clic droit et cliquer sur “installer”.
Pour être sûr que l’installation des polices soit effective, vous devez redémarrer votre ordinateur. Ensuite, retourner dans votre fichier Figma et modifier votre texte comme vous le souhaitez.
Voilà, vous savez maintenant comment faire pour régler le problème de polices manquantes dans Figma.
Si vous souhaitez convertir votre fichier Figma en projet Webflow, vous pouvez contacter notre agence no-code. Vous pouvez également lire notre article pour optimiser son Style Guide sur Figma pour Webflow.
5 outils pour trouver la famille de polices idéale
