01 juin 2021 | Auteurs :

Pourquoi Figma est génial ? On vous dit tout.

Présentation et point de vue sur l'outil indispensable du webdesign

Il y a des petites inventions qui changent la vie, en voici une. Sous son air bon enfant, Figma est redoutable. Aussi efficace pour matérialiser les interfaces graphiques les plus complexes que pour connecter les cerveaux en ébullition.

Car le webdesign est un travail technique, méticuleux et collaboratif. Et Figma, outil de création d’éléments vectoriels dernière génération, a réussi le pari de rendre le design d’interface et l’architecture de l’information, faciles, accessibles voire amusants.

Et à l’heure où le remote règne, ce service en cloud est venu à point nommé faciliter nos travaux d’équipe, à distance depuis notre salon. Toute l’équipe projet est branchée sur la même longueur d’ondes, avec un but commun : offrir une expérience utilisateur zéro défaut.

Les qualités de Figma en un clin d’oeil

Un outil complet : 5 en 1
Toutes les fonctions nécessaires à la création de site internet et d’application mobile
Un Design thinking décuplé
Un atout pour le travail collaboratif
Un travail optimisé pour le responsive
Une interface intuitive à l’utilisabilité poussée
Accessibilité, instantanéité et simultanéité
Prise en main facile

Les avantages de Figma pour les clients

Facilite le management, la collaboration avec l’agence
Accélère le flux productif
Aide à prendre des décisions plus facilement et plus rapidement
Permet d’échanger en temps réel, en toute transparence
Simplifie le travail à distance, permet une visualisation en live et très réaliste
S’utilise facilement
L’UX et l’UI deviennent amusants

Tout ce que Figma remplace !

Les innombrables versions de maquettes
Les allers-retours
Les rendez-vous chronophages et à répétition
Les fichiers V.XX et la fusion finale
La multiplication des logiciels pour suivre un projet et échanger
Les incompréhensions, les décalages, les erreurs de version

FIGMA, un outil user-centric pour des projets user-centrés

Figma, qu’est-ce-que c’est ?

Figma est un outil de webdesign destiné à la création d’interfaces utilisateurs UX / UI. En ligne, l’application est accessible depuis un navigateur internet et par l’ensemble de l’équipe projet, de façon transparente et instantanée.

Incarnation d’une parfaite expérience user-centrée, Figma accompagne l’équipe de la création, à l'évaluation jusqu’au déploiement de l’interface la plus adaptée pour le projet.

Téléchargement et prise en main

Disponible en application web à télécharger sur Mac et PC. Cette version est pratique pour le travail hors ligne. Tout est sauvegardé et visualisable aussitôt la connexion établie.

Disponible sur le web en cloud et accessible depuis tous les navigateurs connectés à internet. Figma est compatible avec tous les systèmes d’exploitation. Vous pouvez l’utiliser sans problème et sans changer d’environnement.

Chez Big District : nos fichiers sont stockés en cloud pour une accessibilité et une disponibilité permanentes et immédiates, et donc un plus grand confort de travail avec nos clients.

Côté prise en main de Figma, tout est intuitif et simple à utiliser. De nombreux tutos sont disponibles. Le tuto de Figma est très bien fait mais en anglais. Voici une version française si besoin.

Petite histoire de cet outil révolutionnaire

Figma est né de l’idée brillante d’Evan Wallace et de Dylan Field de créer un outil de design web on-line.

En 2015, Figma 1.0 devient le premier outil à combiner l'accessibilité du web et les fonctionnalités d’édition de graphismes vectoriels et de prototypage. Deuxième révolution, Figma est gratuit.

Après un démarrage timide, les UI et UX designers l’ont largement adopté.

Quel est le prix de Figma ?

Figma est disponible en version gratuite. La version payante démarre à 12$/mois.

Gratuit
• Jusqu’à 2 utilisateurs et 3 projets

• Historique de 30 jours

• Cloud illimité

• Invités illimités

$12 par utilisateur/mois

• Projets illimités

• Historique illimité

• Permissions personnalisées pour les fichiers et les utilisateurs

• Invitation projet privé

• Bibliothèque de ressources partageable

$45 par utilisateur/mois

• Systèmes de conception à l'échelle de l'organisation

• Équipes centralisées

• Plugins privés

• Administration des plugins

• Shared fonts

• SSO + advanced security

• Design System Analytics

En savoir plus sur le prix de Figma, ici.

Les applications complémentaires

Figma fonctionne avec plusieurs applications complémentaires telles que Slack, Trello, Maze, Zeplin, Flinto, Dropbox et Jira.

Comment utiliser Figma ? 10 astuces pour exploiter son potentiel à fond

Quelques conseils pour tirer le maximum de cet outil :

