10 plugins Figma pour concevoir vos sites Drupal

Notre pile de développement Drupal est composée d'un profil d'installation Drupal 10, maintenu, et d'un starter thème reposant sur la méthode dite "atomic design" et le framework TailwindCSS. Nous nous efforçons de concevoir les interfaces de nos projets, le plus souvent "orientés mobiles" (mobile first) en utilisant les composants déclinés du système de design (design system) de nos clients. Nous travaillons par conséquent à rationnaliser la méthode pour gagner en performance de développement et rendre nos projets moins coûteux.

Si l'optimisation de la pile technique et de la méthode de développement sont importants, notre équipe de conception se concentre, avec le même état d'esprit, à optimiser les efforts de conception en amont. Avec Figma, il est possible de gagner du temps, d'économiser de l'énergie et surtout de fluidifier, faciliter la transmission des éléments à l'attention des développeurs et des intégrateurs. La liste des plugins cités ci-après est vivante. Nous nous efforçons de la mettre à jour à fréquence régulière. Et nous ne manquerons pas de vous le faire savoir...

1. Unsplash

Unsplash est une bibliothèque de photos libres de droits qui propose une large sélection d'images, et de vidéos. Grâce a son plugin Figma vous pourrez facilement insérer des images de haute qualité dans vos design, sans avoir à demander l’autorisation de l’auteur.

Découvrir Unsplash

2. Tailwind CSS Color Generator

Tailwind CSS Color Generator permet de générer des palettes de couleurs Tailwind CSS à partir d'un code hexadécimal, d'une couleur HSL ou d'une couleur aléatoire.

Cela permet de faciliter la collaboration entre le pôle conception et le pôle front, qui utilisent la technologie Tailwind CSS pour le développement de nos interfaces utilisateurs.

Vous pourrez alors générer une palette de couleurs complète avec des couleurs pour les nuances 50 à 900. C’est un excellent outil pour les designers car il facilite la communication avec les développeurs et permet de créer des palettes de couleurs cohérentes pour vos projets

Découvrir le plugin Tailwind CSS Color Generator
En savoir plus sur Tailwind CSS Color Generator

3. Stark Accessibility Tools

Dans une optique de design plus accessible, le plugin Stark Accessibility Tools permet de vérifier l'accessibilité de vos interfaces. Il permet de détecter les problèmes d’accessibilité, tels que :

• Contraste de couleurs insuffisant ;
• Lisibilité des textes ;
• Navigation par tabulation ;
• Images sans texte alternatif ;
• Eléments manquants ;
• Focus order incorrect.

Ce plugin nous aide à remplir les contraintes d’accessibilité du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) basé sur les recommandations de la norme internationale WCAG 2.1, qui définit les critères d'accessibilité à respecter pour que les contenus numériques soient accessibles à tous.

Vous pourrez  générer un rapport d’accessibilité et le partager avec d’autres membres de votre équipe ou avec vos clients.

Découvrir Stark Accessibility Tools

4. Clean Document

Le plugin Clean Document permet d'organiser et de nettoyer votre document Figma. Il vous aide à supprimer les éléments inutiles, à renommer les couches de manière intelligente et à aligner les éléments.

Grâce à ce plugin vous garderez vos projets Figma organisés et propres.

Découvrir Clean Document

5. TinyImage Compressor

Le plugin Figma TinyImage permet de réduire la taille des images dans vos designs Figma. Il permet de compresser les images JPEG, PNG, SVG, WebP, AVIF, GIF et PDF, et de réduire leur taille jusqu'à 95%.

La compression des images est essentielle dans le cadre de notre démarche d’éco-conception basée sur les 115 critères du Green IT . Ce plugin est un excellent outil pour les designers qui souhaitent réduire le poids de leurs images.

Pour en savoir plus sur l’impact environnemental d’un site web et les bonnes pratiques pour le limiter, vous pouvez consulter notre post, qui décrit notre méthode en matière d'éco-conception de sites Drupal.

Découvrir TinyImage Compressor

6. Streamline Icons

Le plugin Streamline Icons permet de rechercher et d’insérer des icônes dans vos designs Figma. Il offre une grande variété d’options pour vous aider à trouver les icônes parfaites pour votre projet. Il propose la recherche, le filtrage, la prévisualisation et l’importation d’icônes.

Découvrir Streamline Icons

7. Master

Le plugin Master permet de créer des composants réutilisables en quelques clics. Un composant est un ensemble d'objets qui sont liés entre eux et qui peuvent être utilisés à plusieurs endroits dans un design. Le Master est la version originale du composant, les instances sont des copies du master qui peuvent être modifiées indépendamment. 

Ce plugin offre une variété d’outils pour gérer les composants, et vous sera très utile lors de la conception de vos design systems !

Découvrir Master

8. Design Lint

Le plugin Design Lint permet de trouver et de corriger les erreurs dans vos designs Figma. Il utilise une série de règles pour identifier les problèmes potentiels, tels que les incohérences dans les couleurs, les polices, les tailles et les positions.

Il permet un gain de temps et une réduction du risque d’erreurs dans les designs. C’est un outil gratuit et open source.

Découvrir Design Lint

9. Figma to code

Le plugin Figma to code permet de faire un peu plus le lien entre les possibilités techniques CSS et ce que nous proposons en conception grâce au code généré par le plugin. Il supporte plusieurs langages de programmation, tels que HTML, CSS, JavaScript, React, Flutter, et Swift.

C’est un excellent outil pour rapprocher designers et développeurs mais aussi pour permettre aux développeurs d’avoir une vue plus précise des spécifications techniques des interfaces utilisateurs.

Découvrir Figma to code

10. Figmap

Le plugin Figmap permet de personnaliser entièrement le style des cartes et marqueurs de localisation. Vous pouvez modifier les propriétés des cartes telles que son style de vue (dark, light, street, satellite) mais aussi la latitude, la longitude, le zoom, l’orientation, l’inclinaison à l’aide des contrôles.

Découvrir Figmap

11. Plugin Bonus : Contentinator

Le plugin Contentinator permet de générer du contenu et des données réalistes pour vos maquettes Figma. Il permet de générer du contenu textuel, des images, des tableaux, des graphiques et intègre une assistance provenant d'une intelligence artificielle.

Découvrir Contentinator

Pour conclure

Il existe de nombreux plugins qui permettent un gain de temps considérable lors de la phase de conception UI design et lors de du développement front-end. Pour les découvrir, vous pouvez explorer la communauté Figma ou nous demander conseil, via notre formulaire de contact !

Découvrir Figma community