.svg)
.svg)
5 astuces pour donner rapidement vie à vos maquettes Figma
Vous commencez à être à l'aise avec les composants et les variantes Figma. Et si ce n'est pas le cas, pas de panique, nous avons un article qui pourra vous aider : Figma : utiliser les variantes. Il est désormais temps d'animer vos créations !
Au menu :
- Utiliser l'application mobile Figma
- Ajouter des scroll horizontaux et verticaux
- Animer des variantes
- Animer un loader
- Supprimer toutes les interactions
1. Utiliser l'application mobile Figma
Vous avez pris l'habitude de concevoir vos interfaces sur la version desktop de l'application Figma. Mais connaissez-vous l'application mobile de Figma ? Car il est encore plus intéressant d'utiliser les deux devices simultanément. Eh oui, vous l'avez deviné, notre premier conseil est de télécharger cette application. Son intérêt est de pouvoir observer le rendu de vos maquettes sur mobile. Très pratique, vous pouvez interagir avec votre prototype comme si l’application était déjà publiée. Les disproportions de texte ou d’autres éléments vous sauteront aux yeux.
Comment ça marche ? Il vous suffit d’être connecté sur le même compte Figma sur votre ordinateur et votre téléphone, de choisir le mode mirror et de sélectionner une frame depuis votre ordinateur. Celle-ci apparait ensuite sur votre téléphone. Si vous ajustez la maquette sur l’ordinateur, les changements s’opèrent immédiatement sur votre mobile. À vous de jouer !
2. Ajouter des scrolls horizontaux et verticaux
On continue avec les différents types de scroll sur Figma. Cette méthode, très facile à mettre en place, permet de prototyper les différentes interactions qu'auront les utilisateurs sur vos interfaces. Les écrans prennent vie en quelques clics. Suivez le tuto👇
3. Animer des variantes
Comment créer une animation avec votre menu de navigation ? Voici un exemple qui pourra vous être utile ! L'idée est d'utiliser les variantes pour pouvoir ensuite animer l'élément.
4. Animer un loader
Trop facile ? Et si nous corsions l'exercice avec une animation plus complexe à réaliser ? Qui est prêt à relever le défi ?
Il est parfois nécessaire de simuler un temps de chargement sur votre interface. Suivez le tuto et n'hésitez pas à nous envoyer vos réalisations !
.gif)
5. Supprimer toutes les interactions en 2 clics
Pour finir, il peut arriver qu’on veuille se débarrasser de toutes les interactions d’une page. On se retrouve entremêlé dans une jungle épaisse de liens dont il est difficile de se dépêtrer. Ne le faites plus à la main, en deux clics toutes les interactions peuvent disparaître.
J’espère que vous avez pu découvrir quelques petites astuces qui vous aideront à manier Figma. Restez connectés, de nouveaux conseils vous attendent, comme :
