Comment Planifier Votre interface Utilisateur Avec Figma

Figma est un outil de conception collaborative basé sur le Web qui vous aide à créer des logos, des blogs, des sites Web, des applications et bien plus encore. Il est utile pour la conception de l'interface utilisateur et de l'expérience utilisateur. Savoir ce que c'est et ce que vous pouvez en faire est un excellent moyen de savoir comment cela fonctionne. Comprendre le fonctionnement de Figma est essentiel dans la conception d'applications, de blogs, de sites Web, etc. Cet article vous expliquera comment utiliser cet outil pour la conception d'interface, de la création d'un compte à la fonctionnalité principale de Figma. Vous pourrez savoir ce que vous pouvez faire sur Figma et comment vous pouvez le faire efficacement.

Pourquoi devrais-je utiliser Figma ?

Il y a plusieurs bonnes raisons d'utiliser cet outil.

Gratuit : Figma est accessible gratuitement aux utilisateurs, car il dispose d'un plan de démarrage.
Rapide : Il est rapide à utiliser ; tout ce dont vous avez besoin est un bon réseau Internet.
Basé sur un navigateur : il est basé sur un navigateur et fonctionne sur n'importe quel ordinateur, qu'il s'agisse d'un Mac ou d'un PC, et sur les Chromebooks.
Aperçu mobile : vous pouvez prévisualiser vos conceptions sur un écran mobile.
Installation facile : Le processus d'installation est très simple si vous avez l'intention d'utiliser la version de l'application.
Collaboration : plusieurs personnes peuvent travailler simultanément sur le même fichier de conception au lieu de l'exporter vers un fichier image et de l'envoyer par e-mail. Cette fonctionnalité permet aux membres de l'équipe travaillant sur le même projet de donner et de recevoir facilement des commentaires sur la conception.

Comment fonctionne Figma ?

La première chose à faire pour travailler avec Figma est une idée générale de ce sur quoi vous voulez travailler, par exemple une application. Ensuite, construisez sur cette idée et réfléchissez à tout ce dont vous avez besoin pour l'application. Cette idée sera la base de tout ce que vous devrez mettre en place pour atteindre votre objectif.

Une fois que vous avez construit une idée et connu votre public cible, vous déterminez comment un utilisateur utilisera l'application que vous créez et vous vous assurez que le placement de votre contenu vous donnera le résultat souhaité. Vous pourrez voir à quoi ressemblera tout ce que vous avez mis en place pour l'utilisateur. Vous pouvez maintenant recevoir des commentaires sur ce que votre public pense de l'application que vous avez conçue et apporter les corrections nécessaires, le cas échéant. À ce stade, un développeur front-end et back-end créera l'application créée.

Figma a un ensemble de belles fonctionnalités qui facilitent la conception. L'interface de Figma comprend les éléments suivants :

Menu : Pour accéder au menu principal de Figma design, cliquez sur l'icône de menu dans la barre latérale en haut à gauche. Parcourez le menu et voyez les différentes options qui s'y trouvent.
Outils : Vous pouvez accéder à différents outils sur Figma ; les boutons d'outils se trouvent dans la barre latérale en haut à gauche. Ils incluent l' outil de déplacement , l' outil de main , l' outil de texte , l' outil de commentaire , les outils de région , les outils de forme et les outils de dessin .

première

Modalité de ressources : cela vous permet de visualiser les composants et d'accéder à la communauté Figma. Il vous aide également à parcourir et à installer des plugins
Calques : c'est là que chaque élément créé dans le fichier apparaît avec ses noms, tels que les pages, les icônes, les cadres et les groupes.
Modifier l'objet : ceci se trouve dans la barre centrale supérieure et vous aide à entrer dans le mode d'édition de vecteur.
Créer des composants : cette fonctionnalité se trouve dans la barre centrale supérieure et permet de rendre les conceptions cohérentes.
Utiliser un masque : cela vous permet de masquer les parties souhaitées d'un objet, et il se trouve dans la barre centrale supérieure.
Partager : Le bouton de partage se trouve dans la barre latérale en haut à droite et vous aide à gérer qui peut accéder à votre fichier.
Présent : l'icône se trouve dans la barre latérale en haut à droite et permet de prévisualiser vos conceptions
Option Zoom/Affichage : L'icône de zoom se trouve dans la barre latérale en haut à droite et permet d'ajuster la façon dont vous visualisez le design.
Inspecter : le bouton d'inspection se trouve dans la barre supérieure gauche ; vous pouvez l'utiliser pour vérifier les éléments de conception.

Prototypage avec Figma

C'est le rôle principal de Figma car il rend l'application vivante et applicable. Cette fonctionnalité vous permet de prévisualiser les flux et les interactions des utilisateurs. De plus, il ajoute quelques retouches à vos projets au fur et à mesure que vous les terminez et vous aide à savoir où un bouton particulier vous mènera. Enfin, dans le prototypage, vous pouvez obtenir des commentaires des autres et présenter vos conceptions aux parties prenantes. Sélectionnez le bouton "Prototype" dans le coin supérieur droit pour utiliser cette fonctionnalité.

Ressources pour Figma

Figma a une fonctionnalité communautaire où les concepteurs partagent des idées et travaillent pour que d'autres puissent les voir, les modifier et apprendre. Ce sont ce que nous appelons les "ressources Figma" bénéfiques pour les concepteurs. Ces ressources sont précieuses car vous pouvez vous inspirer des autres ou recréer des éléments de leur conception sans recommencer depuis le début, ce qui peut être épuisant. Accédez à ces ressources sur https://figmaresource.com/ .

