Rendre votre contenu défilable dans Figma implique de naviguer dans l'onglet latéral. Malheureusement, il n'apparaît pas automatiquement sur l'interface utilisateur principale. Le contenu déroulant est utile lorsque vous souhaitez présenter de nombreuses informations dans un cadre de votre conception. Quelques exemples incluent les pages de destination, les interfaces d’applications ou les fenêtres contextuelles.
Cet article vous expliquera comment rendre vos créations Figma défilantes.
Ajustement d'un texte défilant dans une forme
Commençons par créer un texte défilant dans une forme simple. Il s’agit de l’exemple le plus courant de texte défilant, et vous pouvez ensuite ajouter d’autres propriétés telles que la couleur, les polices et les contours.
Voici comment procéder :
- Créez une forme de base. Pour cet exemple, nous vous recommandons de réaliser un rectangle vertical. Vous pouvez le faire en sélectionnant l'outil rectangle dans la barre latérale gauche ou en utilisant la commande « R ». Maintenez la touche gauche, cliquez sur un point du canevas et dessinez la forme.
- Dans la barre latérale droite, sous l'onglet Conception, cochez l'option « Contenu du clip ».
- Sélectionnez l'outil Texte pour créer une zone de texte et placez-la dans le cadre déroulant. Tapez ou copiez-collez tout contenu que vous utilisez.
- Sélectionnez le cadre et accédez à l'onglet prototype sur le côté droit de votre interface. Ensuite, sélectionnez l’option « défilement par débordement » et le style que vous préférez. Ici, nous choisirons « défilement vertical ».
Une fois que vous avez cliqué sur l’option de défilement par débordement dans l’onglet prototype, il existe plusieurs styles. Nous choisissons le vertical puisque nous utilisons un rectangle vertical comme exemple. Cela vous permet de lire le texte de haut en bas. Certains des autres styles incluent :
discordia eliminar todos los mensajes en el canal
- Défilement horizontal – Les utilisateurs peuvent faire défiler leur texte de gauche à droite dans certains exemples. Cette option est préférable si vous créez des conceptions dans un format d’aménagement paysager.
- Pas de défilement – Si vous souhaitez verrouiller votre contenu en place, choisissez l'option sans défilement.
- Dans les deux sens – Créez un design avec beaucoup de contenu et faites défiler verticalement et horizontalement.
Vous devez utiliser des fonctionnalités de défilement dans votre conception pour minimiser l'effort (clics) utilisé par votre lecteur lors de l'interaction avec le contenu. Ils peuvent glisser ou utiliser la molette de la souris au lieu de cliquer ou d'appuyer sur des tonnes de texte.
Comment concevoir vos composants défilants
En fonction de votre produit, vous devrez concevoir votre cadre de contenu et le contenu lui-même. Le processus implique l’ajout de couleurs, de polices et potentiellement d’autres composants à la conception globale. Changer ces éléments est facile, mais choisir la bonne esthétique nécessite une réflexion approfondie.
Comment changer la police de votre conception défilante
La première chose que vous devrez faire est de changer la police de votre conception déroulante. Figma propose une large gamme de styles parmi lesquels choisir. Voici la méthode la plus simple :
- Sélectionnez le contenu de votre cadre déroulant que vous souhaitez modifier.
- Accédez au menu déroulant situé en haut à gauche et sélectionnez-le.
- Faites défiler les polices jusqu'à ce que vous trouviez celle que vous souhaitez utiliser.
Si la marque pour laquelle vous créez a une typographie particulière, vous choisirez probablement la même afin qu’elle soit cohérente avec l’image de la marque. Si vous disposez de plus de marge de manœuvre, vous devriez expérimenter différents exemples avant de choisir le bon.
Certaines considérations incluent :
- Intention de conception – Le choix d'une typographie doit correspondre à l'intention de votre conception. Si vous souhaitez transmettre clairement de nombreuses informations, privilégiez des polices moins décoratives mais élégantes.
- Autres composants – Votre police est un élément visuel comme les autres dans votre conception. Il doit correspondre au cadre et aux autres composants que vous incluez.
- Esthétique globale et image de marque – L’ambiance générale de la marque doit également influencer la police que vous avez choisie. Par exemple, un service de livraison de fleurs n’aura pas la même police qu’une page de destination SAAS.
Bien que le choix de la bonne police puisse nécessiter quelques expérimentations, quelques exemples concrets de polices constituent les options les plus fiables :
- Roboto – Si vous voulez jouer en toute sécurité, utilisez Roboto. Elle est considérée comme une police polyvalente et neutre avec de nombreuses applications. Comme il est si facile à comprendre, beaucoup choisissent Roboto pour les instructions et les pages de destination.
- Poppins – Pour un attrait convivial mais moderne et épuré, choisissez Poppins. Cette police est plus arrondie et rend le texte attrayant et facile à lire.
- Raleway – Lorsque vous concevez pour une marque de luxe sophistiquée, vous voudrez peut-être envisager Raleway. Il est généralement mince mais présente différentes variations de poids et un look globalement élégant.
- Lato – Convivial, fiable et sérieux sont les bons mots pour décrire cette police. Les concepteurs peuvent utiliser Lato pour les titres et les textes de paragraphes où la lisibilité et la clarté sont des préoccupations majeures.
Vous devrez également prendre en compte la taille de police et le style de texte que vous avez choisis. Généralement, le gras est utilisé pour les titres ou pour mettre l'accent sur les segments, tandis que l'italique est utilisé pour les citations.
Changer la couleur de la forme du cadre
En plus de changer la police, vous souhaiterez également modifier la couleur de la forme de votre cadre. Encore une fois, la teinte exacte dépendra de la marque pour laquelle vous concevez ou de votre esthétique. Heureusement, l’interface de Figma facilite la sélection d’une couleur.
Voici comment modifier les couleurs de votre cadre :
- Sélectionnez le cadre que vous souhaitez modifier.
- Le calque apparaîtra dans la barre latérale droite. Accédez à la section « remplir ».
- Sélectionnez le «+» pour ajouter un remplissage.
- Une fenêtre de sélection de couleurs s'ouvrira. Sélectionnez la couleur de remplissage et le dégradé. Vous pouvez également saisir un code hexadécimal si vous connaissez la teinte exacte.
Comme pour d’autres éléments de conception, vous devrez peut-être expérimenter différentes couleurs et leur apparence avec la police que vous avez choisie.
FAQ
Existe-t-il une commande de texte défilant dans Figma ?
Malheureusement, il n'existe aucune commande permettant de faire défiler un texte dans Figma. Cependant, vous pouvez terminer le processus en quelques clics en utilisant la méthode mentionnée ci-dessus.
Comment puis-je décider quelle option de débordement je souhaite ?
Cela dépend du type de texte que vous utilisez, de la conception globale et de sa fonction. Le style vertical est généralement adapté pour parcourir des textes volumineux.
Quelle interface d’appareil nécessitera généralement une conception de texte défilant ?
cómo hacer poción de resistencia al fuego en Minecraft
Un bon exemple serait la conception de maquettes pour une application. Les utilisateurs peuvent créer un téléphone comme cadre général, tandis que le texte défilant peut être l'interface de l'application.
Figma est-il le meilleur choix pour créer des designs déroulants ?
Figma est l'un des meilleurs outils pour créer une large gamme de formulaires, y compris des modèles déroulants. Mieux encore, Figma est gratuit. Cependant, vous pourriez avoir certaines préférences personnelles. Essayez d'expérimenter avec quelques plates-formes, telles qu'Adobe Illustrator, jusqu'à ce que vous trouviez l'outil qui vous convient le mieux.
Rendez vos conceptions défilantes et conviviales
Créer n’importe quel texte dans un cadre dans Figma est facile. Sélectionnez simplement le cadre, puis passez à l'option de contenu du clip. Une fois terminé, vous pouvez choisir vos options de défilement de débordement. De même, vous ne devez pas négliger d’autres éléments de conception cruciaux, tels que la couleur et la forme du cadre ainsi que la police du texte. Rendre votre conception déroulante est un excellent choix pour les pages de destination, les interfaces d'applications et les fenêtres contextuelles. Cela rend les textes plus faciles à parcourir au lieu de cliquer, améliorant ainsi l'expérience utilisateur.
Avez-vous trouvé facile de rendre votre contenu défilable dans Figma ? Et si vous choisissiez la bonne police ? Faites-nous savoir dans la section commentaires ci-dessous.
