Résoudre vos problèmes de collaboration en partageant des composants

Est-il controversé de dire que l’intégration profonde des systèmes de conception, supprimant la nécessité de maintenir à la fois une version de code et de conception de chaque composant, est le Saint Graal actuel de la conception Web ?

Traditionnellement, le « Saint Graal » était la disposition à trois colonnes pleine hauteur, mais cela est maintenant relégué à l’histoire. De même, le centrage vertical ne peut plus être la punchline d’une blague CSS. Même les requêtes de conteneur, souvent considérées comme une tâche impossible, font leur chemin dans les navigateurs.

Ce précédent historique me donne de l’optimisme. Les gens de l’industrie Web ont travaillé ensemble, à la fois en collaboration et de manière compétitive, pour améliorer progressivement, étape par étape, le Web. Pour améliorer fondamentalement notre façon de travailler. La même chose se passe maintenant avec les systèmes de conception. Malgré tous les avantages qu’il y a, nous avons encore beaucoup de choses à résoudre. UXPin se concentre sur l’objectif de supprimer l’écart entre les outils de conception et de développement.

Présentation de l’intégration npm d’UXPin

Nous avons écrit sur nos amis chez UXPin avant, et c’était vraiment génial de les voir itérer leur produit pour rapprocher les concepteurs et les ingénieurs. Récemment, UXPin a étendu son puissante fonctionnalité de fusion en ajoutant l’intégration npm, permettant aux concepteurs de synchroniser les bibliothèques de composants React sans nécessiter aucune intervention du développeur.

Auparavant, Merge obligeait les ingénieurs à exporter les composants vers UXPin dans le pipeline de construction/déploiement… Ce n’est pas nécessaire lors de l’importation de composants à partir de packages npm.

Pour comprendre comment cela fonctionne, nous devons prendre du recul et examiner en quoi UXPin diffère des autres outils de conception. Habituellement, la toile sur laquelle vous concevez est une image. Dans le passé, il s’agissait de raster et, de nos jours, de vecteur, un pas dans la bonne direction, mais vous dessinez toujours des images qui sont censées représenter la direction de l’apparence de votre produit.

Lorsque vous utilisez vos composants sur le canevas dans UXPin, vous ne dessinez pas de rectangles stylisés pour avoir l’air correct – vous placez le composants réels les développeurs utiliseront dans le produit final. Cela signifie que vous pouvez facilement prototyper des conceptions haute fidélité entièrement interactives qui nécessitaient auparavant des prototypes codés, sans aucun codage utilisant exactement les mêmes composants que le produit final. Cela réduit l’écart entre les concepteurs et les développeurs à la fois en termes d’efforts qui se chevauchent ainsi que l’écart entre ce qui est conçu et ce avec quoi les utilisateurs interagissent.

Mais npm est destiné aux développeurs, n’est-ce pas ?

Soyons clairs : vous n’avez rien besoin d’installer sur votre ordinateur pour importer des bibliothèques de composants dans UXPin à l’aide de l’intégration npm. Vous n’avez pas besoin d’écrire de code. Tout ce dont vous avez besoin est un package existant hébergé sur npm. Il peut s’agir d’un package open source et largement utilisé, tel que Ant UI ou Material, ou il peut être spécifique à votre entreprise et déjà utilisé par les développeurs.

Node Package Manager (npm) est un outil permettant d’importer des versions de code spécifiées. Les développeurs l’utilisent pour gérer les versions de « paquets » de code que quelqu’un d’autre a écrits. Par exemple, ils lui indiqueraient quelle version de React télécharger, et si une nouvelle version est publiée, ils peuvent la mettre à jour lorsqu’ils sont prêts. Il s’agit essentiellement d’un manière automatisée pour éviter de copier et coller des fichiers zip partout.

Avec l’intégration npm d’UXPin, vous pouvez récupérer les composants des packages npm et les utiliser dans l’outil de conception.

D’accord… Comment puis-je l’utiliser ?

Dans UXPin, vous définissez la bibliothèque de composants de l’interface utilisateur en ajoutant une nouvelle bibliothèque à la section « Merge : Component Manager ». Des options vous seront proposées et vous devrez sélectionner « Importer des composants React avec l’intégration npm ». Ici, il vous sera demandé d’écrire le nom de la bibliothèque, et cela peut être n’importe quoi. Vous aurez également besoin du nom et de la version du package (qui peut être latest), le chemin d’accès aux éléments de style et toutes les autorisations que vous souhaitez configurer. Pour une explication plus approfondie, voir la documentation.

Une fois cette opération terminée, vous aurez importé votre bibliothèque de composants de npm dans UXPin !

Ce n’est pas la fin du processus, cependant. Une fois les composants importés, vous devez configurer le gestionnaire de composants de fusion pour la bibliothèque que vous avez importée. Vous devez spécifier chaque composant individuellement et configurer chacune des propriétés qui s’y rapportent.

Bien que la configuration, en particulier d’une grande bibliothèque, puisse demander beaucoup d’efforts, cela vaut vraiment la peine de consacrer du temps à l’avance pour récolter les fruits d’un système de conception intégré. À ce stade, vous serez en mesure de créer des prototypes aussi réalistes et fidèles au support du Web que n’importe quel prototype. Si vous souhaitez éviter le processus d’intégration et utiliser des solutions open source, vous pouvez également utiliser les bibliothèques intégrées de Conception de fourmi et MUI.

Cela a l’air génial, mais est-ce que cela convient à mon équipe ?

Vos développeurs ont déjà un package npm pour votre système de conception

C’est la situation idéale pour un système de conception intégré. Une situation courante consiste à créer des composants à la fois dans le code et dans un outil de conception et à viser à les synchroniser. Les outils de documentation tels que Storybook sont souvent utilisés pour fournir des connaissances partagées et une source de vérité entre les concepteurs et les développeurs. Avec l’intégration npm, vous pouvez réduire davantage le processus de transfert en utilisant littéralement les mêmes technologies sans l’étape intermédiaire.

Concevoir sans accès aux développeurs

Si vous êtes dans la phase de découverte d’un nouveau projet et que vous n’avez pas encore accès à des développeurs, UXPin vous donne un avantage. Vous pouvez prototyper à l’aide de bibliothèques de composants open source (par exemple MUI) et les ajuster à vos besoins. Lorsque les développeurs rejoignent l’équipe, ces composants peuvent être remplacés par ceux que vous concevez à partir de zéro et les développeurs codent ensuite.

Une équipe à part entière avec des pratiques existantes

Dans une équipe chevronnée, changer d’outils peut être la dernière chose que l’on veut faire et il peut être difficile de s’entendre. Mais même pour ces équipes, la récompense d’avoir une solution cohérente et intégrée pour le partage de composants entre les concepteurs et les développeurs vaut probablement l’investissement.

Conclusion

L’équipe d’UXPin a franchi une étape impressionnante pour rendre sa technologie Merge plus accessible avec l’intégration de npm. Avec chaque nouvelle version de Merge, nous pouvons voir leur vision de la façon dont les équipes peuvent travailler plus étroitement ensemble avec leurs systèmes de conception intégrés tout au long de leur processus. Nous pouvons voir l’avenir, et progressivement nous y arrivons, tout comme nous l’avons fait en s’éloignant de la norme de conception vectorielle pour travailler plus étroitement avec les développeurs. Ce fut un long voyage, mais cela en valait la peine à la fin.

Essayez l’intégration npm en vous inscrivant à un Essai UXPin ou tester d’autres intégrations collaboratives en demande d’accès ici.

Lectures complémentaires

(yk, il)