Plugin Zeplin Sketch - Le pont de flux de travail entre la conception et l'ingénierie

Zeplin est un puissant outil de collaboration qui comble le fossé entre les concepteurs et les développeurs en créant un espace connecté pour les équipes de produits.

Pourquoi Zeplin ?

Une pièce cruciale de tout puzzle de développement de produit est l'endroit où la conception rencontre le développement. Lorsqu'une conception est prête à passer à la phase de développement (le « transfert »), les ingénieurs ont besoin d'un moyen de la comprendre et de la traduire en code.

Zeplin facilite le transfert en prenant des conceptions de Sketch, Adobe XD, Figma et Photoshop et en les exportant dans un format qui peut facilement générer des extraits de code, des guides de style, des spécifications et des actifs.

Dites adieu aux jours de "redlining". Zeplin se concentre uniquement sur l'amélioration de la collaboration entre les concepteurs de produits et les équipes de développement et est utilisé par les principales équipes de produits chez Airbnb, Dropbox, Pinterest, Microsoft et bien d'autres.

Avec Zeplin, il n'est pas nécessaire d'écrire manuellement les tailles ou les marges, de taper la copie, d'exporter les icônes. C'est tout simplement génial et cela fait gagner beaucoup de temps pour se concentrer sur les explorations de conception. – Alex Potrivaev, concepteur de produits @Intercom

Dans l'un de nos articles précédents, le designer de Toptal, Micah Bowers, a parlé de l'importance d'avoir un système de langage de conception standardisé afin de communiquer efficacement entre les différentes fonctions des équipes de produits travaillant sur des produits numériques.

En créant des versions des actifs de conception, en créant des bibliothèques de composants et en générant des guides de style vivants, un projet porté dans Zeplin peut servir de « source unique de vérité » pour les équipes de produit.

Nous considérons fondamentalement Zeplin comme notre source de vérité pour collaborer avec l'ingénierie. Si ce n'est pas dans Zeplin, ce n'est pas officiel. – Jason Stoff, concepteur principal, Produits numériques @Starbucks

Limites de Zeplin

Bien que Zeplin possède de nombreuses fonctionnalités utiles, il n'est pas parfait. Zeplin propose un plan gratuit, mais dans le cadre de ce plan, il est limité à un projet. Lors de la conception pour iOS et Android, deux projets distincts seront nécessaires. À ce stade, un plan payant serait nécessaire.

Une fois que le flux de travail avec Zeplin et Sketch (ou les autres applications mentionnées ci-dessus) est compris, le flux de travail devient facile. Cependant, Zeplin a une certaine courbe d'apprentissage qui nécessite du temps et de l'attention. Pour voir un aperçu général et en savoir plus sur son utilisation, regardez la vidéo de démonstration Zeplin ci-dessous :

Travailler avec Sketch et Zeplin : étapes et astuces

1. Commencez avec Zeplin.

• Créez un compte Zeplin si vous n'en avez pas déjà un. Vous pouvez vous inscrire gratuitement : https://app.zeplin.io/register
• Téléchargez l'application de bureau Zeplin pour Mac ou Windows.
• Téléchargez le plug-in Zeplin pour Sketch.

2. Préparez votre fichier Sketch.

• Maintenant que Sketch et Zeplin sont prêts, nous allons configurer notre fichier Sketch pour une exportation transparente vers Zeplin.
• Dans Sketch, organisez vos actifs et calques en utilisant des conventions de dénomination cohérentes. Si vous collaborez avec d'autres designers, déterminez les conventions qui conviennent à tous les membres de votre équipe. En fonction du type de projet (par exemple, iOS, Android ou Web), Zeplin ajustera automatiquement la convention de dénomination des actifs, ce qui en fera un processus d'exportation en une seule étape.
• Créez des symboles pour les éléments et actifs communs dans Sketch. Cela vous permettra de configurer des composants dans Zeplin.
• Enregistrez les couleurs dans votre palette "Couleurs du document" et les polices en tant que "Styles de texte" dans votre fichier Sketch. Ceux-ci apparaîtront dans votre guide de style généré par Zeplin.

3. Rendre les ressources exportables dans Sketch.

