Création d'Interfaces Utilisateurs avec Figma

Position des éléments de structure et application des styles
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€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de vous apprendre à :
- Importer et positionner des éléments dans une interface
- Utiliser les grilles et colonnes pour l'alignement
- Gérer les styles de couleurs et de typographies
- Appliquer des astuces pour un design pixel perfect

Apprenez à placer des éléments dans une interface utilisateur et à gérer les styles sous Figma en suivant cette leçon.

Dans cette leçon, nous allons explorer comment placer des éléments dans une interface utilisateur et gérer les styles avec Figma. Nous débuterons par l'importation et la disposition des éléments tels que les menus, logos, lignes, et rectangles. Vous découvrirez des astuces pour aligner et positionner ces éléments en utilisant les grilles et colonnes. Ensuite, nous ajusterons les styles et les alignements, en utilisant des raccourcis clavier pour gagner en efficacité. Nous verrons également comment intégrer des icônes et du texte, et comment utiliser les styles prédéfinis de Figma pour gérer les couleurs et les typographies. Finalement, nous aborderons l'importante étape de l'ajout de détails, comme les arrondissements des angles et le placement des pictogrammes météorologiques, pour obtenir un design harmonieux et fonctionnel.

Voir plus
Questions réponses
Pourquoi est-il important d'utiliser les grilles et colonnes dans une interface utilisateur avec Figma ?
Les grilles et colonnes permettent d'aligner les éléments de manière cohérente, facilitant ainsi la navigation et améliorant l'esthétique globale de l'interface.
Comment Figma permet-il de gérer les styles de typographies et de couleurs ?
Figma offre des styles prédéfinis pour les typographies et les couleurs, que vous pouvez appliquer directement aux éléments de votre interface. Ces styles garantissent la cohérence visuelle à travers les différentes sections de votre design.
Quelles sont les astuces pour obtenir un design 'pixel perfect' dans Figma ?
L'utilisation de raccourcis clavier pour aligner et ajuster les éléments, ainsi que l'activation des repères et des grilles, sont des astuces essentielles pour atteindre un design 'pixel perfect' dans Figma.

Programme détaillé

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