CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Comment Concevoir une Carte Interactive dans Figma

Comment Concevoir une Carte Interactive dans Figma

Utilisation du masque et création 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€ 95,40€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ 95,40€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Création et Utilisation des Masques

Objectifs

Les objectifs de cette vidéo sont :
1. Apprendre à utiliser les masques dans Figma.
2. Acquérir les compétences pour insérer et ajuster des images de cartes.
3. Comprendre comment structurer et organiser visuellement des éléments graphiques.

Résumé

Découvrez comment créer et utiliser des masques dans Figma pour concevoir des cartes interactives.

Description

Dans cette leçon, nous allons explorer la fonctionnalité des masques dans Figma pour créer une carte interactive. Nous commencerons par dupliquer un écran existant pour conserver la base, puis nous supprimerons les éléments superflus. En utilisant la fonctionnalité des calques et des masques, nous apprendrons à insérer une image de carte et à l'ajuster dans une zone définie. Cette technique est essentielle pour organiser et structurer vos éléments graphiques sans débordements indésirables.
Ensuite, nous verrons comment définir une forme comme un masque et y intégrer une image. Vous découvrirez comment aligner précisément votre contenu pour éviter d'afficher des parties inutiles de l'image, comme la date et l'heure, et ainsi, maîtriser l'agencement visuel.
Pour conclure, nous introduirons d'autres éléments d'interface facilitant l'interaction avec la carte, avant de finaliser par l'ajout de dégradés pour une meilleure intégration visuelle. Cette leçon est idéale pour ceux qui souhaitent améliorer leur maîtrise de Figma et créer des interfaces graphiques professionnelles et interactives.

Voir plus

Questions fréquentes

Pourquoi utiliser des masques dans Figma?
Les masques dans Figma permettent de contrôler l'affichage des éléments graphiques et de structurer les designs de manière plus précise.
Comment insérer une image dans un masque?
Pour insérer une image dans un masque, il faut sélectionner la forme souhaitée comme masque, puis y placer l'image qui s'ajustera à la forme du masque.
Quelles sont les étapes pour créer une carte interactive dans Figma?
Les étapes incluent : dupliquer un écran existant, définir la zone de la carte, créer un masque, insérer et ajuster une image, et ajouter les éléments d'interface nécessaires.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 an
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 2 ans
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 2 ans
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 2 ans
Merci !
pioupiou06
Il y a 2 ans
Super formation ! très bien expliquée !
pulpozien
Il y a 2 ans
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 ans
Super formation!!
Millenium
Il y a 3 ans
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 !