Fermer

octobre 12, 2021

Combler le fossé entre les concepteurs et les développeurs —


Résumé rapide ↬

UXPin a récemment lancé une nouvelle fonctionnalité appelée "Fusionner". Cet outil vise à percer les gouffres de la conception et du développement, tout en améliorant l'agilité et la qualité attendues par nos équipes. Cette nouvelle technologie peut amener à repenser la façon dont l'ensemble de l'équipe de conception et l'équipe d'ingénierie collaborent.

Au cours des deux dernières années, ce n'est un secret pour personne que nos outils de conception ont évolué de façon exponentielle. Avec beaucoup d'entre eux ayant une excellente gestion des composants et un prototypage, vous vous demandez peut-être quel grand saut pourrait être le prochain ?

Regardons un dilemme typique :

Disons que vous êtes un concepteur pour l'équipe de systèmes de conception où vous êtes créer des composants, des variantes et passer de nombreuses heures à documenter tous les cas d'utilisation et les propriétés qui peuvent ou non être modifiés. Vous finissez enfin un grand composant complexe et le livrez aux développeurs.

Comment savons-nous que le code est la même interface utilisateur ? Avons-nous vraiment besoin d'auditer chaque composant ? Comment pouvons-nous combler cet écart entre ce qui est conçu et ce qui est développé sans avoir à faire constamment des révisions ?

Tout cela et vous devez aider à enseigner aux gens les différentes façons d'utiliser les composants les espacements appropriés. et la conception pour le Web réactif, et bien sûr, le composant devra être mis à jour pour les futurs cas d'utilisation.

Il y a tellement de points de contact, de personnes impliquées. On a presque l'impression que plus on avance dans les systèmes de conception, plus il y a de frais généraux pour tout le monde ! Maintenant, il semble qu'une lumière au bout du tunnel brille, et la prochaine grande chose est en route.

Un joyau caché dans tout le chaos

J'ai récemment eu l'occasion de revisiter un outil que je possède 't utilisé depuis un certain temps – un outil qui vise à combler cet écart et à minimiser tous ces frais généraux : UXPin. Une nouvelle fonctionnalité appelée "Fusionner" a été lancée pour aider à percer les gouffres de la conception et du développement, tout en améliorant l'agilité et la qualité attendues par nos équipes. Cette nouvelle technologie peut amener certaines personnes à repenser la façon dont toutes les équipes de conception et d'ingénierie collaborent et travaillent sur les cas d'utilisation et les composants de construction.

Out With The Old Process

Si nous examinons le processus actuel, la plupart des entreprises employer aujourd'hui, cela peut être assez fastidieux avec quelques défauts évidents . Lorsque nous créons un nouveau composant à partir de zéro, nous concevrons le niveau de base du composant, ajouterons des variantes, rédigerons la documentation, publierons dans la bibliothèque et la fournirons aux développeurs. L'énumération du processus est longue, mais heureusement, cela ne doit être fait qu'une seule fois (nous l'espérons) :

Un diagramme affichant les processus courants d'aujourd'hui pour créer et mettre à jour des composants

Un aperçu des processus communs pour créer et mise à jour des composants. ( Grand aperçu)

Maintenant, que se passe-t-il lorsque nous devons mettre à jour un composant ? Un nouveau cas d'utilisation est arrivé, ou peut-être avons-nous décidé de changer nos bordures d'arrondies à acérées ? Nous devons maintenant ajouter les variantes à la bibliothèque, (éventuellement) mettre à jour à nouveau la documentation, la publier et la livrer à nos développeurs. Phew! Espérons que rien ne s'est cassé en cours de route pour nos concepteurs avec toute cette réorganisation du composant.

J'ai failli oublier, nous devons encore publier les mises à jour de la bibliothèque de développement ! Espérons qu'ils pourront terminer avant que les équipes de produits ne suivent leur propre chemin pour respecter les délais. processus exagéré que nous employons tous aujourd'hui ? Eh bien, regardez le schéma ci-dessous. Vous remarquerez peut-être la création d'un composant et les variantes ne sont pas nécessaires (dans la plupart des cas). Ce nouveau processus réduit la quantité de manipulations avec les outils de mise en page automatique, en raison de notre relation désormais synergique avec les développeurs :

 Diagramme montrant un nouveau processus et une nouvelle façon de gérer les composants

