Les outils des designers et des développeurs en 2019

Fiches Gobelins sept. 22, 2019

La collaboration entre ces deux métiers remonte à la nuit des temps d’internet et les outils que développeurs et designers utilisent n’ont sans cesse fait qu'évoluer pour répondre aux exigences des deux métiers. Nous allons voir dans cette article, quelques-uns de ces outils, et qu’est-ce qu’ils mettent en place pour faciliter la collaboration entre les designers et les développeurs.

Annonce : La liste n’est pas ordonnée selon un triage savant mais plutôt comme cela m’est venu sur ma feuille de prise de note. Les évaluations ci-dessous, ont été faire avec la version du logiciel sans plugin ni modifications. Ceci afin de pouvoir comparer ce qui est comparable.

Sketch

C’est peut-être l'éditeur graphique vectorielle le plus répandu sinon le plus connu dans la profession. Ce logiciel est sorti en 2010 et as été conçus pour apporter nativement, des fonctionnalités spécifiques au design d'interface qui manquait à Photoshop ou Illustrator.

Malheureusement, il n'est disponible que sur macOS et enregistre dans sont propre format de fichier ce qui ne facilite pas, sans outils complémentaires, la diffusion des maquettes à des développeurs qui utiliserait un OS différent. De plus, il ne permet pas à une équipe de designers de collaborer directement sur le même fichier sans utilisation d'un service tiers.

Figma

Figma est différent de sketch par sont aspect collaboratif en temps réel et la capacité de partager une bibliothèque de symboles à travers tout les fichiers d'une même équipe. Il permet de partager facilement des prototypes testables et propose une API pour créer des services autours du logiciel. À titre d'exemple, j'ai pu, au sein de mon équipe de développement et grâce à cette API, créer un script d'import et de formatage automatique des pictogrammes. Figma à aussi l'avantage d'être une application web, et donc, d'être disponible sur toutes les plateformes.

Tout comme Sketch, Figma n'offre aucun outil de collaboration avec les développeurs (inspection de maquette, export de code...).

Framer X

Ce logiciel est fondamentalement différents des deux premiers en ceci qu'il propose de créer des composants directement à partir de code (react) et de les grouper dans une librairie afin de les utiliser sur un canvas avec des système de mise en page automatique (Stack, Grid, Flex...).

Rémi Caillot

Je suis étudiant à Gobelins, l'école de l'image en alternance chez Mindsay. Ce blog me sert à parler de mes projets et publier des articles / podcasts