Figma est un excellent outil qui devient rapidement un favori parmi les concepteurs UX/UI et Web. Vous pouvez créer rapidement et facilement des conceptions Web réactives à l'aide de cet outil gratuit basé sur un navigateur.
Alors que la plupart des gens créent leurs conceptions à partir de zéro dans Figma, vous pouvez vous inspirer de vrais sites Web et créer facilement une conception Figma directement à partir d'une page HTML existante. Voici comment procéder.
Pourquoi devriez-vous créer des conceptions Figma à partir de HTML
Il existe de nombreuses raisons pour lesquelles vous voudrez peut-être reproduire une conception Web existante en tant que conception Figma. Faire cela via le plugin Figma permet de gagner du temps, vous permettant de vous concentrer sur la mise au point de votre conception.
Pratiquer la conception Web en recréant des pages Web existantes est un excellent moyen d'apprendre des maîtres. Vous pouvez également utiliser l'outil de conception HTML vers Figma si vous avez déjà conçu et publié une page Web à laquelle vous avez perdu l'accès. Au lieu de le reconcevoir à partir de zéro, vous pouvez gagner du temps en le reconvertissant en Figma pour y travailler à nouveau.
Maintenant que vous savez pourquoi cet outil peut être pratique, il est temps d'apprendre comment il fonctionne.
Comment convertir n'importe quel site Web en un design Figma
Pour commencer tout travail de conception basé sur Figma, vous devez ouvrir Figma et vous connecter ou vous inscrire. Vous pouvez utiliser la version du navigateur, Figma, ou télécharger l'application de bureau; ils fonctionnent tous les deux de la même manière pour ce projet.
Ouvrir un Nouveau fichier de conception pour commencer votre projet de conception HTML vers Figma.
Étape 1: Téléchargez le plugin html.to.design
Pour pouvoir convertir directement un site Web en direct en un design Figma, vous aurez besoin d'un plugin. Il existe d'innombrables plugins sur Figma pour vous aider dans vos conceptions, y compris plugins pour créer des maquettes pour téléphones et appareils. Vous pouvez ajouter ultérieurement la conception de votre site Web converti à une maquette si vous le souhaitez.
Pour télécharger le plugin, sélectionnez le Menu Figma (Logo Figma) > Plugins > Trouver plus de plugins. Alternativement, vous pouvez sélectionner Ressources > Plugins. Dans l'une ou l'autre des options, tapez dans la barre de recherche html.to.design.
Trouvez l'option fournie par divRIOTS et sélectionnez Courir. Cela ouvre le plugin en tant que boîte de dialogue sur votre canevas Figma.
Étape 2: collez l'URL du site Web
Le plugin html.to.design est gratuit, mais il propose une version pro. Vous pouvez compléter entièrement votre processus de conception avec la version gratuite.
Trouvez le site Web dont vous souhaitez créer un design Figma. Vous devez utiliser un site Web public, et non une page Web accessible uniquement en vous connectant. Nous allons utiliser notre page d'accueil, MakeUseOf.com.
Copiez l'URL complète et collez-la dans la zone d'importation sur Figma, en remplaçant l'espace réservé du site Web d'Apple.
Étape 3: Chargez votre conception
Après avoir collé l'URL du site Web, ouvrez Paramètres sous la zone d'importation pour sélectionner la taille du dessin. Vous pouvez importer la conception pour une variété d'appareils, mais vous aurez plus de succès en choisissant un appareil de bureau si vous avez utilisé une URL de bureau et un meilleur succès en utilisant une URL mobile pour les appareils mobiles.
Il existe également des options personnalisées pour les appareils ou les tailles qui ne sont pas disponibles comme options par défaut. Nous choisissons MacBook Pro 14" avec un Lumière thème.
Une fois que vous avez spécifié votre appareil et affiché les paramètres, sélectionnez Importer pour donner vie à votre conception HTML dans Figma. Attendez que la barre de charge soit complète pour que la conception Figma se remplisse.
Selon le site Web que vous avez utilisé, vous remarquerez peut-être une fenêtre contextuelle expliquant que certaines polices de caractères ont dû être remplacées. Cela sera dû au droit d'auteur pour les polices de caractères sous licence. Figma les remplacera par des polices auxquelles vous avez accès.
Quittez toutes les fenêtres contextuelles, puis quittez la boîte de dialogue du plug-in pour voir votre nouveau design dans sa forme complète.
Étape 4: Modifier votre design Figma
À partir de là, vous pouvez commencer à modifier votre page Web Figma comme vous le souhaitez. Comme mentionné, cette fonction HTML vers Figma vous permet d'apprendre comment les pages Web existantes ont été conçues pour vous inspirer à créer la vôtre à partir de zéro. Vous pouvez utiliser la conception de base du site Web et créer une présentation en utilisant des transitions dans Figma, ou découvrez simplement comment les pages Web sont configurées par d'autres concepteurs.
Dans le menu de gauche, vous trouverez les calques. Comme cela a été converti directement à partir de HTML, les calques peuvent être plus détaillés, voire déroutants, que ce à quoi vous êtes habitué lorsque vous concevez vous-même. Sélectionnez une section dans la conception pour trouver les calques en surbrillance dans le menu de gauche.
Vous pouvez remplacer les images, retaper les titres et le corps du texte ou déplacer des éléments dans la mise en page en double-cliquant sur l'aspect de conception. Le plugin html.to.figma ne réplique pas les paramètres d'animation ou de transition lorsque vous cliquez sur des liens ou changez de page. Vous pouvez les ajouter vous-même.
Comment convertir une page Web privée
La majorité du processus de création d'un site Web privé - qui nécessite un compte pour y accéder - par rapport à une page Web publique est le même. Cependant, au lieu de coller l'URL, vous devez plutôt utiliser une extension Chrome qui génère un fichier.
Pour commencer, ouvrez Figma et le plugin html.to.figma de la même manière qu'avant.
Étape 1: Téléchargez et exécutez l'extension Chrome
Vous ne pouvez utiliser cette extension qu'avec Google Chrome, alors ouvrez Chrome pour commencer. Dans la boîte de dialogue du plugin Figma, sélectionnez Extension chromée-ou ouvrez l'extension ici sur votre navigateur Chrome.
Sélectionner Ajouter à Chrome > Ajouter une extension pour ajouter l'extension à votre navigateur.
Une fois l'extension ajoutée, accédez au site Web ou à la page privée dont vous souhaitez reproduire le design (nous utilisons une page Instagram) et sélectionnez l'extension. Les extensions réduites se trouvent sous l'icône de pièce de puzzle dans votre navigateur.
Il vous demandera si vous souhaitez capturer la page entière ou simplement ce qui est en vue. Faites votre sélection, puis la capture apparaîtra dans vos téléchargements sous forme de fichier .h2d.
Étape 2: faites glisser le fichier généré dans le plugin Figma
Accédez à votre application Figma ou au site Figma sur votre navigateur et faites glisser votre fichier .h2d téléchargé dans la boîte. Le fichier se chargera et se générera de la même manière que l'option de site Web public.
Comme avec la version de la page Web publique, vous pouvez double-cliquer sur les aspects de la conception pour les modifier ou cliquer sur le menu de gauche pour voir où ils apparaissent sur la mise en page.
Vous voudrez peut-être ajouter de nouveaux éléments de conception à la conception de la page Web, comme un effet verre givré Figma, ou vous pouvez même reproduire des parties de la conception de la page Web en tant que modèle principal pour les présentations Figma. En 2022, Adobe a acquis Figma, nous pouvons donc nous attendre à des façons plus amusantes d'utiliser Figma à l'avenir.
Utilisez n'importe quel site Web pour vous inspirer dans vos conceptions Figma
Bien que Figma soit principalement destiné à la conception de sites Web ou de pages UX / UI à partir de zéro, c'est une excellente occasion de remplir des pages Web existantes pour voir comment elles ont été construites. Vous pouvez également faire de votre conception Web une réplique d'un site existant si vous ne savez pas par où commencer à partir d'une ardoise vide.
Une autre bonne raison pour laquelle vous devriez utiliser le plugin html.to.figma est si vous avez déjà conçu un site Web auquel vous avez perdu l'accès. Vous pouvez remplir la page dans Figma et recommencer sans avoir à recommencer.
