Comment créer un élément défilable dans Figma
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 explique comment rendre vos créations Figma défilables.
Ajuster 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 de texte pour créer une zone de texte et placez-la dans le cadre déroulant. Saisissez 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 sur le prototype onglet, 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 :
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 une conception 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 son interaction avec le contenu. Ils peuvent faire 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éroulants
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 sélectionner la bonne esthétique nécessite un examen attentif.
Comment changer la police de votre conception à défilement
La première chose que vous devrez faire est de changer la police. police sur 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.
Naviguez jusqu’au menu déroulant situé en haut à gauche et sélectionnez-le.
Faites défiler les polices jusqu’à trouver celle que vous souhaitez utiliser.
Si la marque pour laquelle vous créez a une typographie particulière, vous choisirez probablement le même donc c’est cohérent 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, optez pour des polices moins décoratives mais élégantes. Autres composants – Votre police est un élément visuel comme n’importe quel autre dans votre conception. Il doit correspondre au cadre et aux autres composants que vous incluez. Esthétique générale 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’affichera pas la même police qu’une page de destination SAAS.
Bien que le choix de la police appropriée puisse nécessiter quelques expérimentations, quelques exemples de polices concrets constituent les options les plus fiables :
Roboto – Si vous voulez jouer la sécurité, alors 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. Elle est généralement fine mais présente différentes variations de poids et un aspect 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 souligner les segments, tandis que l’italique est utilisé pour les guillemets.
Changer la couleur de la forme du cadre
En plus de changer la police, vous souhaiterez également modifier votre couleur de la forme du 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 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 déterminer leur apparence avec celle que vous avez choisie. font.
FAQS
Existe-t-il une commande de texte défilant dans Figma ?
Malheureusement, il n’y a pas de commande pour rendre un texte défilant 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 souhaitez. réutilisation, la conception globale et 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 ?
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éfilants ?
Figma est l’un des meilleurs des outils permettant de 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 créations défilables et conviviales
Créer n’importe quel texte dans un cadre dans Figma, c’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éfilant dans Figma ? Et si vous choisissiez la bonne police ? Faites-le nous savoir dans la section commentaires ci-dessous.
Avertissement : Certaines pages de ce site peuvent inclure un lien d’affiliation. Cela n’affecte en rien notre éditorial.
