Hubvisory
  • Écosystème
    flèche vers le bas
    Epic

    Epic

    Imaginez et délivrez des produits digitaux à succès

    Source

    Source

    Développez des produits digitaux performants et appréciés des utilisateurs

    Campus

    Campus

    Montez en compétence sur le product management et l’agilité

    Atom

    Atom

    Créez des produits digitaux avec un parcours utilisateur simple et intuitif

    summit

    Summit

    Déployez la stratégie de votre organisation produit

  • Carrières
  • RSE
  • Blog
Contact
Hubvisory
  • Carrières
  • RSE
  • Blog
Contact
  • Epic

    Imaginez et délivrez des produits digitaux à succès

  • Source

    Développez des produits digitaux performants et appréciés des utilisateurs

  • Campus

    Montez en compétence sur le product management et l’agilité

  • Atom

    Créez des produits digitaux avec un parcours utilisateur simple et intuitif

  • Summit

    Déployez la stratégie de votre organisation produit

  • Tous
  • Articles
  • Interviews
  • Events
  • Hub'Family
  • Pourquoi et comment utiliser Figma ?

    Par Florian.G le 23/02/2022 dans Articles

    #Design

    Expertise

    6 minutes

    Pourquoi Figma est devenu le leader du marché, que fait-il de mieux que ses concurrents et quelles sont les bonnes pratiques à adopter pour l’utiliser au mieux ? C’est ce que nous vous proposons de découvrir dans cet article.

    Il n’y a pas si longtemps, lorsqu’un.e Designer devait construire une maquette de site web, il/elle devait choisir son outil en se basant sur une offre de logiciels disponibles très limitée. La majorité des Designers travaillaient sur Photoshop ou Illustrator, des outils qu’on sait aujourd’hui peu adaptés pour concevoir des interfaces.

    Au fil des années, les méthodes de travail et les technologies ont évolué, et de nombreux outils ont vu le jour tels que Figma, Adobe XD ou encore Sketch pour ne citer qu’eux. Face à la pluralité des offres, il peut être difficile pour un.e Product Designer de savoir comment sélectionner l’outil idéal.

    Pourquoi Figma se présente aujourd’hui comme le leader du marché ? Que fait-il de mieux que ses concurrents ? On vous explique pourquoi !

    Illustration issue d’une étude envoyé à 4100 Designers dans le monde

    Illustration issue d’une étude envoyée à 4100 Designers dans le monde

    Source : https://uxtools.co/survey-2020/

    Figma : qu’est ce que c’est ?

    Figma est une plateforme web collaborative qui permet la création d’interfaces pour le web et le mobile. Disponible dans le navigateur, il peut aussi être téléchargé sous la forme d’une application standard.

    Pourquoi utiliser Figma ?

    Source : https://medium.com/littletaller/on-design-programs-sketch-vs-adobe-xd-vs-figma-9feb47f3d8a8

    En plus de posséder les patterns (dans le but de simplifier la courbe d’apprentissage) et les fonctionnalités (prototypage intéractif, composants,outils de conception, style, plugin etc…) de ses concurrents, Figma possède des features uniques inspirées du milieu du développement web. Cette singularité lui permet aujourd’hui de se distinguer nettement de ses concurrents.

    Voici 5 facteurs qui font de Figma un outil unique, apprécié par les Designers

    1. Un outil collaboratif par excellence

    Figma propose des fonctionnalités de partage de documents et de collaboration en temps réel. Les Designers peuvent travailler en même temps sur le même document. Même si Adobe XD et Sketch permettent aujourd’hui de travailler en collaboration, ils ne sont pas aussi efficaces que Figma.

    Avec Adobe XD, les collaborateurs doivent systématiquement mettre à jour leur fichier à chaque modification réalisée par un des membres de l’équipe, une tâche qui devient rapidement parasite et chronophage.

    Une autre force de Figma est la possibilité de collaborer avec un Design System en versioning. Avec son système de branches principales et secondaires inspiré de github (git push, git merge etc…), il est désormais possible de diviser un fichier en plusieurs branches secondaires et ainsi solliciter une révision du design avant de fusionner des modifications sur une branche principale.

    2. Un logiciel tout-en-un

    Plus besoin de recourir à Illustrator, InVision, Abstract ou Zeplin, comme c’est le cas en travaillant sur Sketch. Que ce soit pour le prototypage, l’ajout de commentaire, la conception d’illustrations vectorielles ou l’inspection du code, Figma gère toutes ces features en natif.

    Dernièrement, Figma a même crée “Figjam” un outil permettant de réaliser des ateliers collaboratifs à distance, un outil qui se présente comme un sérieux concurrent à Miro.

    3. Un outil qui met en valeur sa communauté

    Figma a créé au sein de sa plateforme un espace de partage où les Designers peuvent partager plugins, widgets, templates (mobile design et web design), Design Systems, wireframes, illustrations, icons, typography et UI kits. Cet espace s’appelle “Community”. L’entreprise a bien compris que sa communauté d’utilisateurs pouvait être vecteur de valeur pour son produit.

    4. Des composants plus flexibles et plus dynamiques

    Appelés symboles dans les autres outils de conception vectorielle tels que Sketch, les composants, dans Figma, sont beaucoup plus flexibles. La structure même des composants dans Figma facilite la personnalisation et la modification des différentes propriétés.

    Ainsi, en combinant différents composants et avec la possibilité de personnaliser chacune des propriétés de style des instances, vous aurez besoin de moins de composants ce qui rend votre projet plus fluide et plus facile à naviguer.

    5. Un outil online facilement accessible

    La possibilité d’accéder à ses fichiers sur n’importe quel navigateur web doté d’une connexion internet fait de Figma un outil auquel on s’attache rapidement. Que vous soyez en déplacement, que vous travailliez à distance ou que vous soyez en réunion avec un client, vos projets sont accessibles à portée de main au contraire d’Adobe XD qui n’est accessible qu’à condition d’avoir préalablement téléchargé l’application.

    Sketch, quant a lui, a tenté de proposer une web app pour accéder à son interface mais cette dernière rencontre aujourd’hui de nombreux bugs.

    Comment utiliser Figma ?

    Voici 12 conseils pour utiliser Figma au mieux

    1. Travaillez avec des composants et des variants interactifs afin d’optimiser votre vitesse de travail et optimiser la vélocité de votre équipe.
    2. Utilisez systématiquement l’Auto Layout dans la création de vos composants. Ce dernier permet d’aligner les éléments automatiquement sans devoir les replacer les uns à la suite des autres. Il est notamment possible de redimensionner les boutons avec leur texte, déplacer et réorganiser les éléments d’une liste à tout va, étirer les composants de l’Auto Layout librement pour un responsive design garanti. Bonus : l’auto layout facilite le transfert avec les Développeurs.euses car il se traduit directement en code.
    3. Créez une bibliothèque de styles afin de centraliser typo, couleur, ombre portée etc…
    4. Travaillez en atomic design, imbriquez les composants les uns dans les autres avec l’auto layout pour créer atomes, molécules, organisme et templates de pages.
    5. Regroupez les composants et la bibliothèque de style dans un Design System afin de construire une unique source de vérité pour Designers et Développeurs.euses.
    6. Utilisez l’option smart animate lors de la réalisation d’un prototype interactif afin de créer des interactions logiques en fonction du déplacement des éléments.
    7. Utilisez des plugins pour automatiser les tâches répétitives et optimiser votre rapidité de production.
    8. Partagez des liens en plaçant les clients en mode spectateur afin qu’ils puissent consulter vos fichiers en direct.
    9. Lors d’une présentation client ou lors de tests utilisateurs, utilisez le mode “aperçu” pour afficher votre prototype sur un device spécifique afin de permettre aux parties prenantes de mieux se projeter.
    10. Pendant la conception, si vous construisez pour des écrans mobiles, téléchargez l’application Figma mirror sur votre téléphone et gardez la toujours ouverte afin d’avoir un aperçu en temps réel des écrans sur votre device final.
    11. Proposez à vos Développeurs.euses d’utiliser l’outil d’inspection du code afin de leur permettre de récupérer le CSS.
    12. Utilisez la fonctionnalité “commentaire” pour communiquer efficacement avec votre équipe sur les maquettes existantes.

    Cet article est un résumé condensé et une liste non exhaustive de tout ce que l’on peut faire avec Figma. Toutefois, si vous n’êtes pas encore totalement convaincu.e, la meilleure chose à faire c’est encore de l’essayer gratuitement. Et oui, l’un des avantages de Figma est aussi son offre starter gratuite qui permet d’utiliser presque toutes les features de l’application ;)

    Pour aller plus loin

    Vous trouverez ci-dessous quelques Designers que nous vous recommandons de suivre pour apprendre à prendre en main Figma👇

    • Basti Ui
    • Jessica Trocmé
    • Zander Whitehurst

    Partagez l'article avec votre réseau !

    Card image cap
    Florian

    Product Designer

    A lire aussi :

    Card image cap
    15/12/2021

    Le Product Designer n'est pas un artiste

    Un Product Designer, c'est un peu un artiste non ?" On a souvent entendu cette question. Alexandre, Product Designer, y répond !

    10 minutes
    Card image cap
    08/07/2021

    Qu’est-ce qu’un Product Designer ?

    Product Designer, UX Designer, UX/UI Designer … Est-ce la même chose ? On vous aide à y voir plus clair dans cet article !

    6 minutes
    Card image cap
    29/06/2021

    Le Product Design en cycle court

    Comment être efficace lors d’une phase de discovery en cycle court ? Réponse de notre Product Designer Antoine.

    9 minutes
    Hubvisory
    LinkedIn
    Suivez-nous sur Linkedin !

    Hubvisory est une agence conseil spécialisée dans le Produit qui accompagne startups et grands groupes à innover, se transformer et à réaliser de bout en bout des produits digitaux à succès.

    À propos

    Carrières

    Hiring

    RSE

    Contact

    Écosystème

    Epic

    Atom

    Source

    Campus

    Média

    Blog

    @Hubvisory 2022

    Mentions légales
    Politique de confidentialité