On commence cette nouvelle série d'article (un mois, un plugin Figma) avec un premier plugin vous permettant d'implémenter des effets Neumorphism en quelques secondes !
Mais d'abord, une rapide petite définition...
Qu'est-ce que le Neumorphism ?
Le Neumorphism (ou néomorphisme) est un style graphique à mi-chemin entre le Skeuomorphisme et le flat design. Il est caractérisé par l'utilisation d'ombres et d'effets d'élévation pour simuler un rendu réaliste avec différents niveaux d'incrémentation. Google material en est un bon exemple.
Le plugin Neumorphism pour Figma
Ce petit plugin gratuit est disponible dans la banque communautaire de Figma. Il vous permettra d'appliquer rapidement des effets d'ombre et d'élévation typiques au Neumorphism, avec la possibilité d'ajuster le niveau d'élévation, l'intensité de l'ombre, le style de votre élément (plat, concave, convexe, enfoncé), la direction de la source lumineuse et l'adoucissement des bords – ainsi que la couleur de l'ombre, bien sur.
Mais alors, comment ça marche ?
C'est très simple : sélectionnez un composant (ici, un bouton) sur lequel vous souhaitez ajouter un style Neumorphism, faites un clic droit et dans « plugin », choisissez « neumorphism ». Vous accéderez directement à la fenêtre de customisation et n'aurez plus qu'à configurer vos effets comme vous le souhaitez !
Attention, le plugin ne prend pas en charge les layers multiples ni les groupes. Dans notre exemple, nous avons utilisé une frame en mode auto layout.
Les options disponibles sont peu nombreuses mais largement suffisantes pour simuler tous types d'effets différents.
Petite subtilité : la couleur de votre ombre sera calculée selon la couleur de fond de votre élément. Ainsi, un bouton blanc sur fond coloré n'aura pas un très beau rendu, puisque la couleur de base utilisée pour l'ombre sera aussi le blanc...
Pour contrer cela, n'oubliez pas de changer la couleur de fond de votre élément avant d'appliquer le plugin Neumorphism, puis, une fois fait, réappliquez la couleur désirée.
La couleur est la seule option qu'il n'est pas possible de customiser directement dans le panneau du plugin. Si vous avez déjà appliqué un effet Neumorphism sur un élément et que vous souhaitez modifier la couleur de l'ombre après coup, vous pouvez également passer par la sidebar de Figma et jouer avec les couleurs d'ombrage. Il vous faudra préparer une couleur plus claire et une plus foncée que le fond sur lequel se trouvera votre élément.
Et pour l'intégration ?
Bien entendu, il conviendra de confirmer avec votre équipe front-end (ou vous même si vous savez tout faire) que ce qui est designé est reproductible en CSS et, si ce n’est pas le cas, de trouver une solution qui convienne à toutes et tous.
La fonction Inspect de Figma permet de récupérer le code CSS généré par le plugin Neumorphism. Vous pouvez visualiser quelques exemples sur ce CodePen et comparer le résultat en code VS le rendu Figma ci-dessous.
Et voilà !
Ce n'est pas plus compliqué que ça, alors à vos pinceaux numériques !
Commenter
Vous devez être inscrit et identifié pour utiliser cette fonction.
Connectez-vous (déjà inscrit)
Pas encore inscrit ? C'est très simple et gratuit.