Figma
26 mars 2021

Que vaut Figma par rapport à Adobe XD et Sketch ?

Partager l'article

Quel est le meilleur outil d’UI/UX design pour la conception de prototypes et d’interfaces Web ? Le choix entre Sketch, Figma et Adobe XD peut vite s’avérer cornéliens. Longtemps Sketch a détenu la première position, mais c’est sans compter les avancées de Figma et plus récemment d’Adobe XD. Alors que vaut réellement Figma face aux deux autres ?

Lorsqu’on se lance dans la conception de site et d’application Web, il convient de choisir les bons outils d’UI et d’UX design permettant de réaliser des maquettes et des prototypes. Leurs avantages ? Avoir une vue d’ensemble des différentes interactions entre les pages tout en offrant à l’utilisateur de bien positionner les éléments et au client de disposer d’une idée de son site / application ainsi que d’effectuer des retours. Aujourd’hui, trois logiciels se partagent le marché : Sketck, le précurseur, mais fonctionnant uniquement sous macOS, Figma (compatible Mac et PC) et plus récemment, mais bénéficiant de la puissance de l’écosystème d’Adobe, AdobeXD (Mac et PC).

Une interface similaire

Que ce soit Sketch, Figma ou AdobeXD, tous présentent la même interface utilisateur. Sketch étant le premier, ses concurrents se sont calqués sur son ergonomie pour faciliter l’adaptation et leur adoption. Elle consiste :

  • À gauche : le panneau des pages, plans de travail et calques
  • Au centre : l’espace de travail
  • À droite : le panneau des propriétés appelé « Inspecteur » dans Sketch, « Propriétés » dans Figma et « Inspecteur des propriétés » dans Adobe XD
  • En haut : la barre des outils

Créations des pages et des plans de travail

Sketch et Figma prennent une longueur d’avance par rapport à Adobe XD qui n’intègre pas la possibilité de créer des pages. Ce qui limite l’utilisation d’Adobe XD a des projets de taille réduite, le designer ne pouvant qu’ajouter des plans de travail ce qui se révèle, à la longue, assez contraignant.

Grilles et agencement

Les trois logiciels permettent la création et l’utilisation de colonnes dans les plans de travail. Néanmoins, Figma possède un avantage de taille du fait de la possibilité d’imbriquer des créations tout en gardant des sections différentes adaptées à l’usage de l’écran, favorisant le Responsive Web design.

Les fonctionnalités créatives

Tous proposent des outils de dessin et d’édition, mais Figma conserve une petite avance sur le vectoriel qui semble plus flexible grâce aux outils « réseaux de vecteurs ». Cependant, ils ne rivalisent pas avec un Illustrator ou un Affinity Designer, spécialisés en ce domaine. Globalement, ils disposent tous de leurs propres options offrant une conception fluide avec de bonnes marges de manœuvre au niveau des fonctionnalités d’édition.

De l’usage des symboles

Les UI et UX designers savent que c’est une fonctionnalité essentielle. Une fois un symbole créé, il devient possible de le modifier une seule fois pour qu’il s’applique dans toutes les instances et différents plans de travail. Actuellement, c’est encore Sketch qui offre le plus de possibilités et de souplesse. Les « Components » de Figma tendent à rivaliser, mais manquent d’organisation. Quant à Adobe XD, Adobe n’a pas souhaité miser sur cette fonctionnalité pour le moment, à tort.

Donner du style

Les trois logiciels intègrent des outils permettant une grande flexibilité notamment au niveau de leur édition. Aucun ne se distingue vraiment, chacun offrant des outils pertinents aux designers de personnaliser leurs conceptions en toute liberté.

De l’import des données

Une fois n’est pas coutume, Adobe XD arrive en pole position ! Figma ne permet par l’importation de données tierces quand Sketch se limite uniquement aux données statiques. Adobe XD donne la possibilité de connecter des fichiers Google Sheets et d’incorporer directement des données textuelles ainsi que des images.

Plugins

C’était le point noir de Figma qu’il a largement rattrapé son retard depuis pour arriver en première position. Que ce soit Sketch, Figma ou Adobe XD proposent une longue liste de plugins. La palme revient à Figma qui séduit de plus en plus d’éditeurs enrichissant ses fonctionnalités originelles.

