Introduction
Le 16 avril 2024, Figma a lancé plusieurs nouveautés qui simplifient le travail de design et de développement. Parmi elles, les variables fonts facilitent nettement la communication entre Figma et Webflow. Voici comment elles améliorent votre workflow Figma-Webflow.
Que sont les variables for font dans Figma ?
Les variables fonts permettent de lier les propriétés suivantes à une variable de style typographique :
- Font family.
- Font weight.
- Font size.
- Line height.
- Letter spacing.
- Paragraph spacing.
Avec ces variables, les designers définissent des échelles typographiques uniformes et les appliquent de façon cohérente sur tous les supports. C’est ce qui garde un design system complexe homogène.
Comment utiliser ces variables sur les styles de font ?
Utiliser les variables fonts est très simple. Créez une variable, puis liez-la en cliquant sur le petit losange qui correspond à la fonction « lier une variable » dans Figma.
Les types de variables acceptés sont les suivants :
- Le type String (texte) sert pour la font family et la font weight.
- Le type Number sert pour la font size, la line height, le letter spacing et le paragraph spacing.
Quelle est la différence entre une variable et un style ?
Un style permet de combiner plusieurs variables. Les styles complètent donc les variables et offrent une méthode organisée pour définir l’apparence des typographies. Le style H1, par exemple, peut regrouper des variables pour la font size, la font weight et la line height.
Avec les variables for font, plus besoin de dupliquer les styles pour chaque support (ordinateur, tablette, mobile). La gestion du design system dans vos maquettes devient plus simple.
Avantages des variables pour les typographies
Pour les designers et développeurs
Pour le travail entre designers et développeurs, les principaux avantages sont les suivants :
- La cohérence visuelle se maintient sans effort sur l’ensemble de vos interfaces.
- L’efficacité augmente, car les allers-retours de relecture et de correction entre équipes diminuent.
Variables fonts dans Webflow
Webflow permet déjà d’utiliser des variables pour les textes. Pour en savoir plus, consultez notre guide complet sur la magie des variables Webflow.
Avec le plugin Figma to Webflow, vous modifiez la valeur d’une variable dans Figma et vous synchronisez les changements sur votre site Webflow en 1 clic. Vous voulez par exemple passer la taille de votre H1 de 64px à 96px ? Changez la variable dans Figma, lancez la synchronisation avec le plugin, et votre site est mis à jour immédiatement.
Conclusion
Les variables fonts rapprochent le design et le développement, avec des processus mieux intégrés et synchronisés. En les adoptant, vous améliorez la qualité de vos designs et vous accélérez leur réalisation. Vous gagnez en réactivité pour répondre aux besoins de votre audience.
Pour vous aider à comprendre et à utiliser ces fonctionnalités dans vos projets, nous vous partageons une vidéo de Figma. Elle présente les possibilités offertes et vous permet de faire évoluer vos workflows de design dès aujourd’hui.