CATALOGUE Code & Data Formation No Code Maîtriser FlutterFlow - De l'Idée à l'Application

Conception de la Homepage avec Figma

Retour à la formation
Chapitre 4 Leçon 2
Précédent
Suivant

Découvrez comment designer une homepage avec Figma, en ajoutant des éléments comme un conteneur, texte, bouton et image de fond.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons la création d'une homepage utilisant Figma. Vous apprendrez comment organiser les éléments essentiels de votre page, tels que le titre, le bouton et l'image de fond. Tout commence par la suppression des composants inutiles, comme l'appbar et certains textes. Ensuite, nous utiliserons un conteneur auquel nous donnons une largeur de 100% pour qu'il occupe toute la surface disponible. À l'intérieur de ce conteneur, une colonne est ajoutée afin de gérer l'alignement horizontal et vertical de ses enfants, notamment un texte et un bouton.

Nous aborderons également l'utilisation de la safe area et pourquoi elle peut parfois nécessiter d'être désactivée pour obtenir l'effet souhaité. Pour finir, nous verrons comment attribuer une image de fond à notre conteneur et configurer un bouton pour rediriger l'utilisateur vers une page d'authentification.

Cette leçon est particulièrement utile pour ceux qui souhaitent améliorer leur compétence en design d'interface utilisateur en utilisant Figma, et elle offre une introduction pratique aux concepts clés et leurs applications concrètes.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de vous apprendre à :
- Utiliser un conteneur pour mettre en forme vos widgets
- Ajouter et aligner du texte et des boutons
- Configurer et utiliser des images de fond dans Figma
- Créer des liens de navigation entre les pages

Prérequis pour cette leçon

Les prérequis pour cette vidéo sont :
- Avoir une connaissance de base de Figma
- Comprendre les concepts de conteneurs et de colonnes
- Savoir comment ajouter des widgets de base

Métiers concernés

Les métiers liés à ce sujet incluent :
- Designer d'interface utilisateur (UI Designer)
- Développeur front-end
- Concepteur d'expérience utilisateur (UX Designer)

Alternatives et ressources

Les alternatives à Figma pour le design d'interface utilisateur incluent :
- Adobe XD
- Sketch
- InVision

Questions & Réponses

Un conteneur permet d'ajouter plus de design et de gestion de l'espace pour vos widgets, en facilitant leur disposition et alignement.
La 'safe area' est une zone de sécurité pour s'assurer que l'interface s'affiche correctement sur tous les types d'écran. Elle peut être désactivée si elle ne correspond pas aux besoins spécifiques du design en cours.
Pour lier un bouton à une page d'authentification dans Figma, vous ajoutez une action de type 'navigate to' sur le bouton qui redirigera l'utilisateur vers la page souhaitée.