Est-il controversé de dire que l’intégration profonde des systèmes de conception, éliminant le besoin de maintenir à la fois le code et la version de conception de chaque composant, est le Saint Graal actuel de la conception Web ?
Traditionnellement, le « Saint Graal » était la conception à 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, se retrouvent dans les navigateurs.
Ce précédent historique me donne de l’optimisme. Des personnes de toute l’industrie du Web ont travaillé ensemble, à la fois de manière collaborative et 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 combler le fossé entre les outils de conception et de développement.
Présentation de l’intégration UXPin npm
Nous avons déjà écrit sur nos amis d’UXPin, et c’était vraiment cool de les voir itérer sur leur produit pour rapprocher les concepteurs et les ingénieurs. Récemment, UXPin a étendu sa puissante fonctionnalité de fusion en ajoutant l’intégration npm, permettant aux concepteurs de synchroniser les bibliothèques de composants React sans nécessiter l’intervention d’un développeur.
Auparavant, Merge obligeait les ingénieurs à exporter des 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 voir en quoi UXPin diffère des autres outils de conception. Habituellement, la toile sur laquelle vous concevez est une image. À l’époque, il s’agissait de raster et aujourd’hui de vecteur, un pas dans la bonne direction, mais vous dessinez toujours des images 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 des rectangles conçus pour être beaux, vous placez le composants réels les développeurs utiliseront dans le produit final. Cela signifie que vous pouvez facilement prototyper des conceptions hi-fi entièrement interactives qui nécessitaient auparavant des prototypes codés, sans aucun codage, en 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 de chevauchement d’efforts et d’é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. 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 largement utilisé comme 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 spécifiques de code. Les développeurs l’utilisent pour gérer les versions de « paquets » de code que quelqu’un d’autre a écrits. Par exemple, ils vous indiqueront 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.
Ok… Comment l’utiliser ?
Dans UXPin, 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 les composants React avec l’intégration npm ». Ici, il vous sera demandé de taper 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 définir. Pour une explication plus détaillée, consultez la documentation.
Une fois cette opération terminée, vous aurez importé votre bibliothèque de composants npm dans UXPin !
Cependant, ce n’est pas la fin du processus. Avec 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 lui sont associées.
Bien que la configuration, en particulier d’une grande bibliothèque, puisse demander beaucoup d’efforts, cela vaut vraiment la peine de prendre le temps de profiter des avantages 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 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 de conception Ant et MUI intégrées.
Cela sonne bien, mais est-ce bon pour mon équipe ?
Vos développeurs ont déjà un package npm pour leur système de build
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 à essayer de les synchroniser. Les outils de documentation comme Storybook sont souvent utilisés pour fournir un partage de connaissances et une source d’informations entre les concepteurs et les développeurs. Avec l’intégration npm, vous pouvez réduire davantage le processus de portage en utilisant littéralement les mêmes technologies sans l’étape intermédiaire.
Conception 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 créer des prototypes à 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, puis le code des développeurs.
Équipe complète avec les pratiques existantes
Dans une équipe expérimentée, changer d’outils peut être la dernière chose que l’on veut faire, et il peut être difficile de se mettre d’accord. Mais même pour ces équipes, les avantages d’avoir une solution cohérente et intégrée pour le partage de composants entre les concepteurs et les développeurs valent probablement l’investissement.
conclusion
L’équipe UXPin a franchi une étape impressionnante pour rendre sa technologie de fusion plus accessible avec l’intégration de npm. Avec chaque nouvelle version de Merge, nous voyons sa vision de la façon dont les équipes peuvent travailler plus étroitement avec ses systèmes de conception intégrés tout au long de leur processus. Nous pouvons voir l’avenir, et nous y arrivons progressivement, tout comme nous l’avons fait lorsqu’ils se sont éloignés de la norme de conception vectorielle pour travailler plus étroitement avec les développeurs. Ce fut un long voyage, mais au final ça en valait la peine.
Essayez l’intégration npm en vous inscrivant à un essai UXPin, ou essayez d’autres intégrations collaboratives en demandant l’accès ici.
Autre lecture
(Oui oui)
