Des outils de conception d’interface, Sketch et Figma sont aujourd’hui les pionniers du marché. Voici pourquoi.
En UX/UI Design, il s’agit de concevoir des interfaces digitales ergonomiques et satisfaisantes pour l’utilisateur. Le parcours client et son intuitivité sont au cœur de la mission des UX/UI Designers. Si l’UX Design vient définir et ajuster l’expérience utilisateur visée, l’UI design traduit ces objectifs en interface graphique performante. Pour ce faire, les UI Designers doivent disposer des outils digitaux nécessaires et adéquats.
Sketch est l’outil favori de longue date par les designers. Mais depuis un certain temps, on voit proliférer de nouveaux prétendants à la couronne de Sketch. La plupart de ces nouveaux outils d’UI design n’ont pas pu et ne pourront persister sur le marché ou rivaliser avec Sketch. Tandis que certains, comme la plateforme Figma, ont fait des progrès énormes et sont aujourd’hui très prisés par les designers.
Comment Figma arrive à concurrencer sérieusement Sketch et à attirer de plus en plus d’équipes et de designers UI ?
Un aperçu de Sketch
Développé et publié pour la première fois le 7 septembre 2010 sur macOS par la société néerlandaise Bohemian Coding, Sketch est un outil principalement utilisé pour la conception d’UI et d’UX d’applications mobiles et web.
Sans vouloir s’attarder sur les fonctionnalités et les spécificités de Sketch -puisque c’est l’outil de design d’interface le plus utilisé et le plus connu, nous rappelons néanmoins que cet outil de design d’interface est un pilier en matière de conception et d’édition de graphiques vectoriels. Sketch est devenu un véritable phénomène que beaucoup pensent indétrônable. Sketch permet notamment l’itération rapide même sur de multiples écrans, et réunit les fonctionnalités nécessaires tant aux UX qu’aux UI designers. Il témoigne d’une interface minimaliste, et d’une approche 100% vectorielle et dispose de nombreux plugins, le tout à un prix très attractif.
En effet, Sketch a rendu le design et le prototypage plus accessible et plus facile à des millions d’utilisateurs à travers le monde. Sketch se présente comme étant une puissante application native macOS qui permet de designer réellement pour le web, contrairement aux anciens outils comme Photoshop. C’est une véritable boîte à outils qui permet de maximiser le design avec ses plugins et extensions divers et variés. Il offre une prise en main inégalée jusque-là par les autres logiciels classiques de conception graphique, sauf qu’il est uniquement disponible sur MacOS.
Sketch et Figma, des points communs qu’on adore
Tout d’abord, l’intérêt majeur des outils Sketch et Figma est qu’ils offrent tous deux la possibilité d’être utilisés dans le workflow UX / UI. Les UX tout comme les UI designers disposent d’un outil commun qui leur permet de continuer à travailler sur leurs tâches. L’UX commence à travailler sur le design, et l’UI entame la création d’un nouveau design à partir de cette version. Le gain de temps et la cohérence graphique sont alors importants.
Figma et Sketch offrent la possibilité de prototyper les interactions d’une interface. Cela permet de visualiser facilement le parcours utilisateur et de le rendre aussi réel que possible avant que le site ne soit codé.
Un autre atout de Sketch et Figma, est l’incorporation de plugins qui permettent au concepteur d’envoyer ses modèles de croquis sur Zeplin par exemple, ce qui donnera toutes les spécifications CSS et HTML aux développeurs.
Figma : Zoom sur le nouvel outil phare en UI Design
Figma est un outil de design qui a été cofondée en 2013 par Dylan Field, qui voulait «faire pour la conception d’interface ce que Google Docs a fait pour l’édition de texte». Ayant gagné en notoriété très récemment et bien après Sketch, Figma demeure très similaire à ce dernier au niveau de l’interface et des fonctionnalités, ce qui rend la prise en main commode, ne nécessitant presque aucun apprentissage.
Se voulant cependant plus collaborative collaborative et responsive que Sketch, Figma est une application web basée sur le Cloud. Elle est multi plateformes, et donc largement accessible par les UX/UI designers. Petit (gros) bonus: sa version gratuite.
Figma combine l’accessibilité du Web avec les fonctionnalités d’une application native. Contrairement à Sketch qui n’est disponible que sur Mac, Figma est une application Web qui s’exécute dans le navigateur et donc de n’importe où, sur à peu près n’importe quel système d’exploitation. Cet outil de conception rend la collaboration des designers sur un seul projet possible en temps réel, où qu’ils soient dans le monde. Ce côté collaboratif de Figma est un véritable atout qui permet de rassembler les équipes dispersées, d’assurer un workflow de conception plus rapide et de rendre le design plus inclusif et participatif. Figma rassemble les différentes parties prenantes de l’équipe et pas que les designers. Entre concepteurs, chefs de projet, chefs de produit, ingénieurs et autres, la quantité et la qualité des feedbacks sont incontestablement améliorés.
Figma plus en détail
Outre le côté collaboratif et l’accessibilité pour tous, Figma se distingue notamment par son aspect intuitif, efficace et réactif.
Figma aspire peut-être à changer la face du design d’interface et du design systems, les voulant collaboratifs, sans frontières, transparents, axés sur la communauté, et le tout en open source.
Le cofondateur de Figma et son équipe sont conscients de l’avenir du web et de la place grandissante du design dans notre monde. A cet égard, Field s’exprime en s’adressant à Techcrunch en 2015: « Le design subit un changement monumental – du moment où le design était à la toute fin du cycle du produit dans le but de rendre les choses plus jolies, à maintenant où il accompagne tout le cycle du processus.».
Ainsi, Figma fluidifie l’UX/UI au niveau du design et du prototypage, notamment à travers:
- Des fonctionnalités connues sur d’autres outils de design (Sketch notamment) associés à des fonctionnalités innovantes à même de faciliter la conception. (un pen tool moderne, design de forme instantané…)
- Un Auto Layout (mise en page automatique) qui permet de refaire ses tests plus rapidement et efficacement: Ceci rend le côté itératif du design moins contraignant.
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. Aussi,et pour un meilleur transfert avec les développeurs, les paramètres de remplissage, de direction et d’espacement de l’Auto Layout se traduisent directement en code. - Des plugins facile à créer, privés ou pas, pour les images de stock, les diagrammes de flux, l’accessibilité des couleurs, les graphiques, les icônes, etc. Ceci permettra l’automatisation et l’augmentation de la capacité du travail en supprimant les tâches répétitives, en important des données et en optimisant les flux de travail.
- Tous les avantages d’un bon logiciel cloud: Accès libre aux fichiers, édition et collaboration proactive avec l’historique des versions, délaisser les PDF et les exportations obsolètes puisque le partage de fichiers se fait à travers un lien direct, ne plus avoir à enregistrer les fichiers grâce à la sauvegarde automatique…
- Des fonctionnalités pratiques qui permettent de prototyper tout en concevant. Se voulant une plateforme tout-en-un, Figma veut éviter au designers de basculer d’outil en outil. Ceci permet de créer des designs, de les tester et de réitérer le processus le tout en créant rapidement des prototypes. Les modifications de conception apparaissent instantanément dans le prototype. Idem pour les commentaires, ils sont directement transférés du prototype vers le fichier de conception.
Comment Figma se démarque de Sketch ?
Figma vient résoudre les problèmes du système d’exploitation et ne vous oblige pas à travailler que sur votre Mac. Ce qui démarque aussi Figma réellement de Sketch, c’est que l’application dispose d’un important système de collaboration, et rattrape son manque à gagner à travers une communauté et des fonctionnalités de plus en plus grandissantes.
Figma possède de nombreux autres atouts et avantages comparé à Sketch, surtout sur des petits détails qui sont vraiment plus intuitifs et qui font une réelle différence. On notera notamment:
- Figma est tout-en-un. Plus besoin de recourir (ou presque) à InVision, Abstract ou Zeplin, comme c’est le cas en travaillant sur Sketch.
- Tout fonctionne parfaitement sur le Web et plus rapidement sur Cloud; plus besoin de disposer impérativement d’un Mac ou d’opérer des mises à jour de version.
- Contrairement aux applications de bureau à l’instar de Sketch, il est désormais possible de partager des fichiers design et de collaborer dessus en temps réel, ce qui garantit un meilleur travail d’équipe et une collaboration optimale.
- Figjam est le nouvel outil de Figma pour réaliser des ateliers collaboratifs à distance.
Verdict !
Alors Sketch ou Figma ? Les deux outils offrent des fonctionnalités et des spécificités intéressantes pour les UI/UX designers. Il est donc difficile de faire un choix catégorique entre les deux. Si Sketch séduit par le nombre de plugins bien plus nombreux que sur la plateforme Figma, cette dernière n’arrête pas d’offrir de nouvelles fonctionnalités qui séduisent. L’un des plus grands points forts de Figma, c’est son accessibilité sur tout appareil et ses fonctionnalités collaboratives. Il sera difficile de détrôner Sketch qui a réellement révolutionné le design d’interface, et qui est depuis longtemps un pionnier des outils de conception. Cependant Figma fait des pas de géant dans cette direction.
Affaire à suivre !
N’hésitez pas à nous contacter pour en savoir plus.
