5 animations de boutons dans Figma | Tuto FR
Vložit
- čas přidán 25. 11. 2023
- 5 exemples d'animations de boutons sur Figma. Améliorez vos prototypes en ajoutant des animations originales au survol ou au clic de vos boutons.
Dans cette vidéo nous vous présentons 5 façons de créer des boutons animés sur @Figma en combinant les composants aux fonctionnalités de prototypage.
Retrouvez toutes ces animations sur notre clonable Figma Community 👉 www.figma.com/community/file/...
❖ TEMPS FORTS 🍿
◇ 00:10 Fonctionnalités animation Figma
◇ 00:46 Animation avec blur
◇ 02:51 Animation du texte
◇ 04:12 Animation avec remplissage
◇ 05:10 Animation déroulante
◇ 06:33 Animation Hover & Click
❖ DIGIDOP ACADEMIE 🎓
◇ Formation Figma : academie.digidop.fr/formation...
❖ OUTILS 🔧
◇ Webflow : webflow.grsm.io/signup-webflo...
◇ Figma : www.digidop.fr/outils/figma
❖ RESSOURCES 🧠
◇ Académie : academie.digidop.fr/
◇ Blog : www.digidop.fr/blog/
◇ Outils : www.digidop.fr/ressources/outils
❖ CONTACT 👋
◇ Contact Digidop : www.digidop.fr/contact
◇ Instagram : / digidop.fr
◇ TikTok : / digidop.fr
◇ LinkedIn : / digidop
❖ HASHTAGS
#figma #button #animation
Merci de nous suivre 💛
Merci pour les vidéos! Vous êtes top!
Avec plaisir 😊
top! simple et efficace. Et merci pour le clonable, parfait pour s'entrainer.
Super, merci pour le retour ! On fera plus de clonables à l’avenir alors 👍
Top merci, je connaissais pas ces techniques :)
Avec plaisir, merci pour le message ! 😁
Bonjour et merci pour ces tutos géniaux. Comme d'autres personnes, je ne comprends pas comment tu obtiens ces calques (dans la partie layers à gauche), je vois que tu as un "btn3" qui comprend des éléments -texte + elipse- mais pas de rectangle arrondi. Je ne comprends pas lorsque j'essaye, j'i un groupe qui contient mon texte de bouton, mon elips et en dessous, mon rectange. Cla entraine que lorsque j'agrandis l'elipse, elle sort du rectangle évidemment.... bouhououououo merci de ton retour !
De chouettes exemples...🙃😉
😊 merci !! J’espère que ça t’a été utile !
Tout ce que montre la digiteam est inspirant oui...😉@@digidop
🫶@@christophetoulouse7396
un poil trop rapide pour moi dans l'exécution, cependant super tuto 👍
Merci pour le feedback, on prendra en compte pour les prochaines vidéos ! À bientôt 👋
humm a 5:30 quel raccourci clavier tu utilises pour dupliquer le texte à la suite à l'intérieur de la frame ?
Si je copy/past mes éléments, ils se superposent et sortent de la frame si je les décale.
Hello Germain, merci pour ton message ! J'utilise le raccourci clavier Cmd + D pour dupliquer.
A noter que mes éléments sont dans un Frame Autolayout, et non un Frame simple. Tu peux pour ça utiliser le raccourcis clavier Shift + A.
Si besoin, voici une vidéo sur l'utilisation des autolayouts dans Figma : czcams.com/video/KS9N4fsK7l4/video.htmlsi=JSkaeeuZlpZfo9Ms
j'ai un pb avec le calque flou qui est en absolut, il ne se redimensionne pas quand j'écris un texte plus long
En effet, cela vient de la position absolut du calque.
La position absolut permet justement à un élément de se détacher de ce type contrainte autolayout ou responsive.
Tu pourrais par exemple dans ce cas prévoir des composants avec différents variants ayant des tailles de texte maximum, en « fill container ».
Bonjour, à 4min48, comment dois-je faire pour agrandir le cercle et qu'il reste dans le bouton ?
Hello ! Tu peux pour ça sélectionner l’élément dans ton bouton, cliquer sur « Espace », et le déplacer. Ça devrait le laisser dans le frame initial 🙂
Salut! Une question: Peut-on inserer des liens sur les boutons avec figma?
Hello, bonne question !
Et malheureusement pas pour le moment .. En revanche, tu peux créer un bouton et insérer un lien sur le texte, comme ancre.
Salut lorsque je veux agrandir mon rond pour le bouton avec remplissage, le rond sort du bouton comment faire ?
Deux possibilités :
1 - Tu agrandis le rond directement depuis le Canvas puis tu t’intègres à ton bouton en le mettant en background
2 - tu restes appuyé sur shift + espace pour scale ton rond tout en le faisant rester dans ton frame
J’espère que ça t’aidera ! ☺️
merci beaucoup mais peut on mettre l'animation en html css
Hello - Depuis Figma ? Ou tu souhaiterais une vidéo démo « How to » en HTML et CSS ?