Prototypes web, wireframes UX, maquettes UI, visuels vectoriels ... Autant de créations qu'il est possible de réaliser sur Figma !
Dans cet article, nous nous intéresserons au design de votre futur site Webflow ✨
Car oui, Figma est sans doute le meilleur outil pour désigner ce dernier 😍
En avant !👇
Commençons par le commencement 👌
Figma est un outil de conception d'interface utilisateur (UI) et d'expérience utilisateur (UX) basé sur le cloud. Il permet aux concepteurs de créer des maquettes, des prototypes et des designs d'interface utilisateur pour les applications Web, mobiles et de bureau. Il s'agit d'une application en ligne qui permet aux concepteurs de collaborer en temps réel sur un design, de partager des fichiers avec les parties prenantes et de travailler à distance. C'est l'un de ses grands atouts 😍
Figma est également connu pour sa facilité d'utilisation et sa flexibilité. Les fonctionnalités de Figma incluent des outils de dessin vectoriel, des bibliothèques de composants, des outils de collaboration en temps réel, des capacités de prototypage, des fonctionnalités de versioning, des intégrations avec d'autres outils et des fonctionnalités de partage de fichiers. Cet outil est une véritable mine d'or dans le domaine du design 🏆
Il est particulièrement utile pour les équipes de conception travaillant à distance, pour une agence avec son client, car il permet aux différentes parties de collaborer en temps réel, de partager des fichiers, de commenter et de travailler sur des projets ensemble depuis des endroits différents.
C'est sans doute un des points qui explique une partie du succès de Figma ! 💪
En fait, l'outil propose une version gratuite (très avantageuse) ainsi qu'une version payante.
La version gratuite de Figma est appelée "Starter". Elle est destinée aux particuliers et aux petites équipes. Elle permet de créer un nombre illimité de fichiers et de prototypes, mais elle limite le nombre de pages par fichier et de projets d'équipe. Avec la version gratuite, vous pouvez travailler sur trois fichiers à la fois et accéder à une bibliothèque de composants limitée.
La version payante de Figma, "Professional", s'adresse aux équipes de taille moyenne à grande. Elle permet un nombre illimité de fichiers, de pages et de projets d'équipe. Elle offre également des fonctionnalités de collaboration avancées, telles que la gestion des versions, les commentaires et l'accès à une bibliothèque de composants partagés. Le prix varie en fonction du nombre de membres de l'équipe et de l'option d'abonnement choisie ✌🏼
Dans l'ensemble, Figma est une plateforme de conception accessible et flexible qui offre une gamme d'options pour les différents besoins des concepteurs et des équipes de conception. Vous devriez y trouver votre compte ☺️
Bien entendu, je ne vais pas vous faire une liste exhaustive des raisons pour lesquelles vous devriez utiliser Figma 😏 Il y en aurait trop ! Cela étant, ici je mets en avant les caractéristiques principales de l'outil qui agissent comme des avantages concurrentiels.
Comme évoqué précédemment, Figma est conçu pour permettre la collaboration en temps réel entre les membres de l'équipe. Plusieurs personnes peuvent donc travailler sur le même fichier simultanément, ce qui facilite grandement la collaboration ! 🤩
Figma est une application en ligne, ce qui signifie que vous pouvez y accéder depuis n'importe quel navigateur Web. Vous n'avez pas besoin d'installer de logiciel sur votre ordinateur, ce qui facilite l'accès et la collaboration entre les membres de l'équipe. Et de fait, l'outil ne prend de place dans votre espace de stockage 😉
Figma est un outil très intuitif et facile à utiliser. La courbe d'apprentissage de l'outil est rapide !
.gif)
Figma dispose d'une fonctionnalité de bibliothèque de composants qui vous permet de stocker et de réutiliser des éléments d'interface utilisateur couramment utilisés, ce qui accélère le processus de conception 🎨
Figma dispose d'outils de prototypage avancés qui vous permettent de créer des prototypes interactifs pour tester les fonctionnalités et les interactions de votre design.
Figma propose une version gratuite qui permet à une personne de travailler sur trois fichiers ! D'ailleurs, sa version payante est moins chère que celle d'Adobe XD ... (magnifique transition ✨)
Ceci pourrait vous intéresser si vous travaillez déjà avec d'autres produits Adobe tels que Photoshop ou Illustrator 😊 En effet, Adobe XD étant intégré à ces produits, c'est une bonne raison pour l'utiliser.
Idem, si vous avez déjà utilisé d'autres produits Adobe, vous trouverez probablement Adobe XD plus facile à utiliser car l'interface utilisateur vous sera familière 👀
En toute objectivité, Adobe XD offre des outils de dessin vectoriel plus avancés que Figma, ce qui peut être utile pour les designers qui ont besoin de fonctionnalités plus avancées.
👉 En fin de compte, le choix entre Figma et Adobe XD dépend de vos besoins spécifiques en matière de conception d'interface utilisateur et d'expérience utilisateur, de votre budget et de la manière dont vous préférez travailler.
Avec Figma, vous pouvez créer le design d'un site internet. D'ailleurs, l'outil s'utilise très bien avec Webflow, vous pourrez aisément passer de votre maquette (ou de votre prototype) à un site Webflow optimisé. Pour en savoir plus sur l'importation de votre maquette sur Webflow, je vous redirige vers l'article d'Axel notre CEO.
En arrivant sur la plateforme, vous avez du apercevoir deux boutons qui correspondent à deux types de fichiers : Figma et Figjam. Ici, nous nous intéresserons uniquement à Figma.
Dans le designer de l'outil, dans la barre noire du haut, vous retrouverez les fonctionnalités propres aux fichiers de design.
Notez que l'outil fonctionne avec des layers. Ceux-ci se retrouvent dans la partie gauche de l'écran.
Il y a plusieurs types d'éléments, dont :
The right side of the screen gives you design features for each element.
Once you've finished designing your site, you can preview and export it. This course from Webflow University shows you how to do it, right here.
What would the tool be without collaboration? Not so good 😶
To activate the “comments” feature, you will need to click on the bubble in the top bar.
Then, simply click on the model to add your comment where you want. Also, you will be able to see live the pages on which your collaborator is located. You can also talk live from the model, without needing to use an external tool 🤩
Finally, you can share the document by clicking on “Share” at the top right.
Editing options will be available to you, you just need to set them according to your preferences before copying the link or inviting your collaborators by email 📩
Are you ready to take off on Figma? Go here to learn how to use the tool 😎!
