Voyez comment créer une preuve de concept de système de conception avec Figma, themebuilder et livre de contes. Et regardez Bitovi démo avec React en moins d’une heure.
J’ai déjà pensé à lancer votre système de conception avec des progrès Composants Kendo UI? Nous en avons parlé un peu sur le blog auparavant, Mais maintenant c’est plus facile que jamais grâce à Kendoreact gratuit—Au les essais, les inscriptions ou les connexions requis! Combinez cela avec les caractéristiques puissantes du progrès Thème (qui, en passant, aussi propose un niveau gratuit) et vous pourriez avoir un système de conception Proof of Concept (POC) et en passant sans dépenses et très peu de temps… c’est exactement ce que Ryan Spencer et moi avons démontré Notre webinaire récent. C’est vrai, nous nous sommes associés à Bitovi Pour parler de la façon de tirer parti de ces outils puissants pour créer un système de conception super rapide POC.
Maintenant, soyons honnêtes ici: le système de conception que vous créez en quelques heures sera la solution finale parfaite pour votre équipe? Bien sûr, les systèmes de conception ne sont pas censés se développer et changer avec votre produit. Ils ont besoin de maintenance et de documentation, et ils devraient (idéalement) intégrer plus que votre bibliothèque de composants et les jetons de conception. Dans notre exemple, des choses comme les directives du ton de la voix, différentes versions de logo, des modèles communs et des modèles de page, des directives d’utilisation, etc. n’étaient pas inclus – mais pour un système de conception complet et robuste que vous voudriez presque certainement les ajouter.
Cependant, obtenir l’adhésion peut être l’un des obstacles les plus difficiles à sauter lorsqu’il s’agit de démarrer un système de conception. Cet investissement initial de temps et d’efforts peut être intimidant lorsque vous avez d’autres projets à équilibrer. En préparant un exemple rapide qui offre une valeur immédiate, comme Ryan et moi l’avons fait ici, vous pouvez démontrer les avantages à long terme sans le gros investissement. Après tout, si c’est ce que vous pouvez obtenir d’un POC rapide, imaginez toutes les façons dont vous pourriez bénéficier d’un système de conception complet!
Pour accélérer la création de notre système de conception POC, Ryan et moi avons atteint une poignée d’outils qui nous ont aidés à ignorer les tâches répétitives, à gérer les importations / exportations automatiques et plus encore.
-
Kits kendo ui figma: En commençant par les kits d’interface utilisateur Figma, nous avons pu voir tous les composants disponibles dans le cadre de la bibliothèque de Kendoreact, y compris tous les différents états d’interaction et les petits détails de conception. Peut-être plus important encore, dans notre situation, les kits Figma comprenaient également une liste complète de jetons de conception qui pourraient être ajustés en fonction des exigences de notre marque.
Avec les kits Figma mis à jour et personnalisés, nous avons pu les ajouter comme un élément puissant de notre système de conception. À l’avenir, les concepteurs pourront utiliser ces kits Figma pour créer des maquettes et des prototypes interactifs avec des composants pré-style et conçu du système de conception – sans parler, bien sûr, d’importer les jetons de conception dans themebuilder.
-
Thème: En parlant de cela, Themebuilder était l’un des outils les plus utiles que nous avons atteints, car c’était ce qui a comblé l’écart entre les côtés de conception et de développement de notre système de conception. Malgré son nom, un système de conception n’est pas uniquement pour les concepteurs – les développeurs doivent aussi pouvoir en tirer parti!
Parce que nous pouvions importer tout le travail que nous avons fait sur Figma, puis exporter des fichiers CSS / SASS prêts à l’emploi, ThemeBuilder est devenu un point naturel de chevauchement et de collaboration. Nous avons importé les styles, fait de petits ajustements et des ajustements, l’avons partagée avec d’autres membres de l’équipe pour approbation, créé et géré l’historique des versions, et exporté le code fini – c’était une source unique de vérité parfaite entre les deux «côtés».
-
Livre de contes: Qu’avons-nous fait avec le CSS que nous avons exporté? Eh bien, nous l’avons mis dans une instance de livre de contes et l’avons appliqué à nos composants Kendoreact!
Si vous ne créez qu’une seule application, vous pouvez déposer les fichiers CSS / SASS générés par themebuilder directement dans cette application. Mais si vous gérez une suite d’applications, il est préférable d’avoir un seul endroit où vous coiffez les composants et tirez tout de cela – votre propre bibliothèque de composants personnalisés. Il réduit la possibilité de petits changements qui s’arrêtent, facilitent la gestion de différentes versions / mises à jour des composants (et du système de conception), et Vous permet d’écrire une documentation d’utilisation spécifique uniquement pour les composants que votre application utilise. Pensez-y comme la création de votre propre version personnalisée de KendoreAct – juste les composants dont vous avez besoin, dans la version que vous utilisez, expliquent comment vous en avez besoin, avec des instructions sur la façon et l’endroit où elles doivent être utilisées dans votre application. De plus, c’est super pratique pour les tests de régression visuelle et d’accessibilité!
Vous voulez la procédure pas à pas complète sur la façon d’intégrer de manière transparente tous ces outils (et plus) dans un système de conception POC? Découvrez l’enregistrement complet du webinaire (également inclus ci-dessous)!
Une fois que vous avez solide, consultez le Kit de système de conception de progression Pour plus de ressources sur la croissance et la construction de votre système de conception.
Source link