• Ceci est une étape très importante. Une fois vos actifs regroupés en symboles, ouvrez la page Symboles dans votre fichier Sketch.
• Cliquez sur un groupe dans un symbole, tel que "ic-menu" (l'icône du dossier)
• Avec le groupe en surbrillance, localisez l'action "Rendre exportable" en bas à droite de votre "Inspecteur" dans Sketch et cliquez sur cette option. Une icône de tranche devrait maintenant apparaître à côté du nom de votre groupe.
• Cette étape permettra aux ingénieurs d'exporter des ressources directement depuis Zeplin.

4. Créez un nouveau projet dans Zeplin.

• Sélectionnez le type de projet que vous construisez. Notez que vous devriez avoir des projets distincts pour iOS et Android, même si les conceptions sont identiques. En effet, Zeplin générera un code différent en fonction du type de projet.
• Sélectionnez la résolution du projet qui correspond à vos plans de travail Sketch (par exemple, 1x, 320px).

5. Exportez les plans de travail Sketch vers Zeplin.

• Dans Sketch, mettez en surbrillance tous les plans de travail que vous souhaitez exporter vers Zeplin.
• Allez dans Plugins > Zeplin > Export Selected… ou appuyez sur ⌃⌘E sur votre clavier.
• Ensuite, nous allons exporter les symboles de Sketch. Ouvrez la page Symboles dans Sketch et mettez en surbrillance tous les plans de travail. Exporter vers Zeplin.

6. Organisez le projet dans Zeplin.

• Maintenant que vos plans de travail Sketch sont dans Zeplin, organisons les illustrations en sections.
• Dans la vue Tableau de bord de votre projet, sélectionnez des écrans similaires à regrouper en catégories. Une fois en surbrillance, cliquez avec le bouton droit de la souris et sélectionnez "Nouvelle section à partir de la sélection". Répétez cette opération jusqu'à ce que votre fichier Zeplin soit correctement organisé.

7. Utiliser des composants dans Zeplin.

L'une des fonctionnalités les plus utiles de Zeplin est peut-être la possibilité d'organiser les ressources en bibliothèques de composants. Ceci est important lorsque les conceptions d'un projet sont développées pour plusieurs plates-formes par différents membres de l'équipe. L'unification du design est essentielle, comme le souligne Karri Saarinen, designer d'Airbnb, dans Building a Visual Language :

Un système de conception unifié est essentiel pour construire mieux et plus vite ; meilleure parce qu'une expérience cohérente est plus facilement comprise par nos utilisateurs, et plus rapide parce qu'elle nous donne un langage commun avec lequel travailler.

• Sélectionnez l'onglet "Styleguide" en haut au centre de Zeplin (à côté de "Tableau de bord").
• Une fois dans l'onglet "Guide de style", sélectionnez l'onglet secondaire, "Composants". Ici, vous verrez tous vos symboles exportés depuis Sketch.
• Organisez-les en sections telles que "Icônes", "Images", "Éléments communs", etc. Vous pouvez en savoir plus sur l'onglet Composants de votre guide de style de projet dans Zeplin ici.

8. Exportez les guides de style de Zeplin.

• Dans la vue Tableau de bord de votre projet Zeplin, localisez le bouton "Partager" dans le coin supérieur droit de l'application.
• Sélectionnez "Partager", puis recherchez "Scène" en bas du menu. Sélectionnez "Activer" puis "Ouvrir". Cela générera un guide de style dynamique pour votre projet. Partagez l'URL avec votre équipe.

9. Annotez vos conceptions dans Zeplin.

• Ajouter des notes aux dessins est facile avec Zeplin. Dans la vue détaillée d'un écran, sélectionnez l'icône d'ajout de note et épinglez votre note à un composant.
• Vous pouvez ajouter une note en maintenant Cmd ( Ctrl pour les utilisateurs Windows et Linux) et en cliquant n'importe où sur l'écran.
• Vous pouvez même mentionner d'autres coéquipiers avec "@" et ils recevront une notification.

10. Collaborez, partagez et utilisez le contrôle de version.

• Maintenant que votre fichier Zeplin est prêt à être partagé avec votre équipe, invitez les utilisateurs via leur adresse e-mail ou envoyez-leur l'URL du projet.
• Continuez à mettre à jour votre fichier Zeplin en exportant des plans de travail depuis Sketch.
• Zeplin contrôlera automatiquement la version de vos fichiers et vous pourrez continuer à collaborer avec les membres de l'équipe en utilisant cette « source de vérité » dynamique.

Conclusion

La création d'un flux de travail dynamique, organisé et collaboratif entre les équipes de conception et de développement est essentielle pour créer d'excellents produits numériques. Avoir un pont de flux de travail comme Zeplin permet aux concepteurs d'annoter les écrans et facilite la phase de transfert souvent redoutée avec des spécifications complètes et précises.

La flexibilité de mettre à jour dynamiquement les actifs à partir d'une source centrale, comme un symbole dans Sketch exporté vers un composant dans Zeplin, crée une flexibilité énorme. Les ingénieurs peuvent ensuite facilement exporter les actifs dans le code natif, ce qui leur fait gagner du temps et de l'ennui.

Bien qu'une expérience utilisateur réfléchie et des conceptions esthétiquement belles soient à la base d'un produit réussi, le processus de mise de cette conception entre les mains des utilisateurs est essentiel.

Les concepteurs qui souhaitent être efficaces et s'appuyer sur une seule « source de vérité » doivent envisager le flux de travail Sketch to Zeplin décrit ci-dessus. La puissance derrière la relation logicielle robuste entre ces deux outils de conception aidera les concepteurs et les équipes de développement à atteindre la ligne d'arrivée avec plus de facilité et de satisfaction.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
• Comment créer un cadre de conception efficace (comprend un cadre d'interface utilisateur Sketch gratuit)
• Ce que vous ne savez peut-être pas sur la typographie dans Sketch
• Se familiariser avec le développement du plugin Sketch
• Créer des illustrations époustouflantes avec Sketch et Looper en un rien de temps