Comment designer un site Webflow sur Figma ?

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 !👇

Qu'est-ce que Figma ?

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.

Est-ce que Figma est gratuit ?

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 ☺️

Pourquoi utiliser Figma ?

Les avantages de Figma : pourquoi choisir cet outil pour créer son design ?

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.

La collaboration en temps réel

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 ! 🤩

L'accessibilité

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 😉

La simplicité d'utilisation

Figma est un outil très intuitif et facile à utiliser. La courbe d'apprentissage de l'outil est rapide !

‍

‍

Les bibliothèques de composants

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 🎨

Un prototypage avancé

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.

Le prix

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 ✨)

Les avantages du concurrent historique de Figma : Adobe XD

L'intégration avec d'autres produits Adobe

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.

Une interface utilisateur familière

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 👀

Des outils de dessin vectoriel avancés

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.

Comment faire un site avec Figma ?

Comment commencer à designer sur l'outil ?

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 :

• Les frames : ce sont les zones de design. Dans ces frames on retrouve tous les éléments de design, les lignes, les textes ... Vous pouvez organiser ces derniers comme bon vous semble (en groupe par exemple). Les frames permettent de bien structurer votre maquette, car sans ça, vous pouvez rapidement vous y perdre... 🤭
• Les pages : ce sont les différentes pages de votre projet
• Vos assets : ce sont vos éléments importés dans Figma

La partie droite de l'écran vous offre de fonctionnalités de design pour chacun des éléments.

Une fois que vous aurez terminé le design de votre site, vous pourrez le prévisualiser et l'exporter. Ce cours de l'université de Webflow vous montre comment le faire, juste ici.

Comment collaborer sur Figma ?

Que serait l'outil sans la collaboration ? Moins bien 😶

Pour activer la fonctionnalité "commentaires", il vous faudra cliquer sur la bulle dans la barre du haute.

‍

‍

Ensuite, il vous suffira de cliquer sur la maquette pour ajouter votre commentaire là où vous le souhaitez. Aussi, vous pourrez voir en direct les pages sur lesquelles se trouvent votre collaborateur. Vous pourrez également parler en live depuis la maquette, sans avoir besoin de recourir à un outil externe 🤩

Enfin, vous pourrez partager le document en cliquant sur "Share" en haut à droite.

‍

‍

Des possibilités d'édition s'offriront à vous, il vous suffira de les régler selon vos préférences avant de copier le lien ou d'inviter vos collaborateurs par mail 📩

‍

Bonus : Un tutoriel pour se former à Figma en 5 étapes !

Vous êtes prêts à décoller sur Figma ? Rendez-vous ici pour passer maitre dans la prise en main de l'outil 😎 !

‍