Icônes flèche noirecliquez ici
Accueil > Académie

Créer un effet holographique sur Figma

Sommaire

Tu l'as certainement vu sur un site au design futuriste ou dans des créations à la pointe de la tendance : l'effet holographique.

Aujourd’hui je t’apprends à le faire, toi et tes petites mains, sur Figma en moins de 5 minutes !

Let's go 💪

Étape 1 : Départ

Crée une frame de 300x440px.
Renomme-la, et ajoute si tu le souhaites un corner radius.

Screenshot : Étape 1

Étape 2 : Ajout d'un premier dégradé

Ajoute un radial gradient qui suit la diagonale de ta card.
Soit du coin en bas à gauche au coin en haut à droite, soit l'inverse.

Screenshot : Étape 2

Étape 3 : Ajout de points supplémentaires

Ajoute 6 points de couleurs différentes et repositionne-les de manière régulière.

→ Couleur 1 #2AD0CA

→ Couleur 2 #E1F664

→ Couleur 3 #FEB0FE

→ Couleur 4 #ABB3FC

→ Couleur 5 #5DF7A4

→ Couleur 6 #58C4F6

Screenshot : Étape 3

Étape 4 : Ajout d'un second dégradé

Ajoute un angular gradient avec 8 points en alternant 1 point blanc et 1 point noir puis repositionne tous les points de cette manière (cf : screenshot).

Screenshot : Étape 4

Étape 5 : Modification du mode de fusion

Définis l’opacité de l’angular gradient à 100% et remplace le mode de fusion “Normal” par “Difference”.

Étape 6 : Ajout d'un troisième dégradé

Duplique l’angular gradient que tu viens de créer (tu peuxutiliser le raccourci clavier CMD+C, CMD+V) et changer le mode de fusion “Difference” par “Screen”

Étape 7 : Ajout de texture (aléatoire)

Utilise le plugin Noice pour ajouter de la texture grâce à un calque au mode de fusion “Overlay” et à l’opacité de 50%.

Finito pipo ! Tu peux enregistrer ton superbe holographic gradient comme color style afin de pouvoir le réutiliser facilement sur différents éléments 😎

Et si tu souhaites découvrir d'autres tutos, n'hésite pas à consulter la Norry Academy.

DERNIERS TUTORIELS

Découvrez nos autres tutoriels publiés récemment

Animer un mesh gradient sur Figma

Figma

Créer un mesh gradient en 5 étapes sur Figma

Figma

Créer une navigation grâce à l'auto-layout sur Figma

Figma

Envie de recevoir du contenu exclusif ?

Nous vous envoyons un condensé d’informations UX, Webdesign, Webflow et Bonus 1 fois par mois dans votre boîte mail.