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.
É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.
É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
É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).
É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.
