Le plugin Figma Weblify renvoie vers l’extension Chrome Weblify gratuite pour importer des sites web. L’extension fonctionne directement dans votre navigateur, y compris sur les pages qui utilisent votre connexion ou votre session de navigateur actuelle.
Importer un site web
- Installez l’extension Chrome Weblify.
- Ouvrez dans Chrome la page web que vous voulez copier.
- Sélectionnez l’icône de l’extension Weblify pour ouvrir sa barre d’outils sur la page.
- Conservez Current Window Size, ou ouvrez le sélecteur de taille pour choisir une ou plusieurs tailles de capture.
- Choisissez Copy page pour copier toute la page, ou Pick element pour sélectionner un seul élément.
- Attendez la confirmation Copied to clipboard. Lorsque vous copiez une page, laissez Weblify terminer le défilement et la préparation du contenu.
- Revenez dans votre fichier Figma et collez avec Command + V sous macOS ou Ctrl + V sous Windows.
Vous pouvez aussi choisir Import website dans le menu ⋯ du plugin Figma Weblify, puis sélectionner Download the Chrome Extension.
Choisir les tailles de capture
Ouvrez le sélecteur de taille à côté du logo Weblify pour afficher Capture sizes. Le sélecteur affiche la taille choisie, ou un nombre comme 2 sizes lorsque plusieurs tailles sont sélectionnées.
| Taille | Fenêtre d’affichage du navigateur |
|---|---|
| Current Window Size | La largeur et la hauteur du contenu de la fenêtre de votre navigateur. Les dimensions se mettent à jour lorsque vous redimensionnez la fenêtre. |
| Desktop | 1440 × 900 pixels |
| Tablet | 768 × 1024 pixels |
| Mobile | 390 × 844 pixels |
| Custom | Saisissez une largeur de 280 à 2560 pixels et une hauteur de 320 à 2400 pixels. |
Cochez plusieurs cases pour copier dans Figma des frames distincts et nommés, placés côte à côte. Au moins une taille reste toujours sélectionnée. Vos choix restent sélectionnés lorsque vous utilisez Restart, jusqu’à ce que vous rechargiez la page web.
Copy page inclut toute la hauteur de la page pour chaque largeur choisie. Le réglage de hauteur définit la fenêtre d’affichage utilisée pour la mise en page ; il ne rogne pas le résultat à cette hauteur. Pick element copie l’élément sélectionné tel qu’il apparaît à chaque taille choisie.
Utilisez Current Window Size seule pour capturer la page en direct, telle qu’elle est actuellement affichée. Les autres tailles recalculent la mise en page d’une copie de la page : le contenu contrôlé par JavaScript, le contenu intégré ou les graphismes canvas peuvent donc différer.
Charger le contenu avant la copie
Copy page fait automatiquement défiler la page avant de la capturer. Cela laisse le temps aux images à chargement différé et aux sections qui apparaissent au défilement de se charger. Weblify rétablit ensuite votre position de défilement d’origine et capture la page préparée aux tailles choisies.
La préparation est limitée en durée et en défilement, afin que les pages avec un flux infini ne se chargent pas indéfiniment. Le contenu très lent, les derniers éléments d’un flux infini ou le contenu qu’un site supprime pendant le défilement peuvent tout de même manquer. Pick element ne fait pas défiler la page automatiquement au préalable.
S’il manque quelque chose, faites défiler la page vous-même jusqu’à cet élément, attendez qu’il apparaisse, puis essayez Pick element avec Current Window Size seule sélectionnée.
Choisir un élément
Sélectionnez Pick element, puis survolez la page et cliquez sur l’élément à copier. Utilisez les commandes haut et bas pour passer à un élément parent ou enfant avant de le copier.
Si l’élément sélectionné est masqué à l’une des tailles choisies, Weblify signale une erreur au lieu de copier un frame vide. Choisissez une taille à laquelle l’élément est visible et réessayez.
Après une copie réussie, sélectionnez Restart pour revenir à la barre d’outils sans perdre vos choix de taille, ou fermez la notification de confirmation.
Les pages internes du navigateur et le Chrome Web Store n’autorisent pas les extensions à injecter des commandes dans la page. Ouvrez un onglet de site web ordinaire avant de sélectionner l’icône de l’extension Weblify.