Sketch et Zeplin aider les concepteurs et les développeurs à collaborer

La collaboration entre les concepteurs et les développeurs est essentielle au succès d'un projet Web et constitue une mesure du succès d'une équipe. Bien que partager le même espace de travail soit inestimable, il est extrêmement utile de disposer d’une source de vérité en ligne qui facilite cette collaboration. Dans cet article, nous allons examiner Zeplin et son fonctionnement en combinaison avec Sketch pour réunir des équipes..

Un mot rapide sur l'esquisse

Il y a environ six mois, lorsque j'ai changé d'emploi, on m'a encouragé à essayer Sketch. La grande chose à propos de ce logiciel est qu’il est spécifiquement axé sur la conception d’interfaces et d’icônes; des planches d’art avec des tailles spécifiques pour le Web, les appareils mobiles et les icônes, en passant par les fonctions permettant d’améliorer le processus de conception, Sketch est un outil indispensable pour les concepteurs..

En outre, la courbe d'apprentissage si vous êtes un utilisateur intermédiaire de Photoshop ou Illustrator est proche de zéro..

Voici quelques exemples qui vous donnent un aperçu de ce que vous pouvez faire avec sketch:

1. Créez des pages pour organiser votre contenu (par exemple: conceptions mobiles, conceptions de bureau) et des planches d'art à l'intérieur de ces pages pour créer une maquette de votre produit (par exemple: créer un parcours client pas à pas)..
2. Utilisez le Inspecteur pour trouver tous les détails sur un objet spécifique (taille, positionnement, couleurs, styles de police, opacité et bien plus encore).
3. Utilisez le Exportation fonctionnalité permettant d'exporter des Artboards ou des objets individuels vers des formats de fichiers spécifiques (PNG, JPG, PDF, etc.).

"Je suis un dev, je n'ai jamais utilisé Sketch!"

Ces dernières années, les concepteurs ont appris à collaborer entre eux avec des outils tels qu'InVision, mais cette plate-forme manque encore de fonctionnalités permettant un transfert rapide de la conception à l'équipe de développement..

Nous ne devrions pas demander aux développeurs de maîtriser les mêmes outils que ceux utilisés par les concepteurs pour créer des produits. Cela dit, nous ne devrions pas non plus demander aux concepteurs de s’éloigner de ce qu’ils font de mieux: le design! Construire un «cahier des charges» chaque fois qu'un concept est remis est loin d'être «agile» et peut signifier beaucoup de temps perdu entre le transfert des dessins et leur itération si besoin est..

Zeplin

C'est ici que Zeplin entre en scène.

Zeplin est un outil de collaboration pour les concepteurs d'interface utilisateur et les développeurs front-end. Cela va au-delà du processus de conception et aide les équipes à effectuer le transfert de la conception..

Il permet aux concepteurs de télécharger leurs structures filaires ou conceptions visuelles directement à partir de Sketch et de les ajouter aux dossiers de projet dans Zeplin. La meilleure chose? Des annotations seront automatiquement ajoutées aux dessins (tailles, couleurs, marges et même des suggestions CSS pour certains éléments), ce qui vous laissera un référentiel en ligne auquel toute l'équipe pourra contribuer..

“Zeplin fonctionne très bien comme source unique de vérité, lorsqu'il est utilisé comme tel.
En outre, étant donné qu’elle est disponible en tant qu’application autonome et Web, vous pouvez y accéder pratiquement n’importe où. Il est facile de vérifier les dessins et des éléments tels que l’espacement, les tailles, les couleurs, etc. »- Daniel Setas Pontes, développeur Javascript à @NOW TV, Sky

Exportation de dessins d'esquisse vers Zeplin

Zeplin fonctionne comme un plugin dans Sketch. Le téléchargement de dessins est donc un travail en un clic..

Voici comment démarrer un projet:

Démarrer un projet Zeplin

1. Téléchargez Zeplin (mac seulement) et installez-le. Les développeurs n’auront pas besoin d’exécuter OS X car ils n’auront besoin que d’accéder à l’outil Web pour accéder au contenu..
2. Créer des projets.
3. Sélectionnez la plate-forme que vous avez conçue pour.
4. Étiquetez le projet (assurez-vous de choisir un nom familier à toute l'équipe).

Exporter depuis Sketch

Dans Sketch, sélectionnez des objets individuels et rendez-les exportables. Cela permettra à votre équipe de développement d'exporter chaque élément ultérieurement à partir de Zeplin. Voici comment cela fonctionne:

1. Ensuite, sélectionnez les planches que vous souhaitez télécharger dans Zeplin..
2. Aller à Plugins> Zeplin> Exporter les planches sélectionnées.
3. Sélectionnez le projet dans lequel vous souhaitez télécharger vos conceptions, puis cliquez sur Importation.

Travailler avec Zeplin

Une fois dans Zeplin, vous pouvez naviguer entre les projets et en explorer facilement tous les composants. Connaître les spécifications de certains éléments est également intuitif; sélectionnez l'élément de votre choix, toutes les informations pertinentes apparaîtront dans la colonne de droite.

Développeurs: voici comment cela fonctionne, une fois que vous avez ouvert l'outil Web et que vous vous êtes connecté:

1. Sélectionnez l'objet que vous souhaitez inspecter.
2. Consultez la colonne de droite pour des informations détaillées telles que les styles de police, la couleur, etc. (les informations seront affichées en fonction de l'objet sélectionné)..
3. Copiez le CSS suggéré.

Si l'équipe de concepteurs a autorisé l'utilisation d'éléments exportables lors de l'importation des conceptions dans Zeplin, elle devrait être en mesure d'exporter des ressources individuelles. Les ressources seront disponibles au téléchargement au format SVG et en trois tailles différentes de PNG.

1. Ici, vous pouvez ajouter des notes et des commentaires aux designs.
2. Ici, vous pouvez copier et partager le lien du projet, voire même l'intégrer au canal Slack de l'équipe pour obtenir des notifications ou inviter les membres de l'équipe à collaborer.!

Pourquoi votre équipe devrait-elle agir?

Travailler avec Zeplin présente de nombreux avantages. En voici quelques exemples:

• Vous éviterez de créer un document de spécification; quelque chose qui n'est ni agile ni facile à mettre à jour.
• Créez des dessins annotés instantanés avec toutes les informations pertinentes pour les développeurs et autres concepteurs.
• Vous pouvez créer des conceptions exportables afin que les développeurs puissent accéder rapidement à des ressources individuelles..
• Créez autant de projets que vous voulez, puis téléchargez-les et mettez-les à jour en quelques clics seulement..
• Créez des guides de style qui aideront l’équipe de conception à rester cohérente.
• Tirez parti de l'intégration de Slack et notifiez instantanément votre équipe chaque fois qu'il y a une mise à jour..

L'essayer!

Travailler avec Sketch et Zeplin est un excellent moyen pour les concepteurs de collaborer harmonieusement avec les développeurs. Mon équipe adore travailler de cette façon. J'aimerais entendre vos pensées et expériences avec ces outils.!

Liens utiles

• Plugins d'esquisse
• Tutoriels d'esquisse sur les Tuts Envato+
• Modèles de site Web Sketch sur Envato Market
• @zeplin_io sur Twitter
  
• zeplin.io