Comment créer une page de destination avec Dualite
J'ai passé plusieurs heures à créer un design figma d'une page de destination. Chaque couleur est pertinente, chaque pixel est en place avec un flux utilisateur fluide, mais vient maintenant la partie intimidante du codage de cette page de destination.
Construire un design Figma est une tâche énorme à accomplir. C'est là que j'ai découvert Dualite, qui traduit les conceptions figma en code réel à l'aide de l'IA, aidant ainsi les développeurs comme moi à minimiser l'effort de codage réel. Voyons comment j'ai utilisé Dualite pour convertir ma page de destination en code réel
Qu’est-ce que la Dualite ?
Dualite est un plugin Figma innovant alimenté par l'IA, conçu pour combler le fossé entre la conception et le développement. Il se concentre sur la conversion des conceptions Figma en code réutilisable de haute qualité, avec la prise en charge de technologies populaires telles que Reactjs, TailwindCSS et plus encore.
Dualite vous permet de convertir n'importe quelle conception ou animation figma en code efficace en un seul clic que vous pouvez personnaliser en fonction de votre projet, il est livré avec des fonctionnalités intéressantes, permettez-moi de vous en donner un résumé :
-
Modes : Dualite propose deux modes, le mode composant et le mode page, idéaux pour les développeurs et les concepteurs pour convertir leur conception en code généré. Ces modes garantissent que la mise en page, l'interactivité, les animations et bien plus encore sont traduites avec précision de la conception au code.
- Mode Composant : se concentre sur des éléments de conception individuels, permettant la création de composants réutilisables.
- Mode Page : convertit des pages entières, en conservant la mise en page et la structure globales.
- En savoir plus sur les modes sur ce blog
-
Fonctionnalités avancées :
- Dualite propose des paramètres avancés permettant aux utilisateurs de fournir plus d'informations techniques sur leur conception. Cela garantit que le code généré est réactif et précis.
- Ces paramètres avancés donnent plus de pouvoir aux concepteurs et aux développeurs, leur permettant de personnaliser la sortie pour répondre aux exigences spécifiques du projet. Cette fonctionnalité est particulièrement utile pour les conceptions complexes qui nécessitent un contrôle précis sur le code final, comme les mises en page réactives ou les animations complexes. Pour démarrer rapidement avec Dualite, vous pouvez suivre leurs docs
Conception Figma
Commençons par une conception figma d'une page de destination, voir ci-dessous :
Ainsi, Dualite dispose d'une fonctionnalité de mode où vous pouvez basculer entre le mode Page et le mode Composant
Fondamentalement, le mode Page permet de convertir une conception complète en un seul clic et le mode Composant permet de créer des composants séparés que nous pouvons intégrer dans notre projet. Apprenez-en plus sur les composants dans la documentation
Nous utiliserons le mode Composant pour générer du code pour tous les composants présents dans la conception puis nous les intégrerons dans un seul projet
Commençons par diviser la page de destination en composants, voir ci-dessous :
Configuration initiale du projet
J'utiliserai Reactjs et Tailwind dans Dualite pour générer du code, alors configurons d'abord le projet :
- Application Reactjs : créez une application de réaction à l'aide de Vite ou de tout autre outil. Vite est un choix populaire pour créer des applications Javascript
- Configurer Tailwind : suivez Tailwind Docs pour configurer Tailwind dans une application Reactjs sans aucune erreur inutile. Assurez-vous d'ajouter également les dépendances telles que PostCSS et le préfixe automatique pour une configuration fluide de Tailwind.
- Fichiers de configuration : Créez tailwind.config.js et postcss.config.css à la racine du projet. tailwind.config.js peut être présent si vous avez suivi toutes les étapes de la documentation Tailwind. S'il est déjà là, mettez-le à jour en conséquence
- Utiliser Javascript : Pour l'instant, Dualite ne prend pas en charge Typescript, alors assurez-vous de créer l'application Reactjs avec Javascript uniquement
Commencer à convertir des composants dans Dualite
Configuration initiale :
- Mode : Nous utiliserons le mode composant. Utilisez le bouton bascule dans le coin supérieur droit pour basculer entre le mode page et le mode composant
- Frameworks : lorsque vous sélectionnez une conception à convertir en code, vous verrez plusieurs options de langage et de frameworks. J'utiliserai Reactjs et Tailwind pour générer du code.
- Pour commencer rapidement à utiliser Dualite, lisez ceci
Maintenant, commençons par convertir la conception en composant :
Composant de barre d'annonce : vérifiez le code généré ici
Composant de barre de navigation : vérifiez le code généré ici
Composant de filtre de catégorie : vérifiez le code généré ici
Composant de composant de carte : vérifiez le code généré ici
Composant de pagination : vérifiez le code généré ici
Composant de pied de page : vérifiez le code généré ici
Personnalisations
- Copier les composants :
- Maintenant, copiez le dossier Composants de tout le code généré ci-dessus et collez-le dans le projet dans un dossier de composants
- Vous avez peut-être remarqué que tous les noms de composants sont uniquement « Composant », alors nommons tous les composants en conséquence. Exemple : le composant de la barre d'annonce sera nommé « AnnouncementBar ». Vérifiez comment je l'ai fait ici
- Rendu tous les composants :
- Maintenant, importez tous les composants selon la conception dans le fichier App.jsx
- Exécutez le projet et vous verrez le résultat, vérifiez le fichier App.jsx ici
- Vous l'avez peut-être remarqué, certains composants doivent être réparés. Commençons par les personnalisations
- Fixation des styles de composants :
-
Polices :
- Comme vous pouvez le voir sur le design, nous avons nos propres polices. Je les ajoute dans les dossiers d'actifs afin que je puisse utiliser la police dans le projet n'importe où.
- Il faut également créer @font-face pour toutes les polices que nous utilisons dans le fichier index.css où les directives Tailwind sont présentes
-
Composant de la barre de navigation :
- La mise en page est inexacte, le style doit donc être corrigé
-
Composant de la carte :
- Icône étoile : Ajout de l'icône étoile dans le dossier graphique
- Text.js : mise à jour du fichier Text.js pour corriger l'étiquette du bouton et d'autres textes du composant
- Styles : styles mis à jour pour ajouter du poids de police à un élément de texte spécifique et à une étiquette de bouton
-
Logique des composants de la carte :
- Card Component ne restitue qu'un seul composant car il s'agit d'un seul composant uniquement.
- Pour restituer plusieurs composants de carte, je dois ajouter des données de démonstration pour les mapper et restituer plusieurs cartes
-
Polices :
Remarque : toutes les modifications et le code peuvent être consultés sur CodeSandBox ici
Sortir
Dès que j'ai effectué toutes ces personnalisations et modifications dans le projet, je peux voir une meilleure version de ma conception, vérifier le code et la sortie ici
Dualite a-t-il été utile ?
Comprenons-le bien, tous les composants que nous avons générés à l'aide de Dualite étaient prêts à être utilisés, oui, nous avons apporté quelques personnalisations au code pour le rendre aussi proche que le design en a l'air, malgré cela, tous les styles des composants, tous la hiérarchie des composants avec les données dans des fichiers séparés est générée par Dualite.
Au lieu de passer trop de temps à créer l'interface utilisateur, je peux utiliser Dualite pour cela.
En comparant cela au codage manuel, cela aurait pris assez de temps. Tous les composants ont été vraiment bons, rien ne peut être correct à 100%, chaque code a besoin d'une touche finale de la part du développeur et c'est ce que nous avons fait ici
Oui, Dualite a été très utile et rapide pour générer du code pour mes composants.
Conclusion
Voilà, un moyen efficace de générer le code de vos conceptions Figma avec très moins de codage manuel. Le processus de codage des conceptions est un véritable tour de montagnes russes, ce qui peut être moins compliqué si vous utilisez Dualite et personnalisez le code en fonction de vos besoins et du projet.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois façons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la chaîne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
Filtrage d'un tableau d'objets en JavaScript
Jul 12, 2025 am 03:14 AM
La méthode Filter () dans JavaScript est utilisée pour créer un nouveau tableau contenant tous les éléments de test de passage. 1.Filter () ne modifie pas le tableau d'origine, mais renvoie un nouveau tableau qui répond aux éléments conditionnels; 2. La syntaxe de base est array.filter ((élément) => {returnCondition;}); 3. Le tableau d'objets peut être filtré par valeur d'attribut, comme le filtrage des utilisateurs de plus de 30 ans; 4. Prise en charge du filtrage multi-conditions, comme remplir les conditions d'âge et de longueur de nom en même temps; 5. Peut gérer les conditions dynamiques et passer les paramètres du filtre dans les fonctions pour réaliser un filtrage flexible; 6. Lorsque vous l'utilisez, veillez à retourner les valeurs booléennes pour éviter de retourner des tableaux vides et combinez d'autres méthodes pour obtenir une logique complexe telle que la correspondance de chaînes.
Comment vérifier si un tableau comprend une valeur en javascript
Jul 13, 2025 am 02:16 AM
Dans JavaScript, vérifiez si un tableau contient une certaine valeur. La méthode la plus courante est Inclut (), qui renvoie une valeur booléenne et la syntaxe est Array.Cuecludes (ValueToFind), par exemple les fruits.Cuels («banane») Renvoie vrai; S'il doit être compatible avec l'ancien environnement, utilisez l'indexof (), comme nombres.indexof (20)! == - 1 Renvoie True; Pour les objets ou les données complexes, une méthode () doit être utilisée pour une comparaison approfondie, telles que les utilisateurs.Some (user => user.id === 1) renvoie true.
Gestion des erreurs dans les fonctions JavaScript asynchrones / attendu
Jul 12, 2025 am 03:17 AM
Pour gérer les erreurs dans les fonctions asynchrones, utilisez Try / Catch, gérez-les dans la chaîne d'appels, utilisez la méthode .catch () et écoutez les événements non performisés. 1. Utiliser Try / Catch pour attraper les erreurs est la méthode recommandée, avec une structure claire et peut gérer les exceptions en attente; 2. Les erreurs de traitement dans la chaîne d'appels peuvent être une logique centralisée, qui convient aux processus en plusieurs étapes; 3. Utilisez .Catch () pour attraper des erreurs après avoir appelé la fonction asynchrone, qui convient aux scénarios de combinaison de promesses; 4. Écoutez les événements de l'abri de la Fixation pour enregistrer les refus non performes comme la dernière ligne de défense; Les méthodes ci-dessus garantissent conjointement que les erreurs asynchrones sont correctement capturées et traitées.
Comment gérer les fuseaux horaires en JavaScript?
Jul 11, 2025 am 02:41 AM
La clé pour traiter les problèmes de fuseau horaire JavaScript est de choisir la bonne méthode. 1. Lorsque vous utilisez des objets de date native, il est recommandé de stocker et de transférer dans le temps UTC et de le convertir au fuseau horaire local de l'utilisateur lors de l'affichage; 2. Pour les opérations de fuseau horaire complexes, le moment-temps peut être utilisé, qui prend en charge la base de données du fuseau horaire IANA et offre des fonctions de mise en forme et de conversion pratiques; 3. Si vous avez besoin de localiser l'heure d'affichage et que vous ne souhaitez pas introduire des bibliothèques tierces, vous pouvez utiliser intl.datetimeFormat; 4. Il est recommandé au jour moderne de la solution légère et du plug-in de solution légère et de fuseau horaire et UTC, qui a une API concise, de bonnes performances et prend en charge la conversion du fuseau horaire.
Le concept d'un dom virtuel expliqué dans le contexte javascript
Jul 12, 2025 am 03:09 AM
Virtual Dom est un concept de programmation qui optimise les mises à jour réelles DOM. En créant une structure d'arbre correspondant au DOM réel en mémoire, il évite le fonctionnement fréquent et direct du DOM réel. Son principe de base est: 1. Générer un nouveau DOM virtuel lorsque les données changent; 2. Trouvez la plus petite différence entre les nouveaux et les anciens doms virtuels; 3. Mise à jour par lots du DOM réel pour réduire les frais généraux de réarrangement et de redémarrage. De plus, l'utilisation d'une clé stable unique peut améliorer l'efficacité de comparaison de la liste, tandis que certains cadres modernes ont adopté d'autres technologies pour remplacer le DOM virtuel.
Qu'est-ce que la programmation fonctionnelle? Un tour-t-up JS des concepts de base
Jul 11, 2025 am 03:13 AM
FunctionalProgrammingInjavascriptEmphasizesClean, prédictioncodethroughcoreConcepts.1.purefonctionnement de la recherche de nom