Vous pouvez également suivre les designers de la communauté Figma et aimer leur travail. Malheureusement, la communauté Figma est actuellement en version bêta, car seules quelques personnes peuvent y accéder, mais tant que vous suivez les processus impliqués, vous y avez accès. Vous devez créer votre profil après vous être connecté pour avoir accès en tant que membre. Pour suivre des créateurs et aimer des ressources, créez votre profil . Pour devenir créateur de la communauté Figma, remplissez le formulaire . De nombreuses conceptions d'interface utilisateur, des structures filaires, des icônes, des maquettes et d'autres ressources sont disponibles sur Figma Resource.

La communauté Figma crée des applications ou des programmes qui améliorent les capacités de Figma et Figjam, connus sous le nom de plugins Figma. Les plugins Figma fonctionnent sur les fichiers Figma et Figjam, un tableau blanc en ligne où les équipes partagent des idées. Pour accéder aux plugins Figma cliquez sur le lien https://www.figma.com/community/plugins . Il existe de nombreux plugins disponibles, et ils vous aident à gagner du temps. Par exemple, le plugin Unsplash vous aide à remplir des images pour un design sans quitter votre fichier. Les plugins sont développés en les écrivant en HTML. Une fonction de lecture et d'écriture pour les plugins permet aux développeurs de visualiser, d'utiliser et d'apporter des modifications.

Concevoir une landing page avec Figma

Pour concevoir une page de destination, vous n'avez pas besoin d'être un expert Figma. Concevoir sur Figma est convivial, et la possibilité de pratiquer les outils Figma essentiels vous aidera à le faire. Vous devez créer un compte sur http://www.figma.com et démarrer le processus de conception. N'oubliez pas que lors de la conception sur Figma, vous n'avez pas besoin d'enregistrer votre travail car il enregistre automatiquement. Commençons.

Vous pouvez accéder à Figma via une application de navigateur ou en installant l'application de bureau. Ils sont similaires avec peu de différence. Cependant, avec l'application de navigateur, elle ne prend pas de place sur votre ordinateur et il est plus facile de basculer entre les onglets. En revanche, l'application de bureau vous permet d'éviter les distractions car elle ne peut pas ouvrir d'autres onglets non pertinents. Selon vos préférences, vous devez vous connecter à votre compte pour commencer à concevoir.

Vous devez créer un compte. Pour l'application de bureau, vous téléchargerez l'application sur http://www.figma.com/downloads . Cliquez sur "application de bureau" et cliquez également sur "Application de bureau pour macOS" ou "Desktop pour Windows", selon votre appareil. Une fois l'application installée, vous serez redirigé vers votre navigateur pour créer un compte.

Pour la version navigateur, rendez-vous sur http://www.figma.com et créez un compte. On vous demandera "votre nom", "quel genre de travail faites-vous?" et "comment allez-vous principalement utiliser Figma ?". Ensuite, vous vérifiez votre e-mail.

Figma propose trois niveaux de tarification : un plan de démarrage gratuit, un plan professionnel et un plan organisationnel. Allez sur http://www.figma.com/pricing/ pour voir les détails des prix.

Conception de la page de connexion de Figma

Il existe deux types de fichiers sur Figma : les fichiers de conception et les fichiers Figjam.

Un fichier de conception est un environnement collaboratif pour la production d'interfaces utilisateur et de matériaux.
Un fichier Figjam sert à créer des organigrammes d'utilisateurs, des diagrammes, des recherches et des brainstormings, ce qui aidera à la conception.

Laissez-nous concevoir la page de connexion de Figma ; ce qui suit est un exemple.

Connectez-vous à votre compte Figma et cliquez sur "Nouveau fichier de conception". Cela vous amène à la zone de conception Figma.

Création de pages/cadres

Cliquez sur le signe + dans la barre latérale droite pour créer une nouvelle page de conception. Les cadres ressemblent davantage à des plans de travail et les conceptions y vivent. Vous pouvez créer une application mobile, un ordinateur de bureau ou des cadres personnalisés. Laissez-nous créer un cadre pour un appareil mobile comme un iPhone 8. Il existe plusieurs façons de créer un cadre sur Figma, notamment :

Appuyez sur F ou A pour voir toutes les options de cadre dans la barre latérale droite du fichier de conception, puis choisissez Téléphone dans la barre des paramètres à gauche et sélectionnez iPhone 8.
Vous pouvez sélectionner l'outil cadre dans le menu en haut à gauche du fichier de conception : choisissez Téléphone dans la barre des paramètres à gauche et sélectionnez iPhone 8.
Vous pouvez également rechercher sur Google le type de cadre que vous souhaitez s'il ne figure pas dans la liste disponible pour connaître la taille, puis le créer.

Créer des formes

Vous pouvez utiliser Figma pour créer différentes formes telles que des rectangles, des cercles, des lignes et bien d'autres. Vous pouvez y accéder sur la barre supérieure. Créons un rectangle pour "continuer avec google, e-mail, mot de passe et créer une option de compte".

Vous pouvez créer un rectangle en sélectionnant le menu de forme dans la barre latérale supérieure gauche de la zone du fichier de conception ou en appuyant sur R.

Créez la taille exacte du rectangle comme indiqué sur la page de connexion Figma. Vous remarquerez que le rectangle a des courbes sur les bords.
Créez la courbe en cliquant sur le rectangle, en appuyant sur l'option "rayon d'angle" dans la barre de paramètres à gauche, puis en augmentant le nombre jusqu'à la courbe souhaitée.
Copiez et collez le rectangle à trois endroits différents et organisez-les tels qu'ils apparaissent sur la page de connexion Figma.

sept

Création de calques de texte

Vous pouvez ajouter du texte à vos conceptions, et vous le faites en sélectionnant l'outil de texte dans la barre latérale en haut à gauche. L'outil de texte a la description « T ». Vous pouvez également ajouter du texte en appuyant sur T.

