Simplifiez le transfert d'esquisse au code Visual Studio avec Indigo.Design

(Cet article est sponsorisé.) Si vous y réfléchissez, les équipes de logiciel sont un beaucoup comme les équipes sportives. Alors que chaque membre de l’équipe travaille dans le même but, le rôle qu’il joue et les actions qu’il prend sont très différents les uns des autres.

C’est pourquoi il est essentiel de disposer d’un moyen fluide de déplacer le ballon d’un membre de l’équipe à un autre. .

Malheureusement, le transfert au sein des équipes logicielles n’est pas aussi fluide que ce que vous voyez sur le terrain de sport. Et une des principales raisons à cela est la diversité des systèmes et des approches utilisés pour créer des produits.

Les concepteurs créent des interfaces utilisateur parfaites au pixel près dans Sketch, pour être ensuite traduites dans un langage que les développeurs peuvent utiliser lorsqu'ils créent des applications dans le système. Visual Studio Code IDE. Sans un moyen transparent de déplacer les conceptions de produits dans le pipeline, ces inefficiences entraînent des retouches et du débogage coûteux après le transfert d'une application d'un concepteur à un développeur.

Il va sans dire qu'une solution au problème de transfert Sketch to IDE a été trouvée. été longtemps à venir. Ce n’est pas que les équipes logicielles ne savent pas comment collaborer ou bien communiquer entre elles. C'est simplement que leurs systèmes et stratégies disparates facilitent la transition d'une équipe à une autre, encombrante, chronophage et surchargée en erreurs.

Aujourd'hui, nous allons voir pourquoi cela se produit et comment votre agence peut résoudre le problème avec deux plugins et une plate-forme de prototypage en nuage de Indigo.Design .

D'où vient le transfert du concepteur-développeur

Tout d'abord, ce que nous devrions vraiment demander, c'est:

Pourquoi

Nick Babich a récemment écrit sur la façon dont les concepteurs se donnent beaucoup de mal pour créer des solutions numériques parfaitement mesurées et conçues de manière cohérente. Mais les systèmes de conception ne se traduisent pas couramment en systèmes de développement.

Plus le concepteur utilise une interface, plus il doit communiquer avec un développeur. Il ne suffit donc pas de remettre un fichier de conception Sketch et de laisser le développeur s’exécuter avec ce dernier. Les concepteurs doivent fournir des spécifications de conception expliquant comment toutes les pièces en mouvement doivent être disposées, espacées, stylées, colorées, engagées, etc.

C'est le seul moyen de garantir qu'une application soit parfaitement parfaite au pixel près. la fin. Même dans ce cas, le développeur doit encore beaucoup implémenter une fois qu’il est dans son IDE.

Comme vous pouvez l’imaginer, tout ce processus prend beaucoup de temps. Mais sans spécifications de conception, les développeurs doivent finir par jouer à des devinettes risquées.

En outre, les développeurs n’ont pas l’habitude de coder avec HTML et CSS, ce qui est un travail fastidieux et ne représente que l’interface utilisateur. Il y a beaucoup plus de code en coulisse qui fait fonctionner une application Web et tous les développeurs ne sont pas habitués à apprendre à écrire le balisage de l'interface utilisateur. Lorsqu'ils sont forcés dans cette position, la courbe d'apprentissage abrupte ajoute plus de temps aux projets, et les retouches et le retravail qui en résultent génèrent des coûts démesurés.

Le transfert concepteur-développeur est donc devenu une question de temps.

Est-ce le designer qui doit tout redéfinir pour que le développeur sache comment transformer le design en réalité?

Ou:

Est-ce le développeur qui doit regarder un design, Mesurez manuellement tout ce qui est affiché à l'écran et espérez que toutes les spécifications sont correctes simplement en le surveillant?

Personne ne gagne dans l'un ou l'autre scénario. Et vous allez gruger vos marges de profit dans le processus.

Certaines agences peuvent penser que forcer les concepteurs et les développeurs à travailler sur la même plate-forme est la meilleure solution. Ainsi, il n’est pas nécessaire de faire toute cette traduction ou interprétation lors du transfert de Sketch vers Visual Studio Code. Mais cela aboutit souvent à une créativité étouffée de la part du concepteur ou à une capacité entravée de développer des solutions logicielles efficaces de la part du développeur.