Capitalisez sur la simultanéité : si le client a besoin d’un travail en création et pas en wireframe, UI designer et UX expert peuvent travailler de concert en live sur Figma et en parallèle en VoIP. Fluidité et efficacité garanties.
Automatisez la création des composants : disposez vos variantes dans vos pages avec l’auto layout. Cela évite de repositionner les éléments à la moindre modification de hauteur / largeur. Gain de temps assuré.
Créez une bibliothèque de styles : dans une page à part appelée “styles”, placez tous vos styles récurrents (typo, couleurs, etc). Cela permet de créer une bibliothèque de styles du documents.
Travaillez en module et en style comme en intégration html / css : créez une page de composants avec leurs variantes, séparés par des frames. Puis, imbriquez les composants les uns dans les autres, avec l’auto layout. Les modifications se répercutent partout. Magie.
Ajoutez des transitions sur vos prototypes pour un rendu plus fluide lors des tests. L’animation “smart animate” propose une interaction logique en fonction du déplacement des éléments, et ce d’une page à une autre. On adore.
Observation Mode : pour une présentation client, partagez simplement le lien. Plus besoin de partager l’écran, ils n’ont qu'à cliquer sur votre nom et ils pourront suivre vos déplacements en direct.
Aperçu : il est possible de choisir l’aperçu dans un device spécifique, cela donne aux clients une meilleure idée de ce que rend visuellement le site ou l’application.
Inspection de code : utilisez l’inspecteur de code pour récupérer les CSS et optimiser le travail d’intégration. Un gain de temps énorme.
Créez des bibliothèques génériques pour la réalisation des wireframes, à ré-utiliser afin d’optimiser le travail de réflexion ergonomique, sans bloquer sur le design.
Utilisez les commentaires : annoter la maquette pour signaler toute modification, et invitez les clients à faire de même pour centraliser toutes les demandes. Taguez les personnes pour qu’elles reçoivent une notification. Rien n’est oublié, rien n’est perdu.

Un outil de design 5 en 1

1 - La création : un outil de design graphique

Tous les outils indispensables pour créer et manipuler des éléments graphiques vectoriels : formes, tracés, dégradés, insertion de texte, images…

Un système de grille permet de construire son design en respectant les nombreuses contraintes du responsive design.
Figma supporte un grand nombre de format de fichier et facilite l'import des fichiers des programmes concurrents.

Chez Big District : il n'est pas rare que nous soyons amenés à retravailler sur la base d’une intention graphique fournie par notre client, aux formats Photoshop, Adobe XD ou Sketch. Zeinab, notre créa, ne peut plus vivre sans !

2 - La communication : un outil collaboratif et transparent

Figma est aussi un support de présentation et de collaboration.

Il permet un travail d’équipe à distance, fluide, centralisé, en toute transparence et instantané.
Web-designers, développeurs, clients ou testeurs peuvent intervenir en simultané sur le même fichier.
Chaque intervenant, client invité compris, a un curseur qui lui est propre et porte son nom. Cela permet de suivre l’activité de chaque contributeur en temps réel.

Possibilité de partager un projet entier, une page ou une partie, un “artboard” au moyen d’un seul et unique hyperlien (comme Google docs par ex).
Utilisé pour avoir les retours clients en temps réel (feedbacks et avis sur les designs créés).
Utilisé pour réaliser des tests utilisateurs. Il est, en fait, possible de commenter et de consulter les commentaires à l’instant T pour intervenir en cas de nécessité.
Chat intégré 😸

Chez Big District : nous devons avouer que la traçabilité nous a un peu intimidés au début. Finalement, nous ne pouvons plus nous en passer. Les interventions et les échanges n’en sont que plus limpides.

3 - La bibliothèque : une approche "design system"

Une bibliothèque abrite tous les éléments, classés en styles, en composants, en éléments visuels réutilisables et personnalisables. Celle-ci est partageable en privé ou en public. Un véritable atout en cas de collaboration multi-designer ou studio-client ou dans le cadre d’un projet dans le secteur public.

Possibilité de combiner différents composants ou de les imbriquer de façon très flexible et dynamique.
Possibilité de switcher entre les composants sur une page en sélectionnant un autre composant dans son menu déroulant.
Chaque composant peut être ajouté à une page spécifique. S’il est modifié, ces changements se répercutent partout. Il est toutefois possible d’apporter quelques changements de texte ou de couleur sur les éléments réutilisés.

Chez Big District : on adore cette fonctionnalité qui vient simplifier la mise au point du design système en accord avec l’identité visuelle. Cette étape étant essentielle à la formalisation d’un webdesign, cohérent et efficient, et donc d’une bonne expérience pour les utilisateurs comme les clients.

