CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Comment Ajouter des Éléments Interactifs et Gérer les Masques dans Vos Designs

Comment Ajouter des Éléments Interactifs et Gérer les Masques dans Vos Designs

Pictogramme de la carte
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription
159,00€ 79,50€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ 79,50€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Ajout et Manipulation des Éléments Interactifs

Objectifs

Les objectifs de cette vidéo sont :


  • Apprendre à ajouter et styliser des éléments interactifs dans un design.
  • Gérer efficacement les masques pour éviter les erreurs visuelles.
  • Améliorer la visibilité et l'ergonomie des éléments sur des interfaces mobiles.

Résumé

Découvrez comment ajouter des éléments interactifs à vos designs et gérer efficacement les masques pour éviter les erreurs courantes.

Description

Dans cette leçon, nous allons aborder l'ajout d'éléments interactifs tels que des ronds et leur application de styles pour interagir avec une carte. Nous expliquerons comment éviter les erreurs fréquentes lors du positionnement des éléments dans les masques.

Tout d'abord, nous créons les ronds et leur appliquons un style blanc. Nous verrons ensuite comment gérer les masques pour que les éléments n'interfèrent pas entre eux. Il est important de grouper le masque et l'image pour éviter les problèmes lors des déplacements des éléments.

Ensuite, nous améliorerons la visibilité des éléments en ajoutant une ombre, en ajustant le flou (blur) et la propagation (spread), ainsi qu'en modifiant l'opacité pour un rendu visuellement agréable. Ces réglages sont essentiels pour s'assurer que les éléments se distinguent bien sur une interface mobile.

Nous verrons également comment positionner correctement les pictogrammes importés et nous assurer qu'ils ne soient pas cachés par un masque mal géré. Cette section est cruciale pour tous ceux qui souhaitent obtenir des designs propres et fonctionnels.

Enfin, la leçon se conclura par la création d'une timeline pour afficher les précipitations estimées sur la carte, utilisant Paris comme exemple.

Voir plus

Questions - réponses

Pourquoi est-il important de grouper le masque et l'image dans le design?
Grouper le masque et l'image permet d'éviter que d'autres éléments ne soient accidentellement positionnés sous le masque, ce qui peut causer des problèmes de visibilité et d'interactivité.
Quelles techniques sont utilisées pour améliorer la visibilité des éléments sur une interface mobile?
Pour améliorer la visibilité, on peut ajouter des ombres, ajuster le flou et la propagation, et modifier l'opacité des éléments.
Que faire si un élément est caché derrière un masque mal géré?
Il est important de s'assurer que le masque est correctement groupé avec son image et que les nouveaux éléments sont positionnés au-dessus de ce masque pour éviter les problèmes de visibilité.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 year
Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?
jc.mosca
Il y a 1 year
Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.
ousmane.ndia
Il y a 1 year
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 2 years
Merci !
pioupiou06
Il y a 2 years
Super formation ! très bien expliquée !
pulpozien
Il y a 2 years
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 years
Super formation!!
stephanehugon
Il y a 3 years
Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...

A part ça, super formation !