Des prototypes…

Sur ce point, Adobe XD se veut le plus puissant. Intégration de sons, d’animations automatiques… rien n’échappe au logiciel d’Adobe. Sketch accuse son retard du fait de la limitation de ses capacités de prototypage tandis que Figma offre des options de partage intéressantes via un simple lien.

…au travail collaboratif

Sketch est, à ce jour, le seul à ne pas disposer de cette fonctionnalité qui devrait voir le jour sous peu. Figma conserve un train d’avance alors qu’Adobe XD comble progressivement son retard dans ses dernières versions. Tout est possible avec ces deux logiciels : commentaires en direct, possibilité aux utilisateurs d’interagir simultanément sur un même projet…

Des coûts variables

Enfin, la question de l’investissement se pose. Seul Sketch n’a pas de version gratuite à l’inverse de Figma et d’Adobe XD.

  • Sketch : disponible en deux licences, l’une personnelle à 99 $ avec des frais de renouvellement de 79$/an et une professionnelle à 9$/mois et par utilisateur ;
  • Formation Figma : au menu trois licences : une licence gratuite limitée notamment au niveau collaboratif, une professionnelle de 15$/mois par utilisateur et une licence de groupe à 45$/mois par utilisateur ;
  • Adobe XD : disponible en version gratuite, mais limitée, il est intégré à la suite Adobe pour 59,99 €/mois. Pour une utilisation collaborative, l’abonnement mensuel est à 19,99 € HT par utilisateur.

 

Nos dernières formations WebDesign UX / UI

  • Apprendre Adobe XD - Les fondamentaux
    Découvrir
    Adobe XD est le logiciel de prototypage interactifs qui va vous permettre de créer prototyper mais aussi partager des expériences interactives complètes. Conçu pour totalement optimiser le workflow des designers d’interfaces mais aussi des developpeurs, Adobe XD est la solutions incontournable pour mettre en place tout types de projets intéractifs.
    3h33 56 leçons
  • Apprendre les tendances graphiques en Webdesign
    Découvrir
    Formez-vous aux tendances graphiques en webdesign avec cet atelier comprenant divers exercices pratiques. Télécharger les fichiers de travail
    1h55 21 leçons
  • Atelier Sketch 3 - Créer une maquette web
    Découvrir
    Créez votre première maquette web avec le logiciel de dessin vectoriel Sketch 3
    1h48 13 leçons
  • Apprendre Sketch 3 - Les fondamentaux
    Découvrir
    Apprendre les fondamentaux de Sketch 3, le logiciel de web design sur Mac
    53min 18 leçons
  • Apprendre le Responsive Design - en HTML5 et CSS3
    Découvrir
    Dans ce tutoriel sur le Responsive Design, vous allez apprendre à réaliser des sites visibles par tous ! Le Responsive Web Design, c'est un ensemble de principes et de technologies pour permettre à un site Internet de s'adapter aux différents terminaux et tailles d'écrans sans dégradation et sans redimensionnement.  Dans ce tuto Webdesign en vidéo, vous êtes accompagné par Thierry Audoux, formateur web référent à l’école des Gobelins. Vous apprenez à créer des sites adaptifs pour smartphones, tablettes ou écran depuis la maquette sous Photoshop jusqu’à l’intégration en HTML5 et CSS3 en passant par le travail du texte, des images et des medias queries.
    4h28 35 leçons
  • Apprendre à Prototyper - Sites Internet et application
    Découvrir
    Le prototype d'un site internet est une étape importante préalable au webdesign et au développement web qui va vous offrir la possibilité de facilement créer des sites internet pratiques, le tout, en contrôlant votre budget. Dans cette formation Webdesign, vous allez découvrir les techniques les plus optimales pour vos sites web et vos applications dans le but de fournir une expérience utilisateur optimisée. Accompagné de Mickael David, consultant en expérience utilisateur digitale et enseignant à HEC Paris, le prototype d'un site web n'aura plus aucun secret pour vous.
    3h31 44 leçons
Partager l'article