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 ;
  • 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

  • Atelier Figma - Design d'application
    Découvrir
    A l'issue de cette formation vous serez en mesure de designer et vos propres interfaces, créer des composants réutilisables, créer des styles de couleurs et de texte, créer des prototypes, et utiliser les ressources de la communauté Figma. Vous serez autonome dans la création de vos projets d'interfaces sur Figma !
    3h08 42 vidéos 5 / 5
  • Apprendre Adobe XD - Les fondamentaux
    Découvrir
    Maîtriser Adobe XD pour le design et le prototypage d'interfaces intéractives.
    3h42 56 vidéos 5 / 5
  • Apprendre les tendances graphiques en Webdesign
    Découvrir
    Apprendre et comprendre les principales tendances graphiques en Webdesign
    1h55 21 vidéos 4 / 5
  • Atelier Sketch 3
    Découvrir
    Atelier de création d'une maquette web avec le logiciel Sketch 3
    1h48 13 vidéos
  • Apprendre Sketch 3
    Découvrir
    Débuter sur Sketch 3, l'outil de dessin vectoriel
    0h53 18 vidéos
  • Apprendre le Responsive Design
    Découvrir
    Apprendre à réaliser un site Responsive
    4h28 35 vidéos
Partager l'article