CATALOGUE Code & Data Formation No Code Maîtriser FlutterFlow - De l'Idée à l'Application Conception de la Homepage avec Figma

Conception de la Homepage avec Figma

Design de la home et test
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser FlutterFlow - De l'Idée à l'Application
Revoir le teaser Je m'abonne
4,3
Transcription
Cette leçon fait partie de la formation
69,00€ 34,50€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
Cette leçon fait partie de la formation
69,00€ 34,50€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Étapes de Création

Objectifs

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

Résumé

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

Description

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.

Voir plus

Questions fréquentes

Pourquoi est-il nécessaire d'utiliser un conteneur dans Figma ?
Un conteneur permet d'ajouter plus de design et de gestion de l'espace pour vos widgets, en facilitant leur disposition et alignement.
Qu'est-ce que la 'safe area' dans Figma et quand doit-elle être désactivée ?
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.
Comment lier un bouton à une page d'authentification dans Figma ?
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.

Programme détaillé

3 commentaires
4,3
3 votes
5
4
3
2
1
hmrabat
Il y a 1 mois
Merci beaucoup.
boudalialouane
Il y a 5 mois
Dommage que la souris parte dans tous les sens et que celle-ci ne soit pas plus visible
manuel.crocis
Il y a 6 mois
Bonjour, merci pour vos tutos qui sont très clairs. Je suis débutant en no code, j'ai suivi pas à pas cette vidéo (et d'autres) cela m'a bien aidé. Seulement je ne parviens pas à ajouter un nouvel utilisateur ni à me connecter quand j'en créé un à la main. Je lis dans la partie authentification de la console firebase le message: "la connection par redirection inter-origine sur google chrome M115 et versions ultérieures n'est plus pris en charge..." Je me demande si je n'ai pas un problème à ce niveau. Il semble y avoir eu un changement depuis le 24 juin 2024... J'ai lu les explications de la page d'après, je ne comprends pas le processus à mettre en place. J'ai cherché sur les discussions en ligne, je ne suis visiblement pas le seul. Pourriez vous faire un bref tutoriel pour nous guider? C'est dommage d'âtre bloqué par ça. Merci de votre aide. Et encore bravo pour vos tutos, d'une clarté limpide!