6 plugins Figma (gratuits) indispensables pour embellir vos projets

Partager l’article sur :

Share on facebook
Share on twitter
Share on email
Share on whatsapp
Share on telegram
Share on linkedin
6 plugins indispensables pour Figma

Depuis plus d’un an, Figma s’est imposé comme la meilleure alternative gratuite à tous les services d’édition graphique. Lancé en 2012, il est aujourd’hui utilisé par bon nombre de graphistes et de concepteurs UI et UX et rencontre un franc succès. Il y a 2 ans, Figma lance la Figma Community qui permet à des créateurs de partager leurs créations, mais aussi leurs plugins. Cet article vous en présentera 6 qui me permettent de gagner beaucoup de temps tant dans votre organisation qu’en terme de créativité.

UI Gradient – Faire de parfaits dégradés facilement

Absolument incontournable depuis quelques années, les dégradés ont pris d’assaut du webdesign. Comme beaucoup de designers, je connaissais déjà des solutions comme cssgradient.io. Mais il faut reconnaitre qu’un plugin intégré à Figma fait gagner beaucoup de temps. UI Gradient suggère donc des couleurs de dégradés directement ajoutables à vos éléments dans Figma. La diversité des dégradés et la facilité pour les ajouter sont les deux points forts de ce plugin. On peut cependant noter qu’il existe d’autres bonnes combinaisons de couleurs qui pourraient être ajoutées, ce que le développeur fera peut-être.


Publicité


Voici donc un exemple tout simple d’utilisation d’UI Gradient.

Pour rendre l’exemple plus concret, j’ai choisi de faire quelque chose de basique. Voici ci-dessus le résultat. Comme vous le voyez, le dégradé n’est pas une image figée, et peut ainsi être ajusté.

Faire des vagues facilement avec Get Waves

Plugin simple et pratique, pas de fioriture, tout y est. Vous pouvez choisir le nombre de sommets désirés, faire des vagues ou des rectangles, un besoin = une solution. La vague générée est un vecteur, elle est donc modifiable sommet par sommet et ajustable.

Supprimer l’arrière plan d’une image automatiquement

Internet regorge de données, de ressources, et pourtant. Combien de fois tombe-t-on sur l’image parfaite, mais pas en PNG ! Résultat, un rendu affreux parce qu’on ne peut pas retirer le fond uniforme ou parce que ça prendrait trop de temps. Pour y remédier, des outils existent comme Photoshop, ou des alternatives gratuites comme Remove BG (bg=background, pas de compliment😌). Eh bien bonne nouvelle, il est désormais intégré à Figma. Par conséquent, plus besoin d’uploader le fichier sur le site, de télécharger l’image détourée et de l’ajouter à votre projet. Il vous suffit de créer un compte gratuit pour saisir sur Figma la clé API. Vous trouverez ci-dessous un lien pour télécharger l’extension.

Créer des cercles aléatoirement (2 plugins, 2 utilisations)

J’ai trouvé 2 plugins qui répondront à 2 besoins différents. Le premier s’appelle Fizzy, et il permet de générer un nombre défini de cercles dont vous aurez choisi la couleur. Il remplira donc une surface spécifique avec ces cercles entièrement modifiables.

Comme vous le voyez, tout est paramétrable : la couleur, les couleurs et le fait que les cercles soient remplis ou seulement les contours. Autre point positif, le plugin crée automatiquement un groupe regroupant tous les cercles ce qui évite d’avoir à le faire à la main.

Le deuxième plugin s’appelle Blobs, et il permet de générer des formes rondes facilement. Il vous suffit de configurer la “complexité” et le “contraste” de la forme. Démonstration.

Comme vous le voyez, l’interface est très simple et elle génère des vecteurs (donc ajustables à souhait selon vos souhaits).

Morph : le plus complet et le meilleur plugin selon moi

De tous les plugins que j’ai testés, exploités et souvent supprimés, c’est bien Morph qui se hisse selon moi en haut du podium.

En effet, ce plugin permet de faire rapidement beaucoup de choses très simplement. Par ailleurs, il est régulièrement mis à jour. Le plugin parfait.

Faire du néomorphisme (/neumorphism) facilement

Le néomorphisme, c’est la tendance graphique qui a irrigué de nombreux projets l’année dernière. Si son espérance de vie fut relativement courte, certains éléments sont toujours repris. Je pense notamment aux boutons qui adoptent parfois un look néomorphisme. Le principe : jouer sur les dégradés de couleurs et des ombres extérieures et intérieures. Concrètement, voici une interface néomporhique :

Le Neumorphism : la vraie fausse bonne idée de 2020 - Alexandra Guyot

Playlists – Simple Music Player par
 Filip Legierski

Ce type d’interface peut être reproduite grâce au plugin. Démonstration.

Une fois de plus, accédez au plugin, sélectionnez une forme et un panneau s’ouvre.

Comme vous le voyez, plusieurs possibilités de relief sont proposées. La direction de la lumière est également réglable.

Vous pourrez donc aisément créer des formes en relief, je vous laisse découvrir.

Créer un effet néon

L’effet néon est un autre incontournable. Plus difficile à réaliser pour un débutant, il peut pourtant s’avérer utile pour ajouter une touche créative à un projet.

Je continue sur le même projet et vous propose désormais d’ajouter un texte bleu avec un effet néon.

Voici donc l’effet néon. On peut noter avec un peut de regret que seules 6 couleurs sont disponibles pour le moment. je vous conseille par ailleurs de supprimer le deuxième texte généré par le plugin qui donne un aspect “plastique” au texte. Vous comprendrez mieux avec l’image ci-dessous dans laquelle j’ai caché le texte “ACTUALITECH (vous le voyez à gauche).

Deuxième conseil : veillez à choisir une police d’écriture qui rende bien, de préférence une police comprenant des déclinaisons plus larges (en gras).

Créer un effet “glassy” (vitre)

J’ai repris mon projet initial, changé quelques couleurs, et j’ai tenté un couché de soleil stylisé.

Le résultat

Mon coucher de soleil est prêt, et ne ressemble pas vraiment à un coucher de soleil. Ca, c’est une autre histoire. Le plugin permet également de réaliser des surfaces en verre pleines, creuses ou plates. Vous ne voyez pas de quoi je parle. Voici un autre de mes projets (chacun sa façon de s’amuser). Pour information, je me suis ici entrainé en reprenant un projet vu sur Dribbble et en le recopiant.

Zoomer si aucune image n’apparait au bout de quelques secondes

Publicité

Autre exemple de ce qui peut être faire avec cet effet du plugin :

Si vous désirez vous exercer avec mon travail à votre tour, vous pouvez le dupliquer sur Figma.

Zoomer si aucune image n’apparait au bout de quelques secondes

Et si les deepfakes marquaient le retour vers le réel ?

Cantonné à la sphère des passionnés et des professionnels il y a encore quelques années, le principe de deepfake commence...

Tout comprendre sur la pénurie de semi-conducteurs

Présents dans tous les appareils électroniques, les semi-conducteurs sont le coeur de la technologie qui nous entoure. Cependant, depuis quelques...

L’Etat finance-t-il une idéologie sur Instagram?

Comme beaucoup, j'utilise les réseaux sociaux, et tombe sur des vidéos d'actualité. Il est clair que la plupart du temps,...