4 - Le prototypage interactif

Création de prototypes interactifs. Ces animations illustrent les différentes interactions, et donnent un aperçu plus réaliste afin de mieux juger de la qualité de l’UX.
Cela permet également aux clients de réaliser des users tests avec un simple lien internet et de faire modifier en live les maquettes pour faire évoluer les tests.
Possibilité d’ajouter des connexions entre les différentes interfaces et de créer des interactions (clic sur un bouton, hover, affichage d’une pop-up, etc) pour une plus grande immersion des utilisateurs.
Ajouter des transitions et des animations entre les différentes interfaces de l’application ou du site (fade, smart transition…) : prototypes plus réalistes qui immergent l’utilisateur dans l’UX.

Chez Big District : les prototypes interactifs sont d’une aide précieuse dans nos projets d’UX et d’ergonomie web. Les tests utilisateurs sont grandement simplifiés. On gagne en efficacité et en rapidité.

5 - La technique : des fonctionnalités pour les développeurs

Inspection du code possible par le développeur web. Ils peuvent ainsi vérifier les différents éléments graphiques créés (accès au code CSS, iOS ou Android de chaque élément du fichier Figma pour assurer une meilleure intégration) et les exporter.
Ajout de commentaires possible également.

Chez Big District : on salue voire on vénère la passerelle que construit Figma entre nos webdesigners et nos développeurs. Ils peuvent communiquer et se comprendre plus aisément. Les contraintes techniques sont sur le devant de la scène pour le plus grand bien des sites internet in fine.

Pour aller plus loin : les petits plus pour les techos

L’intégration dans d’autres logiciels ou applications

Grâce à ses puissants API, il est possible d’intégrer les designs réalisés grâce à Figma dans d’autres logiciels ou applications (afficher l’avancement du design en temps réel dans applications des entreprises).

De nombreux plugins

Beaucoup de plugins réalisés par une large communauté de designers sont disponibles : Unsplash pour insérer des visuels de la banque d’images, Iconify, Lorem ipsum générateur, Charts, Mapsicle…

Les plugins préférés de Big District : ☞ Contrast pour l’accessibilité ☞ Golden line pour un interlignage parfait ☞ Unsplash pour insérer des photos, Iconify pour l’ajout d’icons tout fait (parfait pour les wireframes) ☞ Charts pour des graphs sans se prendre la tête ☞ Mapsicle pour insérer une map sans devoir sans devoir faire un screenshot ☞ Brandfetch pour insérer un logo rapidement ☞ Wireframer pour générer des placeholder texts automatiquement.

Les fonctionnalités en plus

Auto Layout : pour aligner les éléments automatiquement sans devoir les re-placer les uns à la suite des autres. Un gain de temps énorme !

Constraints and resizing : pour caler les éléments dans la page en les rendant dépendant de leurs “parents” (ou pas), et en fixant la largeur ou en la rendant extensible. Top pour utiliser les mêmes composants pour le responsive sans créer des éléments différents pour chaque version.
Interactive components : dans la version beta 2021, il est maintenant possible de faire des animations sur des éléments (slider, bouton hover, etc).

Chez Big District : nous apprécions particulièrement l’interactive components, toute dernière nouveauté de Figma 98.13

La newsletter “Tips from the team”, la newsletter de Figma est un puits d’infos et vous tiendra informé des nombreuses nouveautés, mises à jour et événements.

Quels sont les défauts de Figma ?

Tout le monde digital lui tire sa révérence. Nous sommes les premiers conquis. Mais que manque-t-il à Figma pour atteindre la perfection ?

Les prototypes sont moins poussés qu'avec Axure
Le vectoriel est moins avancé que sous llustrator
Il manque la retouche photo comme sur photoshop
L’absence d'interface pour les "composants" qui peuvent s’éparpiller. Il faut veiller à les mettre sur une page soi-même.
La grille ne se masque pas lorsqu’on veut prendre une couleur à la pipette
Et l'auto layout est un outil très pratique mais à améliorer pour plus de fonctionnalités !

Le mot de la fin

Vous l’aurez compris, c’est presque un sans faute pour cet outil révolutionnaire.

Qui aurait prédit que nous ferions des infidélités à ses concurrents pour la conception de site internet pour nos clients ? Figma a résolument ouvert la voie à une nouvelle génération d’outils de web-design dématérialisés et à l’utilisabilité décuplée.

Simplissime à utiliser côté client, intuitif côté production, il est facile à prendre en main. Et le succès de Figma rappelle combien l’user experience est importante dans le développement de projets digitaux.

L’équipe d’experts en UI et UX design de Big District est à votre écoute pour échanger et vous conseiller sur le sujet.

Le site de l’éditeur : www.figma.com