Un aperçu du nouveau processus et une manière différente de gérer les composants. ( Grand aperçu)

Nous avons seulement besoin de concevoir le niveau de détail requis pour la documentation et la mise en œuvre. Il n'est peut-être pas nécessaire de concevoir des composants simples tels qu'un bouton ou d'autres composants de niveau atomique. Pourquoi perdre votre temps à faire le double du travail alors que le développement peut commencer immédiatement avec peu de frais généraux ? D'une certaine manière, nous avons bouclé la boucle ; nous revenons aux anciennes méthodes lorsque les composants statiques n'affichaient que quelques interactions dans la documentation.

Notez que la publication dans la bibliothèque est maintenant à la fin du processus. En effet, une fois que le développeur a terminé avec le composant, il peut désormais utiliser Merge pour le mettre à la disposition des concepteurs dans UXPin, et bien sûr, tous vos développeurs de produits l'ont en même temps !

Lors de la mise à jour des composants, c'est essentiellement le identique à un nouveau, sauf qu'il peut même être possible de sauter la première étape selon le scénario. Par exemple, disons que vous souhaitez ajouter une option pour ajouter une icône aux boutons ; ce n'est pas quelque chose qui a besoin d'être conçu, mais à la place, il doit être communiqué à vos nouveaux meilleurs amis en développement.

Bien que cette nouvelle relation se forme avec vos développeurs, la nouvelle façon de lancer officiellement les composants aux concepteurs peut n'être qu'à la sortie. par les développeurs. Fini le temps où les concepteurs de produits demandaient si un composant était disponible pour leurs développeurs de produits. Si c'est dans la bibliothèque, alors il est disponible en développement et prêt pour que les concepteurs y travaillent immédiatement.

Mais assez parlé du processus. Jetons un coup d'œil au fonctionnement de UXPin Merge.

Gestion des bibliothèques

La meilleure partie est que les bibliothèques peuvent être importées directement depuis votre référentiel de code tel que GitHub, Bitbucket, GitLab, (fonctionne uniquement pour les composants React), ou même du livre de contes. Une fois qu'une bibliothèque est créée, vous aurez des options pour nommer la bibliothèque.

Une capture d'écran des options à choisir lors de l'ajout d'une bibliothèque

(Large preview)

Lors de l'importation avec Storybook, le processus est assez simple. Saisissez simplement l'URL de la bibliothèque et UXPin fera le reste pour vous. Avec les composants React, à l'aide de la CLI, vous contrôlez les composants qui sont publiés en spécifiant le jeton unique de la bibliothèque UXPin. équipes systèmes est le contrôle de version. La plupart des problèmes peuvent être résolus avec la fonction de fusion de UXPin . Dressons un tableau rapide :

Aujourd'hui, lorsque nous nous efforçons de mettre à niveau un composant, il y a toujours la peur de casser un composant ou des calques qui pourraient être renommés et nettoyés. Une restructuration totale du composant pourrait même se produire, ce qui conduit souvent à une inquiétude (du côté du concepteur) quant à savoir s'il doit mettre à niveau un composant ou s'en tenir à l'ancien.

Lorsqu'un composant est développé, cependant, tant que les propriétés restent les mêmes, peu importe la façon dont la disposition du composant change ou le balisage réel du composant. Ceci, à son tour, permet aux concepteurs de mettre à niveau leurs composants vers les dernières versions en toute confiance.

Bien sûr, dans l'instant, espérons-le rare, où un composant est totalement foiré, comme pour tout projet de codage, il peut facilement être annulé et republier l'ancienne version du composant.

Test des mises à jour

Lors du test de nouveaux composants ou de mises à jour, ce n'est pas si facile aujourd'hui. Nous ne pouvons évidemment pas modifier la bibliothèque de conception existante pour la tester, car elle peut être publiée accidentellement et bloquer toute autre mise à jour prête à être utilisée. Il est également très fastidieux de créer un composant dans un nouveau fichier, de le tester, puis d'essayer de gérer la fusion vers la bibliothèque actuelle sans casser les calques.