Alors, quelle est la réponse?

Améliorer la relation concepteur-développeur avec Indigo. Conception

Ce n’est pas comme si Indigo.Design est la première plate-forme à tenter de résoudre les problèmes de transfert pour les équipes logicielles. InVision et Zeplin ont tous deux proposé leurs propres solutions.

Chacune de ces plates-formes a rendu les spécifications visuelles plus accessibles aux développeurs tout en améliorant par conséquent l'efficacité des équipes de concepteurs-développeurs. Plus précisément:

• Les concepteurs n'ont plus besoin de baliser l'interface utilisateur car les plates-formes traitent les lignes rouges.
• Les développeurs peuvent extraire manuellement les spécifications de conception sans l'aide des concepteurs.

Cela dit, avec des plates-formes comme InVision et Pour Zeplin, les développeurs doivent encore inspecter chaque élément et le coder manuellement en fonction des spécifications extraites. Ces plates-formes doivent également encore créer un pont transparent entre Sketch et Visual Studio Code.

Ainsi, si les concepteurs et les développeurs souhaitent travailler le plus efficacement possible entre eux, Indigo.Design a développé une réponse à leur problème: [19659032] Étape 1: La conception dans l’esquisse

Il n’ya vraiment qu’une chose à propos de cette phase qui doit changer pour le concepteur. L'application, les pages et le flux seront toujours conçus comme d'habitude dans Sketch à l'aide de composants du kit d'interface utilisateur Indigo.Design

Toutefois, il n’est plus nécessaire de compiler des redlines ou des spécifications pour l’application. Indigo.Design s'en charge pour vous.

Pour tirer parti de cela, votre concepteur doit abandonner le système de prototypage qu'il utilisait auparavant. Avec ce nouveau système simplifié et sans erreur, votre concepteur peut facilement insérer ses conceptions dans le nuage à l'aide du plug-in Indigo.Design.

Vous pouvez y accéder dans le menu Plugins> Indigo.Design> Publier un prototype . ]:

Le concepteur n’a pas besoin d’exporter des fichiers et de les télécharger dans un autre système pour permettre aux clients de consulter ou aux développeurs de travailler. Ils parviennent à rester là où ils doivent publier le prototype.

Le processus ne prend également qu'environ une minute. Le concepteur reçoit ensuite un lien vers le cloud qu'il peut partager avec les clients et les autres utilisateurs pour examiner et commenter le prototype.

Étape 2: Travailler dans le nuage Indigo.Design

Il est facile de placer les autres dans le nuage. . Le lien fourni les dirigera vers le nuage d'expérience où la conception peut être examinée:

Il est également facile de laisser des commentaires sur le design. Il suffit aux utilisateurs d'ouvrir le panneau Commentaires, de déposer une épingle et d'y attacher leur commentaire:

Ce logiciel de collaboration est bien plus que cela. Le prototype peut également être modifié à partir du cloud.

Pour y accéder, le concepteur, le développeur et toute autre personne disposant d'un accès de groupe localisera le projet à partir de la bibliothèque de prototypes:

Cliquez sur «Modifier le prototype» pour accéder à l'éditeur Indigo.Design:

Une fois l'écran sélectionné, le concepteur peut ajouter un point d'accès pour créer une nouvelle interaction dans l'application.

Vous pouvez également utiliser l'éditeur Indigo.Design pour consulter les spécifications de l'interface utilisateur de l'application:

Le survol de au-dessus d'un élément révèle des spécifications d'espacement relatif. Un clic sur un élément révèle beaucoup plus de détails:

Le développeur peut également modifier ou copier le code CSS épuré et généré à partir de ce panneau. (Bien qu’ils n’aient pas à le faire, comme je l’expliquerai à l’étape suivante.)

Voyez ce que je veux dire par rapport à l’économie de temps des concepteurs pour la génération de spécifications? En poussant simplement cette conception dans le nuage Indigo.Design, les spécifications sont automatiquement générées.

Étape 3: Créez du code Visual Studio

