Comment optimiser votre design system dans Figma ?

Nous sommes tous passés par là : démarrer un projet de design system, regarder par la fenêtre, sentir le poids de la tâche colossale qui vous attend. Rampes de couleurs, échelles typographiques, systèmes d'espacement — en tant qu'avocat du design, je sais qu'ils peuvent être immensément agréables à peaufiner, mais soyons honnêtes : ils peuvent prendre un temps fou à bien faire.

Après d'innombrables cycles de ce genre, j'ai découvert une combinaison d'outils et de plugins qui me font économiser des heures et enlèvent mes blue-500. Pensez à eux comme à vos copilotes de design system, chacun se spécialisant dans un aspect différent du parcours, du concept au code. Et il y a mieux encore ! Aujourd'hui, nous lançons 9 nouvelles fonctionnalités de design system qui répondent à certaines frustrations courantes. Découvrons ce qui a changé dans Figma et comment ces mises à jour rendent mes plugins préférés encore plus puissants.

Réorganisez facilement les modes et les collections

Si vous avez déjà essayé de réorganiser vos modes ou collections, vous savez qu'il n'est pas facile de les supprimer et de les recréer, seulement pour que les designs se désynchronisent. Ce n'est plus le cas : vous pouvez désormais facilement les faire glisser et déposer pour vous assurer que tout est exactement comme vous le souhaitez. Les modes et les identifiants restent intacts lors de la réorganisation, évitant les réinitialisations ou les dépendances rompues, et vous pouvez ajuster votre mode par défaut sans complication.

Cela peut sembler un détail, mais cela a un impact énorme pour les équipes qui veulent :

• Garder leurs collections les plus utilisées en haut
• Regrouper les modes liés ensemble
• Mettre à jour ou rebrander des gammes de produits

9 nouvelles améliorations de la qualité de vie

Aujourd'hui, nous livrons des mises à jour qui réduisent les frictions et accélèrent vos flux de travail :

• Nouvel raccourci pour accéder au composant principal, pour que vous puissiez accéder directement à la source
• Dupliquez et copiez les styles pour une itération plus rapide
• Les peintures de variables peuvent être masquées et affichées pour garder votre espace de travail dégagé
• Description améliorée des composants UI qui rend les choses plus faciles à lire en un coup d'œil
• Faites glisser le modal variable de l'en-tête entier pour un meilleur contrôle et accès
• Les changements de variables sont sauvegardés automatiquement, vous n'avez donc pas besoin de cliquerpour conserver vos mises à jour
• Infobulles sur les noms de composants vous donnent un contexte rapide lorsque vous passez la souris dessus
• Le bouton d'édition est maintenant correctement aligné pour une expérience plus nette et plus soignée
• Amélioration du dépassement du texte de la fenêtre de style pour s'assurer que les longs noms ne soient pas tronqués

Poser les fondations : réussir les bases

Maintenant, parlons des plugins qui améliorent encore ces fonctionnalités. Les plugins communautaires ont le potentiel de dynamiser des parties spécifiques de votre flux de travail. Voici les outils destinés à l'étape fondamentale de la construction d'un design system, lorsque vous commencez par la couleur et la typographie.

Création de palettes de couleurs

Notre propre Responsable Technique Jake Albaugh a créé CSS color-mix(), un plugin qui fonctionne comme un laboratoire de couleurs numérique. Générez des palettes complètes (avec des variables incluses) usant de formats modernes comme HSL, HWB, LCH, ou OKLCH. Il crée également des dégradés lisses et naturels qui passent magnifiquement entre les couleurs. Lorsqu'il est associé à Peppercorn (mentionné ci-dessous), vous pouvez créer un système à une vitesse remarquable dans Figma.

Utilisez CSS color-mix() pour prendre en charge les espaces colorimétriques modernes et générer des échantillons, des rampes de variables, et des remplissages unis ou dégradés.

Pour une génération rapide de rampes de couleur, Colorbox par Kevyn Arnott est mon outil de prédilection. Créez des échelles de couleurs en utilisant des filtres intuitifs pour la saturation, la luminosité et la teinte, puis exportez-les en JSON ou directement vers Figma. Une fois que vous avez créé votre palette, nos nouvelles fonctionnalités d’organisation des variables facilitent leur classement exactement comme vous le souhaitez.

UtilisezColorbox pour générer et ajuster des rampes de couleurs en quelques secondes, et exporter directement vers Figma ou JSON.

