Comment ajouter une police sur Figma ?

Avant de commencer, un compte Figma actif, l'accès au fichier concerné et les droits d'édition sont nécessaires. Comprendre à quoi sert Figma et comment l'outil fonctionne permet d'éviter les erreurs les plus fréquentes en matière de polices.

Figma et la gestion des polices : ce qu'il faut savoir

Figma fonctionne comme un outil en ligne, mais il lit les polices installées localement sur l'ordinateur de chaque utilisateur. Cette particularité surprend souvent les nouveaux venus : sans installation locale, une police personnalisée ne peut tout simplement pas apparaître dans l'interface. C'est une spécificité technique propre à Figma, qui le distingue d'autres logiciels cloud où les polices sont directement hébergées et partagées côté serveur. Il faut donc garder en tête que chaque poste de travail doit être configuré individuellement.

Différence entre police système et police personnalisée

Une police système est préinstallée sur l'ordinateur ou le système d'exploitation, comme Arial ou Times New Roman sur Windows, ou Helvetica sur Mac. Elle est disponible immédiatement, sans démarche particulière. Une police personnalisée, en revanche, est téléchargée depuis une source externe, souvent Google Fonts, Adobe Fonts ou un fichier fourni par une charte de marque. Par exemple, la police "Poppins" récupérée sur Google Fonts constitue une police personnalisée qui nécessite une installation manuelle avant utilisation sur Figma.

Utiliser une police déjà disponible dans Figma

C'est le cas le plus simple à traiter. Figma propose par défaut une large bibliothèque de polices gratuites, suffisante pour de nombreux projets sans installation complémentaire.

Sélectionner une police depuis la bibliothèque Figma

Pour accéder au panneau de texte, il suffit de sélectionner un calque texte existant ou de créer un nouveau bloc avec l'outil texte. Le panneau de droite affiche alors les propriétés typographiques. Il faut cliquer sur le nom de la police actuelle pour ouvrir le menu déroulant, qui liste toutes les polices disponibles localement et celles intégrées par défaut à Figma. Une recherche rapide permet de retrouver une police courante comme Inter ou Roboto, très utilisées pour leur lisibilité sur écran.

Personnaliser le style et le poids de la police

Une fois la police choisie, il est possible d'ajuster son poids : light, regular, medium ou bold, selon les variantes disponibles. Le panneau permet également de modifier la taille du texte, l'interligne et l'espacement entre les lettres. Ces réglages ne sont pas de simples détails esthétiques : ils influencent directement la lisibilité du contenu et la cohérence visuelle globale d'une interface ou d'un support de communication.

Ajouter une nouvelle police personnalisée sur Figma

Cette partie constitue l'étape la plus technique du guide. Contrairement à d'autres logiciels, Figma ne permet pas d'importer directement un fichier de police depuis l'interface : plusieurs étapes intermédiaires sont nécessaires pour y parvenir correctement.

Choisir et télécharger le fichier de police

Les formats compatibles avec Figma sont l'OTF, le TTF et le WOFF. Pour trouver une police fiable, il est recommandé de passer par des sources reconnues comme Google Fonts, Adobe Fonts ou directement le site d'une fonderie typographique. Un point de vigilance essentiel : il faut toujours vérifier les droits d'utilisation et la licence associée à la police, surtout dans un cadre professionnel ou commercial.

Installer la police sur son ordinateur

Sur Mac, l'installation passe par l'application "Livre des polices" (Font Book) : il suffit de double-cliquer sur le fichier téléchargé puis de cliquer sur "Installer la police". Sur Windows, un clic droit sur le fichier suivi de l'option "Installer" suffit généralement. Dans les deux cas, il est indispensable de redémarrer Figma après l'installation pour que la police soit correctement détectée par l'application.

Installer Figma Font Helper (assistant de police)

Figma Font Helper est l'outil officiel conçu pour synchroniser les polices installées localement avec l'application Figma. Il se télécharge directement depuis le site officiel de Figma, dans la section dédiée aux polices locales. L'installation se fait comme n'importe quel logiciel classique, en suivant les instructions à l'écran. Un point important à retenir : cet assistant doit rester actif en arrière-plan pendant toute la session de travail, sinon les polices personnalisées ne seront pas détectées par Figma, même si elles sont bien installées sur l'ordinateur.

Importer la police dans un fichier Figma

Une fois Font Helper lancé et la police installée, il suffit d'ouvrir le menu déroulant des polices dans le panneau de texte pour la retrouver, généralement classée avec les polices locales. Pour tester son bon fonctionnement, on peut créer un calque texte simple et lui appliquer la nouvelle police. Si tout est correctement configuré, elle apparaît automatiquement dans la liste, sans manipulation supplémentaire grâce à Font Helper.

Utiliser sa police dans un projet Figma

Une fois l'installation terminée, place à la mise en pratique. Structurer l'usage typographique dans un projet garantit une cohérence visuelle sur l'ensemble des écrans et documents produits.

Appliquer la police à un texte

Pour appliquer la nouvelle police, il faut sélectionner le calque texte concerné, puis choisir la police dans le menu déroulant du panneau de droite. Un titre peut ainsi recevoir une police en gras et de grande taille, tandis qu'un corps de texte utilisera une variante plus légère et plus petite. Cette distinction renforce la cohérence typographique attendue dans toute charte graphique sérieuse.

Créer un style de texte réutilisable

Figma permet de créer des "text styles" afin d'éviter de reconfigurer manuellement chaque élément textuel. Il suffit de définir les propriétés souhaitées, puis de cliquer sur l'icône de style dans le panneau texte pour l'enregistrer sous un nom clair, comme "Titre H1" ou "Body text". Cette fonctionnalité facilite grandement la collaboration en équipe et garantit la cohérence d'un design system, un point déterminant lorsque la maquette doit ensuite devenir un site en ligne : c'est exactement la méthode que nous appliquons pour la création de sites vitrines à Lyon.

Problèmes courants et solutions

Certaines difficultés reviennent régulièrement lors de l'ajout de polices sur Figma. Voici un récapitulatif pratique des situations les plus fréquentes.

La police n'apparaît pas dans Figma

Plusieurs causes peuvent expliquer ce problème : Font Helper non lancé, police mal installée ou cache non actualisé. Voici les solutions à tester dans l'ordre :

• Vérifier que Figma Font Helper est bien actif en arrière-plan
• Réinstaller le fichier de police depuis le début
• Fermer complètement Figma puis le relancer
• Redémarrer l'ordinateur si le problème persiste

Dans la grande majorité des cas, un simple redémarrage de Figma et de la machine résout le souci.

La police ne s'affiche pas correctement pour les collaborateurs

Chaque membre de l'équipe doit installer individuellement la police et Font Helper sur son propre poste, sinon le rendu diffère d'un écran à l'autre. Pour éviter ce type d'incohérence, il est conseillé de partager le fichier de police en interne, via un espace commun, et de documenter précisément son utilisation dans le design system du projet. Une bonne organisation collective reste la meilleure garantie contre les décalages visuels entre collaborateurs sur un même fichier Figma.