Célébrer la Saint-Valentin avec une animation simple dans Figma : un radar qui repère l’amour autour
La Saint-Valentin est l’occasion de célébrer l’amour et de nous rappeler qu’il est tout autour de nous. Cette année, au lieu d’acheter des cadeaux génériques, pourquoi ne pas en créer un personnalisé et unique pour vos proches ? Si vous êtes designer ou cherchez à vous lancer dans le design, Figma est un excellent outil pour vous aider à créer une animation spéciale pour célébrer le jour de l’amour. Dans cet article de blog, nous allons vous montrer comment créer une animation simple dans Figma, en utilisant des dégradés pour recréer un radar qui repère un cœur.
Étape 1 : créer la base radar
Pour commencer, créez un nouveau fichier Figma et dessinez une forme circulaire pour servir de base à notre radar. Ensuite, ajoutez un deuxième cercle à l’intérieur du premier et remplissez-le d’un dégradé. Ce gradient doit aller du clair au foncé, représentant la force du signal du radar.
Étape 2
Créez un anneau en soustrayant 2 cercles à celui de base. Ajoutez quelques ombres pour créer le faux effet 3D. Voici mes valeurs :
- box-shadow : 0px -6px 12px 0px rgba(0, 0, 0, 0.8) encart ;
- boîte-ombre : 0px 4px 2px 0px rgba(220, 172, 209, 0.2) encart ;
Étape 3 : Écran de base avec dégradé radial
Dégradé radial :
- RVB(22, 11, 21, 1)
- RVB(12, 6, 11, 1)
Étape 4 : Ajoutez l’effet de balayage
Ensuite, nous allons créer une ligne qui balayera le radar pour donner l’apparence d’un signal de recherche. Pour ce faire, utilisons l’option Dégradé angulaire du blanc au noir. Ensuite, nous changeons simplement le mélange en couleur Dodge.
Dégradé angulaire
- RVB(246, 246, 246, 1)
- RVB(0, 0, 0, 1)
- RVB(0, 0, 0, 1)
Étape 3 : Ajouter la forme de cœur
Maintenant que nous avons l’effet de balayage, il est temps d’ajouter la forme de cœur que le radar recherche. Dessinez une forme de cœur dans Figma et placez-la n’importe où en dehors du radar. Assurez-vous d’utiliser Color Dodge pour le mélange.
Étape 4 : Touches finales
Pour finir, créez un prototype pour ajouter l’animation, ajoutez tous les détails ou effets supplémentaires que vous souhaitez. Vous pouvez ajouter une surbrillance autour de l’anneau pour simuler la réflexion de la lumière. Vous pouvez également ajouter du texte, tel que « L’amour est toujours autour de nous » pour souligner le thème de la Saint-Valentin
Prototype final
En conclusion, Figma est un outil puissant pour les concepteurs, vous permettant de créer facilement des animations. Avec ses fonctionnalités de dégradé et d’animation, vous pouvez créer une animation simple mais significative pour célébrer la Saint-Valentin et montrer à vos proches que l’amour est tout autour de nous. Que vous soyez un designer chevronné ou que vous débutiez, ce projet est un excellent moyen d’en apprendre davantage sur Figma et les bases de l’animation. Alors, essayez-le et laissez libre cours à votre créativité !
Vous pouvez également consulter une démo en version HTML/CSS sur
Source Figma
Mots clés : Figma, design, animation simple, dégradés, radar, coeur, Saint Valentin, amour.