8 des meilleurs outils de transfert de conception –

Le transfert de conception (avant même qu'on l'appelait ainsi) était une tâche compliquée, frustrante et souvent désastreuse. Il y a bien longtemps, Photoshop était le seul outil disponible pour la conception d'écran, et la conversion d'une conception en code s'appelait «découper un fichier PSD».

Oh, à l'époque.

Découper un fichier PSD était de la responsabilité du développeur, ce qui était frustrant parce que les développeurs ne voulaient naturellement pas travailler avec des outils de conception. Cela étant dit, les concepteurs devaient écrire manuellement les spécifications de conception de chaque calque d'un document Photoshop, ce qui entraînait souvent des incohérences et des discussions animées avec les développeurs. Ceci place les concepteurs et les développeurs sur un chemin de guerre sur lequel nous ne sommes pas encore prêts à blaguer encore aujourd’hui.

Grâce à son API extensible, les développeurs ont pu créer des applications capables d'analyser et d'interpréter complètement les documents de conception. Aujourd'hui, les outils de transfert de conception sont devenus indispensables dans chaque flux de travail de conception, presque tous les outils de conception d'écran s'intégrant à (ou fournissant sa propre solution) de transfert de conception.

Qu'est-ce que les outils de transfert de conception font?

Outils de transfert de conception ont trois objectifs principaux:

• aider les concepteurs à exporter leurs dessins de [insert tool here]
• pour aider les développeurs à inspecter et à mettre en oeuvre ledit dessin
• pour faciliter le retour d'information et la collaboration entre les parties prenantes

Le flux de travail de transfert de conception se présente souvent ainsi: [19659007] Le concepteur simule la conception dans un outil de conception d'écran

Sans transfert de la conception, les développeurs n'ont plus qu'une solution: deviner . Des suppositions peuvent donner lieu à des inexactitudes – par exemple, des couleurs incorrectes ou une interaction mal agissante -, ce qui a une incidence sur l'expérience utilisateur.

Tous les outils de transfert fonctionnent de la même manière, mais ils ne prennent pas tous en charge les mêmes plates-formes ou votre système. outil de conception d'écran de choix. Si vous n'utilisez pas Sketch, par exemple, Marvel ne vous sera pas très utile en tant qu'outil de transfert de conception.

Jetons un coup d'œil aux meilleurs outils de transfert de conception actuellement disponibles.

Zeplin mène la charge en matière de transfert de conception depuis la création du concept, en s’intégrant à Sketch et Photoshop, et plus récemment à Adobe XD et Figma. Les conceptions synchronisées à partir de l'un de ces outils peuvent être converties en code CSS, Android, Swift, Objective-C ou React natif, qui inclut les styles de chaque couche et tous les éléments marqués comme étant exportables.

Cette fonctionnalité est standard pour les outils de transfert de conception, bien que Zeplin soit le premier (ou au moins un des premiers), l'expérience utilisateur de leur application est presque inégalée.

Et comme pour tous les autres des outils de transfert de conception et des fonctionnalités de commentaire facilitent les commentaires et la collaboration.

• Plateformes: Web, macOS, Windows
• Prix : Plan gratuit, 17 $, 26 $ ou 122,40 $ (/ mois) [19659026] Avocode s'intègre parfaitement à Sketch, Figma, Adobe XD et Photoshop, de sorte qu'il n'y a pas beaucoup de différence entre Zeplin en termes de fonctionnalité, à part le fait qu'Avocode fonctionne avec Linux (et qu'il est le seul outil de transfert de conception à le faire).

  

  Avocode est également très agréable à utiliser.

  • Plate-forme: Web, macOS, Windows, Linux
  • Tarification : 14 $, 32 $ ou 90 $ (/ mois)

  Intégration de Sympli avec Sketch, Adobe XD et Photoshop, mais pas Figma. Cependant, dans la plupart des cas, il s'agit d'une première pour les outils de transfert de conception, il s'intègre directement à Xcode, à Android Studio et même à Jira d'Atlassian, ce qui rend Sympli quelque peu unique sur le marché bien qu'il ne soit disponible qu'en tant qu'application Web.

  Interface Sympli  » width= »1000″ height= »539″ class= »aligncenter size-full wp-image-172417″/>

  Sympli propose également une application basée sur Git appelée Versions bien que celle-ci ne soit disponible que sur macOS pour le moment et soit toujours considérée comme étant à un stade précoce.

  • web seulement
  • Tarification : Forfait gratuit, 36 $ ou 90 $ (par mois)

  Grâce à son interface utilisateur extrêmement conviviale, Marvel est reconnu pour être l'un des outils de conception les plus faciles à maîtriser. et avec ses fonctionnalités d'importation nouvellement améliorées maintenant la synchronisation complète des interactions (la plupart des outils de transfert de conception ne synchronisent pas les interactions), il y a moins de raisons de l'utiliser pour le prototypage, et plus de raisons de l'utiliser comme outil de transfert et de collaboration. [19659003]

  Le duvet côté, c’est que Marvel n’existe qu’en tant qu’application Web, et bien qu’elle ait quelques intégrations extraordinairement uniques le seul outil de conception d’écran pris en charge par Marvel est Sketch (Photoshop, Adobe XD et Figma aren).

  Si Sketch est votre outil de conception d’écran, alors Marvel vaut le détour. Si ce n'est pas le cas, cet outil ne vous convient pas.

  • Plateformes: Web seulement
  • Prix : Plan gratuit, 12 $, 42 $ ou 84 $ (/ mois)

  InVision Figma et Adobe XD bien que centré sur la conception d'écran et le prototypage interactif ont également été transférés. caractéristiques.

  Framer est souvent absent de ces rafles car il s'agissait à l'origine d'un outil de conception d'interactions basé sur JavaScript. Cependant, ces dernières années, Framer Studio (maintenant Framer X ) a été introduit – un outil de conception avec un éditeur visuel qui comble le fossé entre la conception et le développement.

  Si vous utilisez l'un de ces outils Dans votre flux de travail de conception, il peut s'avérer plus efficace (et certainement plus économique) d'utiliser les outils de transfert de conception intégrés. InVision est le dernier-né de cette catégorie. Son concept d’écran n’a été introduit que récemment dans sa suite de produits avec InVision Studio, bien qu’il ne soit disponible que pour macOS en novembre 2018.

  Hormis cela, il n’ya pas grand-chose qui les sépare outils en termes de fonctionnalité. Chacun est très apprécié et largement utilisé.

  • InVision : Plan gratuit, 15 $, 25 $ ou 99 $ (/ mois)
  • Figma : Plan gratuit, 12 $ ou 45 $ ( / utilisateur / mois)
  • Adobe XD : Plan gratuit, 9,99 $ ou 52,99 $ pour “Creative Cloud Toutes les applications” (/ mois)
  • Framer : Essai de 14 jours ou 12 $ (/ mois)
  
  

  Daniel Schwarz est concepteur UX / UI, développeur web et fabricant de fond, mais écrivain, éditeur, auteur et enseignant au coeur. Actuellement rédacteur en chef chez SitePoint (ex Toptal), fondateur de UX Tricks écrivain chez .net Magazine et Web Designer Magazine, et collaborateur occasionnel avec les plus grandes entreprises de design telles qu'Adobe et InVision.