Tirer le meilleur parti de l’importation de Figma-HTML de Themebuilder

Le plugin d’importation Figma-HTML de Themebuilder vous permet de créer vos propres composants personnalisés et de les ajouter à themebuilder – où ils peuvent être modifiés et stylisés aux côtés des composants de Telerik et Kendo UI.

Avec plus de 100 composants dans chaque version, Progress Telerik et Kendo UI Libraries ont fait un très bon travail d’anticipation… eh bien, à peu près tous les composants dont vous aurez besoin.

Pourtant, de temps en temps, vous pourriez vous retrouver dans le besoin de quelque chose vraiment Custom – le type de composant qui n’est tout simplement pas possible pour une bibliothèque tierce à offrir. Nous l’obtenons, et (plus important encore), nous ne pensons pas que l’utilisation d’une bibliothèque tierce comme Telerik ou Kendo UI devrait jamais vous rendre plus difficile de faire votre propre chose.

En fait, nous avons créé des outils qui le font Plus facile: comme le Thèmebuilder Figma-to-HTML Plugin d’importationqui vous permet de créer vos propres composants personnalisés et de les ajouter à themebuilder où ils peuvent être modifiés et stylés (soit en modifiant le code, soit en utilisant nos outils sans code) à côté de tous les composants Telerik et Kendoui. Ce faisant, vous pouvez créer une seule source de vérité pour toutes vos décisions de conception – un endroit où les concepteurs, les développeurs, les chefs de produit et plus peuvent tous se réunir pour voir le système de conception mis en œuvre dans toute votre suite de composants.

Cela ressemble à quelque chose qui pourrait être utile pour votre équipe? Crétons!

Utilisation du plugin Figma Themebuilder

Le plugin Figma Themebuilder peut faire plusieurs choses différentes; Vous avez peut-être déjà lu l’un de nos précédents Blogs sur l’importation de jetons de conception avec ça. Mais saviez-vous que vous pouvez également importer des composants complets?

Installez simplement le plugin pour votre compte Figma, lancez-le, connectez-vous à themebuilder et vous pouvez choisir l’option «Composants» dans l’option «Que voulez-vous exporter?» écran.

Ensuite, vous serez invité à choisir un projet ThemeBuilder pour ajouter votre composant personnalisé. Une fois que vous avez choisi votre projet, sélectionnez un composant sur FIGMA. Il est important de noter ici que vous devez avoir réellement créé une instance de composant dans FIGMA – nous n’utilisons pas seulement le «composant» comme terme général ici!

Une fois que vous avez sélectionné un composant, vous pouvez commencer à faire la partie vraiment cool (au moins, à mon avis): cartographie des sous-composants. Après tout, la plupart des composants personnalisés ou complexes sont toujours constitués de composants plus petits et plus basiques, non? C’est l’idée derrière le design atomique! Nous voulons aider à garder cette structure intacte, vous pouvez donc toujours tirer parti des composants Telerik ou Kendo pour construire vos composants personnalisés uniques.

Pour cartographier les sous-composants, cliquez simplement sur le bouton «MAP», puis commencez à faire correspondre les composants répertoriés avec tous les composants Telerik ou Kendo que vous pourriez avoir utilisés. Par exemple, cet en-tête personnalisé peut utiliser notre composant AppBar, et mes icônes cliquables peuvent être des boutons qui utilisent des icônes SVG!

Après avoir tout mappé et prêt, cliquez simplement sur «Exporter». Vous verrez un avis de confirmation; Lorsque vous ouvrez votre projet ThemeBuilder, le nouveau composant sera là sous l’onglet «Mes composants».

Meilleures pratiques pour vos meilleures exportations

Pour tirer le meilleur parti de l’exportation des composants Themebuilder, voici ce que nous recommandons:

• Utilisez des noms clairs et uniques Pour que les composants et les nœuds générent des classes CSS significatives.
• Créer des composants maigres; Évitez les couches inutiles où que vous puissiez.
• Embrasser la composition: Créez vos composants personnalisés avec des composants Telerik ou Kendo Interface Kits d’interface utilisateur Figma), et utilisez la fonction de mappage pour garder tout connecté.
• Tirer parti des styles et des variables; Ces exportations sont des jetons réutilisables, ce qui rend les mises à jour faciles et centralisées.

Prêt à essayer?

Ce flux de travail retourne le cycle de transfert traditionnel: plus les développeurs ont tout le mot à dire sur la façon dont les composants personnalisés sont interprétés et construits. Les concepteurs ont désormais la capacité, en utilisant le plugin Figma Themebuilder, pour définir quels composants sont utilisés pour construire des éléments d’interface utilisateur personnalisés plus complexes, puis pour faire des petits ajustements et confirmer qu’ils regardent et se comportent exactement comment ils s’attendent, grâce à la prévisualisation en direct de Themebuilder.

Évitez de redémarrer les visuels, d’éliminer la synchronisation manuelle et de raccourcir le délai de production, tout en préservant la fidélité et la maintenabilité de conception. Qu’est-ce qu’il ne faut pas aimer?