Astuce comment utiliser Zeplin pour générer des guides de style

Nous avons précédemment expliqué comment les concepteurs peuvent collaborer avec l'équipe de développement à l'aide de Zeplin, mais il y a un peu plus que cela. Zeplin est également un excellent outil pour générer des guides de style. Il permet à votre équipe de créer des expériences cohérentes en disposant d'un guide en ligne mis à jour et accessible à tous, de n'importe où.. 

Il vous permet de sauvegarder et de renommer les polices et les informations de couleur, et même d’exporter du CSS. Le guide de style et la fonction d’inspection vous épargneront beaucoup d’efforts lorsque le moment sera venu d’assurer la qualité (assurance qualité). Voyons vite comment ça marche!

Ajout de styles

Tout d'abord, sélectionnez un écran dans le tableau de bord du projet.

Sélectionnez ensuite l'élément dont vous souhaitez ajouter les propriétés au guide de style (par exemple: select Titre H1 ajouter sa famille de police, sa taille et sa couleur).

Ensuite, passez la souris sur l’outil d’inspecteur et cherchez l’icône Aa+ qui apparaitra par les styles de texte pour les ajouter au livre de polices:

Titre sélectionné et ses propriétés dans l'inspecteur

L'ajout de couleurs fonctionne de manière similaire. Cliquez sur l'icône de dépôt située à côté de chacun pour créer votre palette de couleurs:

Même affaire, avec des couleurs

Votre guide de style

Pour voir votre guide de style en action, sélectionnez le deuxième onglet. Guide de style en haut de la page:

Tous les éléments précédemment ajoutés seront là. Vous pouvez maintenant aller de l'avant et donner à chacun un nom plus approprié. Pour ce faire, survolez le nom de la couleur par défaut avec la souris et cliquez pour le changer..

Remarque: utilisez des noms et des conventions de nommage familiers à toute l’équipe):

Faites de même pour les polices; mettez-les à jour avec un nom familier avec les concepteurs et les développeurs. N'oubliez pas que vous contribuez au transfert du développeur, mais vous créez également un référentiel que d'autres concepteurs pourront utiliser..

Vous allez vous retrouver avec quelque chose comme ceci:

Exportation

À ce stade, si vous faites partie de l'opération dev, vous pouvez copier le CSS à partir de la colonne de droite. Vous constaterez qu'il est disponible dans la syntaxe de votre choix. Sass, LESS, Stylus ou CSS simple.

Chaque règle peut être sélectionnée individuellement pour le téléchargement, tandis que Commande + A sélectionnera tout pour copier et coller. 

Conclusion

Plus de guides de style obsolètes enregistrés quelque part, personne ne peut les trouver, plus de chaînes de courriels pour connaître la dernière couleur; Zeplin peut aider votre équipe entière à concevoir efficacement. Vive la productivité!