Créez une zone de texte dans les différents rectangles et saisissez les textes tels qu'ils apparaissent sur la page de connexion Figma. Vous pouvez modifier la façon dont les textes apparaissent dans la barre latérale droite.

Importation de ressources/images

Les images sont essentielles dans les conceptions car elles rendent vos conceptions accrocheuses. Vous pouvez les ajouter aux conceptions localement ou en ligne et les redimensionner selon vos préférences. En ajoutant des images localement, vous pouvez les récupérer à partir de fichiers sur votre appareil. Ensuite, vous faites glisser et déposez dans le fichier de conception ou ajoutez-les en sélectionnant "placer l'image" dans l'outil de forme en haut à gauche de la barre latérale. Lors de la recherche d'images en ligne, lorsque vous voyez une image que vous souhaitez en ligne, vous la téléchargez sur votre appareil.

Pour ajouter le logo Google sur l'option "continuer avec google", recherchez sur Google et téléchargez.
Importez le fichier et redimensionnez-le pour l'adapter.

Ajouter des couleurs

La couleur aide à embellir et à attirer l'attention sur nos créations. Lorsque nous avons des éléments liés dans nos conceptions, nous utilisons également des couleurs pour regrouper et organiser les éléments.

En regardant la page de connexion Figma, vous verrez la couleur en arrière-plan, les rectangles et le texte.

Pour ajouter de la couleur à l'arrière-plan, aux rectangles ou aux textes, cliquez dessus, puis appuyez sur l'option "remplir" dans la barre latérale droite pour les remplir avec les couleurs souhaitées.

Ajout de traits

Les traits sont des caractéristiques visuelles que nous ajoutons aux couches de nos conceptions. Ils aident à Vous pouvez ajouter différents types de traits en fonction de vos conceptions. Les bords des rectangles ont des traits épais, c'est pourquoi vous ne pouvez pas voir les bords des rectangles après avoir ajouté des couleurs.

Cliquez sur l'option trait dans la barre latérale droite pour ajouter des traits aux rectangles.
Vous pouvez ajouter différents types de traits et différents paramètres de trait.
Ajoutez trois traits pour afficher comme ça sur la page de connexion Figma.

Dix

Regroupement d'éléments

Le regroupement est un moyen de joindre ou d'unir des caractéristiques similaires dans des conceptions afin que l'utilisateur puisse facilement les utiliser sans se désorganiser. Par exemple, le regroupement nous aide à déplacer différents objets simultanément comme s'ils étaient identiques sans qu'ils ne se dispersent.

Notez que lorsque vous déplacez le rectangle, le texte ne bouge pas avec lui. Il va donc falloir regrouper les textes et les rectangles pour les organiser et s'assurer qu'ils ne s'éparpillent pas lorsqu'on les déplace. Mettez en surbrillance les éléments que vous souhaitez grouper, faites un clic droit, puis sélectionnez "Grouper la sélection" ou appuyez sur Ctrl + G pour les grouper.

Notre page de connexion est prête pour le prototypage.

Cliquez sur l'onglet prototype dans la barre latérale en haut à droite pour utiliser la fonction de prototype et voir comment la conception apparaîtra.
Cliquez sur le bouton Présent dans la barre latérale en haut à droite pour afficher le prototype.

Conclusion

Travailler avec Figma est une expérience passionnante et amusante. Il existe une excellente occasion pour vous d'apprendre des choses étonnantes sur les conceptions, et une pratique constante vous rend parfait. Alors continuez à apprendre et à explorer tout ce que Figma vous réserve.

Lien : https://blog.openreplay.com/plan-your-user-interface-with-figma

#figma

What is GEEK

Buddha Community

Comment Planifier Votre interface Utilisateur Avec Figma

Thierry Perret

1659456900

Comment Planifier Votre interface Utilisateur Avec Figma

Figma est un outil de conception collaborative basé sur le Web qui vous aide à créer des logos, des blogs, des sites Web, des applications et bien plus encore. Il est utile pour la conception de l'interface utilisateur et de l'expérience utilisateur. Savoir ce que c'est et ce que vous pouvez en faire est un excellent moyen de savoir comment cela fonctionne. Comprendre le fonctionnement de Figma est essentiel dans la conception d'applications, de blogs, de sites Web, etc. Cet article vous expliquera comment utiliser cet outil pour la conception d'interface, de la création d'un compte à la fonctionnalité principale de Figma. Vous pourrez savoir ce que vous pouvez faire sur Figma et comment vous pouvez le faire efficacement.

Pourquoi devrais-je utiliser Figma ?

Il y a plusieurs bonnes raisons d'utiliser cet outil.

Gratuit : Figma est accessible gratuitement aux utilisateurs, car il dispose d'un plan de démarrage.
Rapide : Il est rapide à utiliser ; tout ce dont vous avez besoin est un bon réseau Internet.
Basé sur un navigateur : il est basé sur un navigateur et fonctionne sur n'importe quel ordinateur, qu'il s'agisse d'un Mac ou d'un PC, et sur les Chromebooks.
Aperçu mobile : vous pouvez prévisualiser vos conceptions sur un écran mobile.
Installation facile : Le processus d'installation est très simple si vous avez l'intention d'utiliser la version de l'application.
Collaboration : plusieurs personnes peuvent travailler simultanément sur le même fichier de conception au lieu de l'exporter vers un fichier image et de l'envoyer par e-mail. Cette fonctionnalité permet aux membres de l'équipe travaillant sur le même projet de donner et de recevoir facilement des commentaires sur la conception.

Comment fonctionne Figma ?