Enfin, si vous êtes à la recherche d'un générateur de palette de couleurs complet et conforme aux normes WCAG, Kevin Muldoon’sThe Genome Color Tool est préchargé avec des rampes de couleurs pour les couleurs primaires, secondaires, tertiaires, positives, négatives, de mise en valeur, d'attention, d’information, de système, et de neutralité dans votre système. Comme si cela ne suffisait pas, il dispose également de nombreuses palettes de couleurs de design systems familières préchargées — Univers, IBM Carbon, Salesforce Lightning, Adobe Spectrum, Ant, et Material — que vous pouvez également exporter au format JSON.

Utilisez The Genome Color Tool en tant que votre constructeur de couleur axé sur l'accessibilité.

Rationaliser les systèmes typographiques

Créer une échelle de type a toujours été un processus difficile. Peppercorn change cela entièrement. Configurez votre système de typographie complet — des titres au corps de texte — avec votre famille de polices préférée, la taille de base et le rapport d'échelle. L'aperçu en direct vous montre exactement ce que vous obtenez, et vous pouvez exporter du JSON ou du CSS. Avec la gestion améliorée des variables de Figma, votre système de typographie devient considérablement plus facile à entretenir.

Utilisez Peppercorn pour construire des systèmes de typographie complets et exporter tout ce dont les développeurs ont besoin.

Documentation : rendre votre système clair et accessible

Une fois que vous avez construit votre système, vous devez le documenter pour que nos partenaires designers et développeurs puissent le visualiser, l'adopter et l'implémenter dans toute sa splendeur. Ces plugins s'occupent des travaux fastidieux.

Créer des planches d’autocollants variables

Lorsque vous devez documenter des collections variables spécifiques, Print Variables par MINKMINKs crée de magnifiques planches de stickers ciblées. Cela inclut des descriptions des variables, ajoutant un contexte qui aide les membres de l'équipe à comprendre l'objectif de chaque valeur. Utilisez cela avec nos nouvelles fonctionnalités d'organisation des variables pour créer une documentation contextuelle et dynamique.

UtilisezPrint Variables pour créer d'adorables feuilles d'autocollants de vos variables, complètes avec des descriptions.

Pour une documentation complète, Auto Documentation par Eddy Salzmann génère des pages entières avec toutes vos variables, organisées par collection et mode. Avec notre prochaine capacité à réorganiser les collections et les modes, votre documentation correspondra parfaitement à votre organisation réelle.

UtilisezAuto Documentation pour créer des cadres de documentation répertoriant toutes vos variables par collection et mode.

Si vous recherchez quelque chose d'un peu plus dynamique, Variables and Styles List peut imprimer toutes vos variables dans le contexte d'un objet de canevas actualisable. Il est unique en ce qu'il utilise un widget et peut être mis à jour par le simple appui d'un bouton, contrairement à d'autres options qui nécessitent que l'ensemble du cadre soit régénéré à chaque fois que vous apportez une modification.

UtilisezVariables and Styles List pour garder un œil sur toutes vos variables en temps réel, se mettant à jour avec une simple pression de bouton.

Visualiser les variations de composants

Propstar par Gusso affiche chaque permutation de vos variantes et propriétés dans un tableau complet. Fini les clics à travers des combinaisons sans fin pour voir si tout fonctionne. Cela place un tableau complet de toutes les combinaisons sur le canevas, ce qui le rend beaucoup plus facile à voir les contours de vos composants soigneusement élaborés. Combiné avec la consolidation du panneau des propriétés de Figma, ce plugin vous aide à garder les choses spécifiées comme un Propstar.

UtilisezPropstarpourcartographier chaque permutation possible de vos variantes de composants dans un tableau ordonné.

Besoin de documenter tout sur vos composants ? Specs par Directed Edges Plugins crée des décompositions complètes — variables, styles, composants imbriqués, valeurs de propriétés, et plus encore. C'est un guichet unique pour une feuille de spécifications complète.

UtilisezSpecs pour rassembler chaque détail sur vos composants — des variables aux éléments imbriqués — dans une documentation limpide.

Audit de votre design system

Pour scanner des documents couche par couche, ou propriété par propriété, je recommande vivement Similayer. Il m'a honnêtement sauvé des centaines d'heures lors de l'audit et la migration entre les design systems. Il a même été utilisé sur le Figma UI3 community file lors de sa migration de la mise en scène à la production.

UtilisezSimilayer pour trouver des calques spécifiques dans vos conceptions, qu'ils soient basés sur la hauteur de ligne, la couleur, le nom de calque ou tout ce qui précède.