Supposons maintenant que votre conception est suffisante pour être développée. Le déplacement d'un prototype d'Indigo.Design vers Visual Studio Code est aussi simple que le déplacement depuis Sketch.

Récupérez le lien cloud d'origine fourni par le plug-in Indigo.Design dans Sketch. Si vous ne l’avez plus, ça va. Vous pouvez le récupérer à partir de l’écran des bibliothèques dans Indigo.Design :

Tout ce que le développeur doit faire maintenant, c'est d'installer l'extension Indigo.Design Code Generator. C’est ce qui permet à Visual Studio Code de communiquer directement avec Indigo.Design pour récupérer le prototype.

Une fois l’extension configurée, le développeur procède comme suit:

Ouvrez le shell de l’application déjà développé. Ensuite, lancez le générateur de code Indigo.Design. C’est là que vous entrerez dans le lien cloud:

Un outil apparaîtra avec les conceptions d'application qui vivent dans le nuage, ainsi que leurs composants individuels.

Le développeur a la possibilité de générer du code pour tous les composants de l'application ou d'aller composant par composant, en cochant seulement ceux dont ils ont besoin. Ceci est particulièrement utile si une application est en cours et que le développeur n'a besoin que d'importer de nouveaux composants dans VSC.

En cliquant sur «Générer des actifs de code», les composants sélectionnés seront ajoutés à Angular sous forme de code HTML et CSS lisible et sémantique. 19659005] Le développeur a maintenant moins de soucis en termes de reconstruction de styles ou de configuration d'autres spécifications. Au lieu de cela, ils peuvent consacrer leur temps à la création de fonctionnalités métier et au véritable raffinement du produit.

Remarque à propos de ce processus

Il est important de souligner que ce processus Sketch – cloud – Visual Studio Code ne le permet pas. Ne vous contentez pas de travailler avec la première itération d’un dessin. Les développeurs peuvent créer pendant que les concepteurs travaillent à travers les commentaires des clients ou les études d'utilisabilité avec les utilisateurs – ce que Indigo.Design a pris en compte.

Pendant qu'il travaillait sur le formulaire, le développeur a implémenté du code d'authentification dans le fichier TypeScript.

Pendant ce temps, le concepteur a reçu un message du client lui indiquant qu'un nouveau login universel avec Google devait être mis en œuvre. Ce qui signifie que l'UX doit changer.

Lorsque la mise à jour est prête et que le prototype est synchronisé avec Indigo.Design, le concepteur envoie un message au développeur pour l'informer des modifications. Ainsi, le développeur lance à nouveau le générateur de code Visual Studio. Cependant, lors de la régénération de l'écran de connexion, ils sélectionnent "Ne pas remplacer" dans le fichier TypeScript. De cette façon, ils peuvent conserver le code qu'ils ont écrit tout en important simultanément les nouveaux codes HTML et CSS.

Le développeur peut alors effectuer les ajustements nécessaires en fonction du design mis à jour.

Wrap-Up

Indigo.Design a effectivement utilisé de nombreuses fonctionnalités. créé un transfert efficace et sans bogue pour les concepteurs travaillant dans Sketch et les développeurs travaillant dans Visual Studio Code.

Les concepteurs ne perdent pas de temps à concevoir une plateforme et à créer des prototypes sur une autre, à élaborer des spécifications de conception ou à traiter les exportations de fichiers. Les développeurs ne perdent pas de temps à essayer de recréer l'intention de conception à partir d'un fichier statique.

Comme le disait Jason Beres, vice-président directeur du développement de produit pour Indigo.Design:

Avec la génération de code Indigo.Design, de ces bugs sont évités à 100%. Non seulement l'esprit du design est maintenu, mais du HTML et des CSS parfaits sont créés pour que le développeur ne soit pas dans la position regrettable de devoir faire correspondre le design manuellement.

Et en résolvant les problèmes techniques du concepteur processus de transfert et de transfert des développeurs, votre agence réduira considérablement le coût des remaniements et du débogage. Vous augmenterez également les bénéfices en fournissant à votre équipe logicielle un moyen plus efficace et plus rapide de faire passer les applications dans le processus et dans des conditions parfaites au pixel près.

(yk, ra)