Heureusement pour nous, les développeurs ont compris ce problème il y a longtemps, et il s'intègre parfaitement dans la technologie Merge d'UXPin. Lors du test de nouveaux composants, il est déjà la meilleure pratique de fork ou de branche le code et cette nouvelle branche peut être publiée dans un environnement de test au sein d'UXPin. Votre équipe peut le tester ou vous pouvez accorder l'accès à un petit groupe de bêta-testeurs dans votre entreprise. Une fois que le composant a été testé et essayé, le composant peut être rapidement introduit et publié dans la bibliothèque de conception principale sans point. cette technologie signifie pour eux? Eh bien, je suis content que vous ayez demandé! Du point de vue d'un concepteur de produits, il n'y a pas beaucoup de différence. Lorsqu'un concepteur utilise un composant de la bibliothèque de développement utilisant Merge, il sera marqué d'un hexagone orange pour chaque composant. Tout ce qui est nouveau continuera à se comporter exactement de la même manière que la bibliothèque du développeur.

Composant et calques de navigation

Composant et calques de navigation ( Grand aperçu)

Les composants des développeurs peuvent avoir des restrictions définies, mais dans le bon sens. Un problème courant est souvent d'utiliser des icônes comme liens plutôt que d'envelopper l'icône dans un composant de bouton. Si nous devions utiliser uniquement une icône de la bibliothèque, elle est verrouillée et l'utilisateur ne peut pas ajouter d'interactions :

Icône de la maison sans options d'interaction

Icône de la maison sans options d'interaction ( Grand aperçu)

Alternativement, le bouton icône ci-dessous permet des interactions. Cela nous permet de vraiment affiner et contrôler les composants avec lesquels il faut interagir et ceux qui ne le devraient pas ; tant du point de vue des standards que de l'accessibilité.

Icône du bouton d'accueil avec options d'interaction

Icône du bouton d'accueil avec options d'interaction. ( Grand aperçu)

Avec ces types de restrictions, il est facile pour l'équipe de Design Systems que les composants devront être utilisés de manière appropriée, et s'il est outrepassé, il sera évident à partir du panneau des calques que quelque chose a été fait sur mesure .

Hand-Off

Lorsque vous êtes prêt à passer aux développeurs, le prototype fini peut afficher chaque composant et leur configuration à copier et coller dans les outils du développeur et construire rapidement le projet. Si votre équipe n'a pas encore de bibliothèque de composants, UXPin est livré avec une bibliothèque par défaut ou vous pouvez facilement importer certaines des bibliothèques publiques disponibles directement dans UXPin.

Accessibilité

En parlant d'accessibilité, souvent, il est négligé ou il n'y a pas assez de temps pour créer une documentation sur toutes les étiquettes metales balises ariaet ainsi de suite. Les concepteurs ne savent pas quelles balises ils doivent saisir et les développeurs ne veulent pas s'embêter.

Avec UXPin, nous pouvons exposer plusieurs propriétés même des données de niveau méta qui peuvent ne jamais être visibles à l'interface, comme les étiquettes ARIA. Les concepteurs peuvent ensuite saisir toutes les informations requises (ou un rédacteur si vous avez la chance d'en avoir un dans votre équipe), et les développeurs de produits auront peu ou pas de frais à mettre en œuvre.

Mise en page, modèles et grilles[19659009] Rien qu'en lisant le titre, vous savez ce qui s'en vient, et je suis sûr que vous rebondissez sur votre chaise en ce moment – je sais que je le suis. Les grilles, les mises en page et même les modèles de page peuvent être insérés dans la bibliothèque en tant que « composant », ce qui permet aux utilisateurs d'apporter des composants dans la zone active d'une page et de gérer tout l'espacement par la bibliothèque de développement .

Les modèles communs (par exemple, les écrans de connexion, les pages de complétion, les formulaires, les pages de profil, etc.) peuvent également être utilisés en tant que composant de glisser-déposer. Parlez d'accélérer le processus et de réduire les erreurs humaines dans la conception !

En clôture

Si vous êtes prêt à franchir le pas, il n'est jamais trop tard pour essayer de nouveaux logiciels et de nouveaux processus à améliorer votre flux de travail. Après tout, nous voulons tous être agiles et aussi adoptifs que possible. Bâtissons des relations plus solides entre nos équipes, réduisons notre charge de travail et travaillons plus efficacement. Avec des outils tels que UXPin Mergenous nous rapprochons d'un environnement de travail beaucoup plus fluide.

Smashing Editorial" width="35" height="46" loading="lazy" decoding="async[19659060"](vf, il)</span>
</div>
</p></div>
</pre>
<p><div class=



Source link