5 astuces pour donner rapidement vie à vos maquettes Figma

6.5.22
par
Emilie
Lecture
Logo linkedinLogo twitterLogo facebookLien partage

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 !

Application mobile Figma en mode mirror

2. Ajouter des scroll 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👇

Tuto scroll horizontal et vertical

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.

Tuto animation de variantes

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 !

Tuto animation d'un loader

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.

Tuto de suppression des interactions

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 prochainement !

Figma
Figma
Ressource
Ressource

À lire aussi

Veille digitale, regard d’experts et retours d’expérience