La première chose à faire pour travailler avec Figma est une idée générale de ce sur quoi vous voulez travailler, par exemple une application. Ensuite, construisez sur cette idée et réfléchissez à tout ce dont vous avez besoin pour l'application. Cette idée sera la base de tout ce que vous devrez mettre en place pour atteindre votre objectif.

Une fois que vous avez construit une idée et connu votre public cible, vous déterminez comment un utilisateur utilisera l'application que vous créez et vous vous assurez que le placement de votre contenu vous donnera le résultat souhaité. Vous pourrez voir à quoi ressemblera tout ce que vous avez mis en place pour l'utilisateur. Vous pouvez maintenant recevoir des commentaires sur ce que votre public pense de l'application que vous avez conçue et apporter les corrections nécessaires, le cas échéant. À ce stade, un développeur front-end et back-end créera l'application créée.

Figma a un ensemble de belles fonctionnalités qui facilitent la conception. L'interface de Figma comprend les éléments suivants :

Menu : Pour accéder au menu principal de Figma design, cliquez sur l'icône de menu dans la barre latérale en haut à gauche. Parcourez le menu et voyez les différentes options qui s'y trouvent.
Outils : Vous pouvez accéder à différents outils sur Figma ; les boutons d'outils se trouvent dans la barre latérale en haut à gauche. Ils incluent l' outil de déplacement , l' outil de main , l' outil de texte , l' outil de commentaire , les outils de région , les outils de forme et les outils de dessin .

première

Modalité de ressources : cela vous permet de visualiser les composants et d'accéder à la communauté Figma. Il vous aide également à parcourir et à installer des plugins
Calques : c'est là que chaque élément créé dans le fichier apparaît avec ses noms, tels que les pages, les icônes, les cadres et les groupes.
Modifier l'objet : ceci se trouve dans la barre centrale supérieure et vous aide à entrer dans le mode d'édition de vecteur.
Créer des composants : cette fonctionnalité se trouve dans la barre centrale supérieure et permet de rendre les conceptions cohérentes.
Utiliser un masque : cela vous permet de masquer les parties souhaitées d'un objet, et il se trouve dans la barre centrale supérieure.
Partager : Le bouton de partage se trouve dans la barre latérale en haut à droite et vous aide à gérer qui peut accéder à votre fichier.
Présent : l'icône se trouve dans la barre latérale en haut à droite et permet de prévisualiser vos conceptions
Option Zoom/Affichage : L'icône de zoom se trouve dans la barre latérale en haut à droite et permet d'ajuster la façon dont vous visualisez le design.
Inspecter : le bouton d'inspection se trouve dans la barre supérieure gauche ; vous pouvez l'utiliser pour vérifier les éléments de conception.

Prototypage avec Figma

C'est le rôle principal de Figma car il rend l'application vivante et applicable. Cette fonctionnalité vous permet de prévisualiser les flux et les interactions des utilisateurs. De plus, il ajoute quelques retouches à vos projets au fur et à mesure que vous les terminez et vous aide à savoir où un bouton particulier vous mènera. Enfin, dans le prototypage, vous pouvez obtenir des commentaires des autres et présenter vos conceptions aux parties prenantes. Sélectionnez le bouton "Prototype" dans le coin supérieur droit pour utiliser cette fonctionnalité.

Ressources pour Figma

Figma a une fonctionnalité communautaire où les concepteurs partagent des idées et travaillent pour que d'autres puissent les voir, les modifier et apprendre. Ce sont ce que nous appelons les "ressources Figma" bénéfiques pour les concepteurs. Ces ressources sont précieuses car vous pouvez vous inspirer des autres ou recréer des éléments de leur conception sans recommencer depuis le début, ce qui peut être épuisant. Accédez à ces ressources sur https://figmaresource.com/ .

Vous pouvez également suivre les designers de la communauté Figma et aimer leur travail. Malheureusement, la communauté Figma est actuellement en version bêta, car seules quelques personnes peuvent y accéder, mais tant que vous suivez les processus impliqués, vous y avez accès. Vous devez créer votre profil après vous être connecté pour avoir accès en tant que membre. Pour suivre des créateurs et aimer des ressources, créez votre profil . Pour devenir créateur de la communauté Figma, remplissez le formulaire . De nombreuses conceptions d'interface utilisateur, des structures filaires, des icônes, des maquettes et d'autres ressources sont disponibles sur Figma Resource.

La communauté Figma crée des applications ou des programmes qui améliorent les capacités de Figma et Figjam, connus sous le nom de plugins Figma. Les plugins Figma fonctionnent sur les fichiers Figma et Figjam, un tableau blanc en ligne où les équipes partagent des idées. Pour accéder aux plugins Figma cliquez sur le lien https://www.figma.com/community/plugins . Il existe de nombreux plugins disponibles, et ils vous aident à gagner du temps. Par exemple, le plugin Unsplash vous aide à remplir des images pour un design sans quitter votre fichier. Les plugins sont développés en les écrivant en HTML. Une fonction de lecture et d'écriture pour les plugins permet aux développeurs de visualiser, d'utiliser et d'apporter des modifications.

Concevoir une landing page avec Figma

Pour concevoir une page de destination, vous n'avez pas besoin d'être un expert Figma. Concevoir sur Figma est convivial, et la possibilité de pratiquer les outils Figma essentiels vous aidera à le faire. Vous devez créer un compte sur http://www.figma.com et démarrer le processus de conception. N'oubliez pas que lors de la conception sur Figma, vous n'avez pas besoin d'enregistrer votre travail car il enregistre automatiquement. Commençons.

