|
Pour créer un élément déroulant dans l'outil de conception Figma, suivez ces étapes :
Étape 1 : Préparation
- Ouvrez Figma et créez un nouveau projet ou ouvrez un projet existant.
- Sélectionnez le cadre ou le conteneur dans lequel vous souhaitez créer l'élément défilant.
Étape 2 :Définir le cadre de défilement
- Cliquez sur l'outil "Cadre" dans la barre d'outils de gauche. Il ressemble à un carré avec quatre flèches pointant vers l'extérieur.
- Dessinez le cadre où vous souhaitez que le contenu défilant apparaisse. Assurez-vous qu’il a suffisamment de hauteur pour accueillir le contenu défilant.
Étape 3 :Ajouter du contenu déroulant
- À l'intérieur du cadre, ajoutez les éléments ou objets que vous souhaitez faire défiler. Cela peut inclure du texte, des images, des formes ou tout autre élément de conception.
- Placez les éléments les uns en dessous des autres pour créer l'effet de défilement.
Étape 4 :Activer le défilement
- Sélectionnez le cadre contenant le contenu déroulant.
- Dans le panneau de droite, sous « Propriétés », cliquez sur la section « Contraintes ».
- Sous "Mise en page verticale", remplacez l'option "Débordement" par "Défilement" ou "Débordement Y".
- Cela permet le défilement dans le cadre.
Étape 5 :Ajuster le débordement
- En fonction de la quantité de contenu dont vous disposez, vous devrez peut-être ajuster les paramètres de débordement. Sous l'option "Débordement", vous pouvez choisir "Débordement", qui affiche tout le contenu et ajoute des barres de défilement si nécessaire, ou "Clip Content", qui coupe tout contenu qui ne rentre pas dans le cadre.
Étape 6 :Vérifier et tester
- Redimensionnez le cadre ou la fenêtre du navigateur pour simuler différentes tailles d'écran et assurez-vous que le défilement fonctionne comme prévu.
- Ajustez l'emplacement et la taille des éléments pour vous assurer qu'ils s'adaptent bien et n'obstruent pas les barres de défilement ou d'autres composants interactifs.
Étape 7 :Aperçu et prototype
- Utilisez le mode "Présent" (raccourci :"P") ou connectez votre design à un prototype pour tester la fonctionnalité de défilement. Cela vous permet de voir comment le parchemin fonctionnera dans un environnement plus réaliste.
Étape 8 :Enregistrer et partager
- Une fois que vous êtes satisfait de l'élément défilant, enregistrez votre fichier Figma.
- Vous pouvez également partager la conception avec d'autres personnes, l'exporter pour un développement ultérieur ou l'utiliser dans le cadre d'un système de conception plus vaste.
N'oubliez pas que Figma permet une conception et un prototypage réactifs, afin que vous puissiez ajuster la disposition et le comportement de votre ressource défilante en fonction de différentes tailles et interactions d'appareils.
|