Lors de la maintenance ou de la mise à jour des design systems, Style Finder de Tafumi est une bénédiction pour nous. Ce plugin scanne l'ensemble de votre document et répertorie chaque instance d'un style ou d'une variable. Il m'a sauvé d'innombrables heures de recherches fastidieuses et a rendu la maintenance du système beaucoup plus gérable.

Utilisez Style Finder pour retrouver chaque incidence de chaque style dans tous vos fichiers.

Au fur et à mesure que votre système se développe, le nombre de vos variables augmentera également. Nous devons souvent changer d'avis sur une convention de nommage, ce qui signifie des heures d'efforts manuels pour mettre à jour nos ensembles existants. CTRL Var: Rename Variables par Murph est notre sauveur ici, avec le plugin offrant une chance de renommer en lot en utilisant le regroupement ou le modèle de variable.

UtilisezCTRL Var: Rename variablespour modifier les noms de vos variables locales dans toutes les collections.

Implementation : Relier conception et développement

Le dernier défi consiste à intégrer efficacement votre design system dans le code. Nous pouvons aller très loin avec les étapes précédentes, mais nous pouvons aussi optimiser le processus en traduisant nos designs en code, assurant ainsi la parité avec le développement.

Export Import Variables par Jan Toman sert de pont entre Figma et le développement. Importez des tokens existants de votre équipe d'ingénierie ou exportez vos variables Figma en JSON. Si vous n'avez pas de fichier JSON opérationnel, ce plugin vous permet également d'exporter depuis Figma—un double bonus gagnant. Avec nos nouvelles fonctionnalités d'organisation des variables, vos tokens exportés conserveront la structure à laquelle vos développeurs s'attendent.

Utilisez Export Import Variables pour combler l'écart pour les jetons de design entre Figma et le développement.

En parlant d'exportation, si votre équipe d'ingénierie travaille spécifiquement avec CSS et que vous souhaitez un moyen rapide de copier et coller les valeurs des jetons en tant que variables, consultez Handoff par Convertiv. Celui-ci obtient un point bonus pour le design très propre du plugin — ils parviennent à intégrer tant d'informations tout en le gardant facile à utiliser.

Utilisez Handoff pour créer un aperçu vivant de votre design system afin que les développeurs puissent voir exactement comment les composants doivent apparaître et se comporter.

Pour des exports de code rapides, Variables Converter de Laurent Thiebault transforme vos variables Figma en plusieurs formats : CSS, JavaScript, Compose et SwiftUI. Sélectionnez votre collection et mode, et cela génère un code propre et prêt à l'emploi. Ce processus devient encore plus fluide avec notre organisation améliorée des variables.

Utilisez Variables Converter pour traduire les variables Figma en divers dialectes de code—du CSS à SwiftUI.

Si vous cherchez à créer une fiche technique ou un extrait de code de variables CSS complet en dehors de Figma tout en voyant un aperçu sur un ensemble commun d'éléments, consultez Shaper. Cet outil web est un personnaliseur à grande échelle, où vous pouvez définir votre famille de polices, votre valeur de rembourrage, vos échelles d'espacement, et votre couleur primaire dans une fenêtre d'aperçu puis obtenir le CSS quand vous avez terminé—il fournit même des valeurs en mode sombre.

Utilisez Shaper pour peaufiner les styles d'interface en temps réel tout en générant un code CSS propre qui fonctionne en modes clair et sombre.

Quels sont les outils de votre boîte à outils ?

En réunissant tous les éléments, voici comment j'aborde un nouveau projet de design system en utilisant ces outils et fonctionnalités :

1. Construisez les fondations avec CSS color-mix() et Peppercorn
2. Organisez tout avec les nouvelles capacités de réorganisation de Figma
3. Documentez minutieusement en utilisant Auto Documentation et Specs
4. Audit de cohérence avec Style Finder
5. Transférez au développement en utilisant Export Import Variables

Je ne sais pas pour vous, mais je me sens efficace. Avec ces mises à jour de design system, plugins et widgets, nous sommes garantis de gagner des heures sur le travail des design systems. Cela signifie plus de temps à consacrer à moudre ces grains de café que vous avez achetés sur le marché le week-end dernier. (un café au lait d'avoine ici, s'il vous plaît !)

Quels plugins utilisez-vous pour votre travail de design system ? Contactez-nous sur X pour continuer la conversation. Et n’oubliez pas de consulter nos dernières fonctionnalités : votre design system vous remerciera.