Vous pouvez accéder à Figma via une application de navigateur ou en installant l'application de bureau. Ils sont similaires avec peu de différence. Cependant, avec l'application de navigateur, elle ne prend pas de place sur votre ordinateur et il est plus facile de basculer entre les onglets. En revanche, l'application de bureau vous permet d'éviter les distractions car elle ne peut pas ouvrir d'autres onglets non pertinents. Selon vos préférences, vous devez vous connecter à votre compte pour commencer à concevoir.

Vous devez créer un compte. Pour l'application de bureau, vous téléchargerez l'application sur http://www.figma.com/downloads . Cliquez sur "application de bureau" et cliquez également sur "Application de bureau pour macOS" ou "Desktop pour Windows", selon votre appareil. Une fois l'application installée, vous serez redirigé vers votre navigateur pour créer un compte.

Pour la version navigateur, rendez-vous sur http://www.figma.com et créez un compte. On vous demandera "votre nom", "quel genre de travail faites-vous?" et "comment allez-vous principalement utiliser Figma ?". Ensuite, vous vérifiez votre e-mail.

Figma propose trois niveaux de tarification : un plan de démarrage gratuit, un plan professionnel et un plan organisationnel. Allez sur http://www.figma.com/pricing/ pour voir les détails des prix.

Conception de la page de connexion de Figma

Il existe deux types de fichiers sur Figma : les fichiers de conception et les fichiers Figjam.

Un fichier de conception est un environnement collaboratif pour la production d'interfaces utilisateur et de matériaux.
Un fichier Figjam sert à créer des organigrammes d'utilisateurs, des diagrammes, des recherches et des brainstormings, ce qui aidera à la conception.

Laissez-nous concevoir la page de connexion de Figma ; ce qui suit est un exemple.

Connectez-vous à votre compte Figma et cliquez sur "Nouveau fichier de conception". Cela vous amène à la zone de conception Figma.

Création de pages/cadres

Cliquez sur le signe + dans la barre latérale droite pour créer une nouvelle page de conception. Les cadres ressemblent davantage à des plans de travail et les conceptions y vivent. Vous pouvez créer une application mobile, un ordinateur de bureau ou des cadres personnalisés. Laissez-nous créer un cadre pour un appareil mobile comme un iPhone 8. Il existe plusieurs façons de créer un cadre sur Figma, notamment :

Appuyez sur F ou A pour voir toutes les options de cadre dans la barre latérale droite du fichier de conception, puis choisissez Téléphone dans la barre des paramètres à gauche et sélectionnez iPhone 8.
Vous pouvez sélectionner l'outil cadre dans le menu en haut à gauche du fichier de conception : choisissez Téléphone dans la barre des paramètres à gauche et sélectionnez iPhone 8.
Vous pouvez également rechercher sur Google le type de cadre que vous souhaitez s'il ne figure pas dans la liste disponible pour connaître la taille, puis le créer.

Créer des formes

Vous pouvez utiliser Figma pour créer différentes formes telles que des rectangles, des cercles, des lignes et bien d'autres. Vous pouvez y accéder sur la barre supérieure. Créons un rectangle pour "continuer avec google, e-mail, mot de passe et créer une option de compte".

Vous pouvez créer un rectangle en sélectionnant le menu de forme dans la barre latérale supérieure gauche de la zone du fichier de conception ou en appuyant sur R.

Créez la taille exacte du rectangle comme indiqué sur la page de connexion Figma. Vous remarquerez que le rectangle a des courbes sur les bords.
Créez la courbe en cliquant sur le rectangle, en appuyant sur l'option "rayon d'angle" dans la barre de paramètres à gauche, puis en augmentant le nombre jusqu'à la courbe souhaitée.
Copiez et collez le rectangle à trois endroits différents et organisez-les tels qu'ils apparaissent sur la page de connexion Figma.

sept

Création de calques de texte

Vous pouvez ajouter du texte à vos conceptions, et vous le faites en sélectionnant l'outil de texte dans la barre latérale en haut à gauche. L'outil de texte a la description « T ». Vous pouvez également ajouter du texte en appuyant sur T.

Créez une zone de texte dans les différents rectangles et saisissez les textes tels qu'ils apparaissent sur la page de connexion Figma. Vous pouvez modifier la façon dont les textes apparaissent dans la barre latérale droite.

Importation de ressources/images

Les images sont essentielles dans les conceptions car elles rendent vos conceptions accrocheuses. Vous pouvez les ajouter aux conceptions localement ou en ligne et les redimensionner selon vos préférences. En ajoutant des images localement, vous pouvez les récupérer à partir de fichiers sur votre appareil. Ensuite, vous faites glisser et déposez dans le fichier de conception ou ajoutez-les en sélectionnant "placer l'image" dans l'outil de forme en haut à gauche de la barre latérale. Lors de la recherche d'images en ligne, lorsque vous voyez une image que vous souhaitez en ligne, vous la téléchargez sur votre appareil.

Pour ajouter le logo Google sur l'option "continuer avec google", recherchez sur Google et téléchargez.
Importez le fichier et redimensionnez-le pour l'adapter.

Ajouter des couleurs

La couleur aide à embellir et à attirer l'attention sur nos créations. Lorsque nous avons des éléments liés dans nos conceptions, nous utilisons également des couleurs pour regrouper et organiser les éléments.

En regardant la page de connexion Figma, vous verrez la couleur en arrière-plan, les rectangles et le texte.

Pour ajouter de la couleur à l'arrière-plan, aux rectangles ou aux textes, cliquez dessus, puis appuyez sur l'option "remplir" dans la barre latérale droite pour les remplir avec les couleurs souhaitées.

Ajout de traits

Les traits sont des caractéristiques visuelles que nous ajoutons aux couches de nos conceptions. Ils aident à Vous pouvez ajouter différents types de traits en fonction de vos conceptions. Les bords des rectangles ont des traits épais, c'est pourquoi vous ne pouvez pas voir les bords des rectangles après avoir ajouté des couleurs.

