Retour

Capturer un site web dans Figma

Guide étape par étape.

1

Installer l'extension Chrome

Allez au Chrome Web Store, cliquez 'Ajouter à Chrome'.

2

Capturer une page entière

  1. Naviguer vers la page.
  2. Cliquer l'icône PixelSync.
  3. Cliquer 'Capturer page entière'.
  4. Copié automatiquement.
💡Scrollez d'abord pour le lazy-loading.
3

Sélectionner un élément

Mode 'Sélectionner un élément' :

  1. Icône PixelSync.
  2. 'Sélectionner un élément'.
  3. Cliquer l'élément.
💡Idéal pour composants individuels.
4

Coller dans Figma

Figma, ⌘V (ou Ctrl+V Windows).

Sans plugin Figma.

5

Capturer designs IA ⭐ Recommandé

Le plus rapide pour importer des designs IA. Fonctionne sur toute page web.

Claude

Artifacts Claude depuis le navigateur.

ChatGPT

Canvas, HTML/CSS, pages rendues.

v0

Pages ou composants UI v0.

Bolt

Apps Bolt ou sections.

Lovable

Pages Lovable en calques Figma.

💡Puissant pour l'itération design.
6

Nettoyage intelligent

Activer 'Nettoyage intelligent' avant la capture.

💡Pour HTML profondément imbriqué.
7

Pages derrière login

Capture tout ce que le navigateur voit.

Identifiants ne quittent jamais l'appareil.

8

Layouts mobile/tablette

Capture le viewport actuel. Pour mobile :

  1. DevTools (F12) ou redimensionner.
  2. Largeur souhaitée (375px).
  3. Recharger la page.
  4. Capturer normalement.
9

Mode sombre/clair

Capture prefers-color-scheme actuel. Pour les deux thèmes :

  1. Capturer au thème actuel.
  2. Changer apparence du système.
  3. Recharger et recapturer.
10

Conseils

  • •Scrollez d'abord.
  • •Sélectionner pour pages complexes.
  • •Nettoyage intelligent.
  • •Polices en font-family.
  • •CSS complexe simplifié.
  • •Images cross-origin vides.
  • •Point de départ, pas clone.
  • •Pas de scroll auto.

Prêt à essayer ?

Gratuit — 15 captures/mois.

Installer gratuit