Les développeurs et les concepteurs travaillent sur une seule source de vérité avec Uxpin

Le conflit entre les outils de conception Web et de développement a toujours été un problème de longue date dans l'industrie. Le résultat final de la conception Web est généralement un modèle, dans lequel les développeurs ont utilisé pour fabriquer des sites Web et des concepteurs ont fait des sites Web "peints", et cette déconnexion a créé d'énormes frictions. Lequel est la source de la vérité?

Et s'il y a vraiment une seule source de fait? Et si l'outil de conception utilise exactement le même code que le site Web de production? Le dernier chapitre de cette discussion prolongée est Uxpin.

Passons d'abord quelques faits afin que nous puissions mieux comprendre tout cela.

Uxpin: outil de conception de navigateur basé sur le code

Uxpin est un outil de conception puissant avec toutes les fonctionnalités que vous attendez, en se concentrant en particulier sur la conception basée sur l'écran numérique et le prototypage avancé.

Le fait qu'il soit basé sur le code est particulièrement important. Utilisez tous les composants visuels (qui sont en fait enracinés dans le code) pour concevoir le site Web, rapprochant le design du produit final. Votre conception ressemble non seulement à un site Web ou à une application, mais aussi à des fonctionnalités comme un site Web ou une application. Par exemple, au lieu d'une boîte statique avec un contour, le champ de saisie vous donne le vrai sentiment de le remplir de texte.

La conception basée sur le code a fourni toutes les spécifications pour chaque élément, comme ce composant de carte; Dans certains cas, il est même possible d'extraire le code précis des composants d'interface utilisateur que les développeurs peuvent utiliser.

Ania Kubów élabore très bien dans une vidéo sur Uxpin.

Il y a plus d'une décennie, Jason Santa Maria a sérieusement réfléchi à ce à quoi ressemblait la prochaine génération d'outils de conception. Pouvons-nous utiliser directement le navigateur?

Je ne pense pas que le navigateur soit suffisant. Les concepteurs de sites Web sautent dans le navigateur avant de résoudre des problèmes créatifs et de transfert d'informations, tout comme un architecte frappe le bois ensemble, puis les mesure. Les outils limitent l'imagination, et l'imagination ou l'inspiration au début du design jette les bases de tout ce qui suit.

Jason Santa Maria , «Une vraie application de conception Web»

Peut-être ne pas utiliser directement le navigateur, mais les outils basés sur le code peuvent faire fonctionner l'interface utilisateur comme votre site Web ou votre application, qui peut être le meilleur des deux mondes:

Les pages Web sont des espaces dynamiques et de vie, et les interactions minimales des visiteurs peuvent modifier la portée de l'ensemble du site Web. […] Parce que nous n'avons pas affaire à des supports statiques, nous devons être capables de concevoir la vue changeante des interactions et des pages Web […] Les applications doivent afficher des éléments, pas des couleurs ou des blocs de texte. Photoshop, illustrateur et feux d'artifice ont des fonctionnalités de bas niveau à cet égard, mais le besoin de traitement plus dynamique et non destructif est évident.

Vous pouvez utiliser vos propres composants React dans Uxpin

C'est la magie de la seule source de fait . Si un outil de conception peut sortir des composants React (ou tout autre cadre), c'est une chose. C'est une astuce intelligente. Mais ce sera probablement un voyage aller simple. Les composants des projets du monde réel sont remplis d'autres contenus qui ne sont pas entièrement dans le domaine de la conception. Peut-être qu'un composant utilise un crochet pour retourner les autorisations de l'utilisateur actuel, et s'il n'a pas accès, un bouton est désactivé. Les boutons désactivés ont certains éléments de conception, mais pas le cas pour la plupart des code.

Si l'outil de conception ne peut pas respecter un autre code dans ce composant et l'ignorer simplement, il n'est pas pratique. Essentiellement, si un outil de conception exporte des composants en tant que code, mais ne permet pas aux concepteurs d'importer ces composants d'interface utilisateur en premier, il n'est pas très utile.

C'est là que Uxpin Merge entre en jeu.

Maintenant, pour être juste, cela nécessite un travail pour installer. Cela ne peut prendre que quelques heures ou des semaines pour terminer une conception complète du système. Actuellement, UXPIN fonctionne uniquement avec React et utilise la configuration de WebPack pour l'intégrer.

Une fois que vous commencez à fonctionner, les composants que vous utilisez dans Uxpin sont vraiment les composants que vous utilisez pour créer votre site Web de production.

Il est vraiment impressionnant de voir un outil de conception digérer des composants prédéfinis et de leur permettre d'être utilisés pour le prototypage sur une toute nouvelle toile.

Uxpin vous aide à implémenter cette fonctionnalité dans votre projet, notamment:

• Documentation qui intègre vos propres composants
• Exemple de référentiel: Uxpin-Merge-Boilerplate

Comme prévu, cela peut affecter la façon dont vous construisez des composants

Les composants ont souvent des aspects tels que les attributs, la conception du contrôle des attributs et le contenu interne. Uxpin vous fournit une interface utilisateur de propriétés, ce qui signifie que vous avez un contrôle complet sur les composants.

 <code><linechart ...="" barcolor="green" data="{[" height="200" showxaxis="false" showyaxis="true" width="500"></linechart></code>

Sachant cela, vous pouvez fournir une interface de propriété pour le composant, en fournissant beaucoup de contrôle de conception. Par exemple, le commutateur de thème intégré.

Plus rapide avec le livre de contes

Un autre outil qui est très populaire dans le champ des composants JavaScript pour tester et construire des composants est le livre de contes. Ce n'est pas un outil de conception comme Uxpin - c'est plus comme un "zoo" de composants. Vous pouvez l'avoir configuré, ou vous pouvez trouver une valeur utile d'utiliser un livre de contes.

Quelle est la bonne nouvelle? Uxpin Merge fonctionne parfaitement avec le livre de contes. Cela rend l'intégration très rapide et facile. De plus, il prend en charge tout cadre tel que Angular, Svelte, Vue, etc. - en plus de réagir.

Voyez à quelle vitesse il est:

Le PDG d'Uxpin, Marcin Treder, a une vision forte:

Que se passe-t-il si le concepteur pouvait utiliser exactement les mêmes composants utilisés par l'ingénieur, et tous ont été stockés dans un système de conception partagé (avec une documentation et des tests précis)? De nombreux malentendus frustrants et coûteux entre les concepteurs et les ingénieurs n'existeront plus.

Et un plan:

1. Connectez-vous au référentiel GIT ou au référentiel de livres de contes.
2. Importez des composants à partir de là dans l'outil de conception Uxpin.
3. Toutes les modifications du référentiel seront automatiquement synchronisées dans UXPIN. Surveillez toutes les modifications du référentiel et synchronisez-les dans l'éditeur visuel.
4. Laissez les concepteurs concevoir et fournir des spécifications précises et des conceptions entièrement fonctionnelles aux développeurs.

C'est ce qu'ils font ici.

Expérience uxpin fusionner

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!