Cliquez sur l'option trait dans la barre latérale droite pour ajouter des traits aux rectangles.
Vous pouvez ajouter différents types de traits et différents paramètres de trait.
Ajoutez trois traits pour afficher comme ça sur la page de connexion Figma.

Dix

Regroupement d'éléments

Le regroupement est un moyen de joindre ou d'unir des caractéristiques similaires dans des conceptions afin que l'utilisateur puisse facilement les utiliser sans se désorganiser. Par exemple, le regroupement nous aide à déplacer différents objets simultanément comme s'ils étaient identiques sans qu'ils ne se dispersent.

Notez que lorsque vous déplacez le rectangle, le texte ne bouge pas avec lui. Il va donc falloir regrouper les textes et les rectangles pour les organiser et s'assurer qu'ils ne s'éparpillent pas lorsqu'on les déplace. Mettez en surbrillance les éléments que vous souhaitez grouper, faites un clic droit, puis sélectionnez "Grouper la sélection" ou appuyez sur Ctrl + G pour les grouper.

Notre page de connexion est prête pour le prototypage.

Cliquez sur l'onglet prototype dans la barre latérale en haut à droite pour utiliser la fonction de prototype et voir comment la conception apparaîtra.
Cliquez sur le bouton Présent dans la barre latérale en haut à droite pour afficher le prototype.

Conclusion

Travailler avec Figma est une expérience passionnante et amusante. Il existe une excellente occasion pour vous d'apprendre des choses étonnantes sur les conceptions, et une pratique constante vous rend parfait. Alors continuez à apprendre et à explorer tout ce que Figma vous réserve.

Lien : https://blog.openreplay.com/plan-your-user-interface-with-figma

#figma

Zoltan Szogyenyi

1620761928

Figma design kit built to integrate with Tailwind CSS

Hey everyone ✌🏻

Together with my friend, we developed a design kit in Figma specifically to be integrated with Tailwind CSS, a trending new utility first CSS framework.

You can find more information about the Tailwind CSS Figma design kit on Flowbite.

It’s open source 💙

#tailwind #figma #tailwind-figma #tailwind-ui #figma-ui #figma-ui-kit

Ruthie Bugala

1678085779

Difference Between Figma Vs Adobe XD

Welcome to the life of a UX designer, where you have options galore when it comes to the best user experience (UX) and user interface (UI) design software. Choosing a tool like Figma vs Adobe XD is a big deal as it impacts the workflow, the overall experience, and the collaboration with the clients - it is the most important tool UX designers work with.

If you’re a UX/UI professional, keep reading to find out more about how Figma vs Adobe XD work, their features, and which one might be the best for you to deliver a top-quality product.

What is Figma?

Figma is an interface, vector design, and cloud-based software that runs in the browser. It is considered by many designers as the best application to support team-based collaborative design projects. Figma gives you all the tools and elements you need to create full-fledged web design, prototyping, and code generation for the handoff.

Figma vs Adobe XD: main differences

What is Figma used for?

Although Figma looks a lot like other prototyping tools, its key differentiator is the ability to work with teams. But simply put, Figma:

Is an online UI design tool that supports the Product Design Process
Allows you to create icons, social media graphics, presentations, and much more for free;
Access hundreds of fonts, shapes, and colors to create dynamic visuals;
Create responsive mockups for a more real life-based draft;
Allows you to create your own libraries of content or use free libraries from other creators;
Customize your graphic design assets with powerful features;
Design directly in the browser as everything lives online, and for free;
You can co-edit with your team within the same file.

Figma is hence considered:

A prototyping tool

Allows you to design, prototype, and present, all in the same tool;
All updates to the design are immediately reflected in the prototype without the need for syncing of exporting;
You can get feedback from your team by simply sharing a link;
You’re able to run the prototypes on mobile for more reliable user testing;
It has recently started smart animation;
There’s now a prototype series available with different screen sizes optimized for the Apple watch.

A code generator for handoff

Developers can inspect, copy and export CSS directly from the design file and adapt it to iOS and Android;
They can mirror designs on mobile using “live device preview”;
They can also adjust the size of the frame to test how layouts will adapt to different screen sizes.

It’s important to mention that Figma is backed by a large community of designers and developers who provide plugins to improve functionality and streamline workflows. Everyone is welcome to contribute and share.

What is Adobe XD

Adobe XD is a vector-based UI/UX design tool that enables you to design anything from smartwatch apps to fully-fledged websites. Adobe XD promises a breath of fresh air for professionals who are still using Photoshop or Illustrator for UI design, being the only Adobe tool that allows prototyping.

Figma vs Adobe XD: main differences

What is Adobe XD used for?

Adobe XD was developed with mobile and web experiences in mind, and design teams are leveraging its features for their full experience design process.

Application-wise, Adobe XD is used for:

Website design - Website design and Adobe XD work well together, from information architecture to layout and prototyping. Concepts and ideas are brought together with ease using productivity features like Stacks, Padding, and Repeat Grid to define navigation patterns, scrolling, and much more for your website;

App design - Designing apps for mobile phones, desktop apps, or even web apps requires dynamic interactions, multiple navigation patterns, and a variety of screen sizes, including less common ones like a digital mupi. Adobe XD makes creating app experiences easy with features like Responsive Resize, pre-built artboard sizes for common devices, and prototype features like auto-animate and dragging triggers;

Game design - You can map out and test game menus, settings, and other interface components directly in Adobe XD by simply plugin in a supported Bluetooth game controller;

Voice assistant design - Adobe XD enables you to create prototypes of virtual assistants thanks to its powerful voice commands and connections with Amazon Alexa and Google Assistant that allow you to test experiences.

Features-wise, Adobe XD has many of the similar features of Figma:

UI design - With integrations with Creative Cloud apps, like Photoshop and Illustrator, you can easily pull in assets and have access to all the necessary tools to do your best work;

UX design - You can iterate quickly, test interactions and processes, and get a truer sense of friction spots so you’re able to fix them as soon as you spot them;

Wireframing - UI kits enable you to easily create interactive wireframes to test your design and go through user flows;

Prototyping - Adobe XD’s advanced capabilities like auto-animate and voice make it easier to build a prototype design that consumers can explore and engage with - leading to a better user experience;

Developer handoff - Adobe XD's sharing mode enables you to collaborate with development teams from the start. Whether you're using a voiceover recording to walk over your design or sharing development details, XD keeps you connected at all times.

Team collaboration - Live co-editing and cloud files enable easier collaboration within your team.

Figma vs Adobe XD: main differences

Since the advent of Adobe XD in 2016, Figma vs Adobe XD have been running against each other. The rivalry wasn't fierce initially, with XD's early editions lacking several critical features, but that has improved in recent years. The competition between the two softwares has now intensified, and it becomes harder to pick which one is best for you and your project.

The main difference between Figma vs Adobe XD is the price. While Figma is free for individual users, and you only pay if you want to have access to features like coworking, for Adobe XD you have to pay before using it. Below, we are going to cover where each one shines, and which one is better for your specific set of circumstances.

Supported platforms

Figma

Desktop - Windows, Mac, Linux (Figma-linux app provides support);
Desktop Browsers - Editing can be done in any WebGL supporting browser - ChromeOS, Linux, and Berkeley Software Distribution (BSD) based systems. Clients can also preview the drafts in desktop browsers;
Mobile device browsers - iOS and Android are available on view-only mode; moreover Figma is supported on Safari, Chrome, and Firefox;
Mobile apps - iOS and Android have the Figma Mirrow app that emulates mobile devices.

Adobe XD

Desktop - Windows and Mac;
Desktop and Mobile Browsers - XD generates previews of the designs in the browser so that clients can give feedback;
Mobile apps - iOS and Android have the Adobe XD app for live previews.

Figma

Multiplayer - Any number of users can be logged in and edit a document at the same time;
Observation mode - You are able to mirror your teammates’ screen so you can see as they move around a document or draft. This is useful if you want to watch a client move through a prototype and see if there are any flaws;
Team libraries - You can build design systems for your own work that include reusable components, color schemes, and font styles, and also make those design systems available to your whole team so that everyone is working with the same elements;
Automatic save & sync - Any modifications to documents and design systems will be immediately saved and synced. If a change occurs while a teammate is working on a shared project, they will be notified, ensuring that all team members are up to date at all times. There will be no need for file uploads, downloads, or manual merges.

Adobe XD

Coediting - There’s a collaborative "coediting" design beta capability as of November 2019, which works similarly to Figma's "multiplayer" feature. The only visible difference between the two right now is that on Adobe XD you don't see the live cursors of other designers working on the document;
Linked assets - When a document is saved to the cloud, its components and styles may be accessible through linking;
Creative Cloud libraries - You can organize and access assets through CC Libraries; this may be similar to Figma’s Team Libraries but the features to facilitate collaboration are not as good in XD.

Figma

Uses frames that act as containers that represent viewports and design sub-elements such as buttons, content sections, navigation elements, amongst others. Frames have all the functionalities as the below artboards have, and they can also bring added functionalities to these elements, such as grids and auto-layout.

Adobe XD

Uses artboards that also act as containers that represent viewports that only hold designs - e.g. a phone screen vs a laptop screen. While prototyping, you can link these artboards together to simulate the movement of a user across a site or app. While frames can do everything artboards do, XD’s artboards can’t do everything Figma’s frames can do.

Prototyping

Both Figma and Adobe XD are used for prototyping, but XD is slightly better as it has a collection of triggers that facilitate more types of UI designs. Let’s take a look.

Figma

Allows you multiple interactions per element as long as they are different:

Triggers

On click
On drag
While hovering
While pressing
Mouse enter
Mouse leave
Mouse down
Mouse up
After delay

Actions

Navigate to (frame - use to move between artboard type frames)
Open overlay (frame)
Swap with (frame - use to swap in alternate component type frames, e.g. buttons, see next section for more info)
Back
Close overlay
Open URL

Transitions

Instant
Dissolve
Smart Animate (see section after next)
Move In
Move Out
Push
Slide In
Slide Out

Easing

Ease In
Ease Out
Ease In and Out
Linear

Adobe XD

Allows you multiple interactions per item like a hover interaction and a click interaction:

Triggers

Tap
Drag
Hover
Time
Voice
Keys
Gamepad

Actions

Transitions
Auto-animate
Overlay
Speech Playback
Previous artboard
State change

Transitions

Right
Up
Down
Dissolve
Slide left
Slide right
Slide up
Slide down
Push left

Easing

None (aka linear)
Ease Out
Ease In
Ease In-Out
Snap
Wind Up
Bounce

We can conclude that Adobe XD enables for more than one interaction per element, allowing you to create prototypes with functionalities closer to people's behavior in the browser.

Handoff

Figma

As already mentioned, Figma can generate CSS, Swift for iOS, and XML for Android. It also lets you directly copy the CSS or SVG. Also, if there is a change in the document, the code will be automatically regenerated.

Adobe XD

XD generates CSS codes, but you have to first generate a developer link and then open that link in a browser. Unlike Figma, if the document changes here, you'll need to regenerate the link and refresh it.

Is Figma better than Adobe XD?

Short answer: yes. Figma has been - arguably - the one design tool design teams choose for its amazing team collaboration feature. It simplifies the design process and effectively helps designers and teams work together more efficiently as you’re able to collaborate live with your teammates. Also, designers and teams highly benefit from Figma because:

It’s free and you can access it without having to download apps;
It works on any platform;
Collaboration is simple and familiar;
Sharing is uncomplicated and flexible;
Embedded files provide real-time updating;
Prototyping is straightforward and intuitive;
Developer handoff is easy;
Team libraries are ideal for design systems, allowing anyone with access use the latest versions.

Conclusion

The battle between Figma vs Adobe XD will continue, and they are undoubtedly pushing each other to improve and step up their game. On a pretty frequent basis, we now see features that were exclusive to one appear in the other, making it harder for designers to decide which one to pick to create a top-quality product.

But if collaboration is important to you and your team, Figma is the best choice for you. It was designed from the bottom up with teamwork in mind, and as such, no other software will be able to compete against it any time soon. It also outpaces Adobe XD being better at frames vs artboards, auto-layout, responsiveness, and graphic design/UI design overall.

On the other hand, you have a better chance with Adobe XD if you’re already used to Adobe’s ecosystem and within the Creative Cloud. Also, Adobe XD is slightly better at prototyping when it comes to auto-animation and voice, facilitating its accuracy.

Original article sourced at: https://www.imaginarycloud.com

#figma #figma

Verónica Batista

1678096140

Diferença entre Figma e Adobe XD

Bem-vindo à vida de um designer de UX, onde você tem opções em abundância quando se trata da melhor experiência do usuário (UX) e software de design de interface do usuário (UI) . Escolher uma ferramenta como Figma vs Adobe XD é importante, pois afeta o fluxo de trabalho, a experiência geral e a colaboração com os clientes - é a ferramenta mais importante com a qual os designers de UX trabalham.

Se você é um profissional de UX/UI, continue lendo para saber mais sobre como funciona o Figma x Adobe XD , seus recursos e qual deles pode ser o melhor para você entregar um produto de alta qualidade.

O que é Figma?

Figma é uma interface, design vetorial e software baseado em nuvem que roda no navegador. É considerado por muitos designers como o melhor aplicativo para dar suporte a projetos de design colaborativo baseados em equipe. O Figma fornece todas as ferramentas e elementos necessários para criar um web design completo , prototipagem e geração de código para o handoff .

Figma vs Adobe XD: principais diferenças

Para que serve o Figma?

Embora o Figma se pareça muito com outras ferramentas de prototipagem, seu principal diferencial é a capacidade de trabalhar com equipes. Mas simplesmente, Figma:

É uma ferramenta de design de interface do usuário online que oferece suporte ao processo de design de produto
Permite criar ícones , gráficos de mídia social , apresentações e muito mais gratuitamente;
Acesse centenas de fontes, formas e cores para criar visuais dinâmicos ;
Crie maquetes responsivas para um rascunho mais baseado na vida real ;
Permite que você crie suas próprias bibliotecas de conteúdo ou use bibliotecas gratuitas de outros criadores;
Personalize seus recursos de design gráfico com recursos poderosos ;
Projete diretamente no navegador, pois tudo fica online e de graça;
Você pode coeditar com sua equipe no mesmo arquivo.

Figma é, portanto, considerado:

Uma ferramenta de prototipagem

Permite projetar, prototipar e apresentar, tudo na mesma ferramenta;
All updates to the design are immediately reflected in the prototype without the need for syncing of exporting;
You can get feedback from your team by simply sharing a link;
You’re able to run the prototypes on mobile for more reliable user testing;
It has recently started smart animation;
There’s now a prototype series available with different screen sizes optimized for the Apple watch.

A code generator for handoff

Developers can inspect, copy and export CSS directly from the design file and adapt it to iOS and Android;
They can mirror designs on mobile using “live device preview”;
They can also adjust the size of the frame to test how layouts will adapt to different screen sizes.

É importante mencionar que o Figma é apoiado por uma grande comunidade de designers e desenvolvedores que fornecem plugins para melhorar a funcionalidade e simplificar os fluxos de trabalho. Todos são bem-vindos para contribuir e compartilhar .

O que é o Adobe XD

O Adobe XD é uma ferramenta de design de interface do usuário/UX baseada em vetor que permite projetar qualquer coisa, desde aplicativos smartwatch até sites completos. O Adobe XD promete uma lufada de ar fresco para os profissionais que ainda usam o Photoshop ou o Illustrator para design de interface do usuário, sendo a única ferramenta da Adobe que permite a prototipagem.

Figma vs Adobe XD: principais diferenças

Para que serve o Adobe XD?

O Adobe XD foi desenvolvido com experiências móveis e da Web em mente , e as equipes de design estão aproveitando seus recursos para o processo de design de experiência completa.

Em termos de aplicativos, o Adobe XD é usado para:

Design do site - O design do site e o Adobe XD funcionam bem juntos, desde a arquitetura da informação até o layout e a prototipagem. Conceitos e ideias são reunidos com facilidade usando recursos de produtividade como Stacks, Padding e Repeat Grid para definir padrões de navegação, rolagem e muito mais para o seu site;

Design de aplicativos - Projetar aplicativos para celulares, aplicativos de desktop ou até mesmo aplicativos da web requer interações dinâmicas, vários padrões de navegação e uma variedade de tamanhos de tela, incluindo os menos comuns, como um mupi digital. O Adobe XD facilita a criação de experiências de aplicativos com recursos como redimensionamento responsivo, tamanhos de prancheta pré-criados para dispositivos comuns e recursos de protótipo como acionamentos de animação automática e arrastar;