Commencer gratuitement
Menu de la documentation

Convertir depuis Figma

Pas à pas : transformez un fichier ou un frame Figma en contenu WordPress avec un lien et un jeton d'accès personnel, ou avec un JSON exporté.

Figma est disponible sur toutes les offres, Free comprise. Vous pouvez vous connecter avec un lien et un jeton d’accès personnel, ou importer le JSON exporté de Figma.

Une page ou un frame par projet

Tapeto convertit la première page du fichier Figma — ou seulement le frame précis lorsque votre lien en désigne un. Pour convertir un site de plusieurs pages, créez un projet par frame (copiez le lien de chaque frame). Chaque projet compte dans votre limite mensuelle.

Avant de commencer

  • Un fichier Figma que vous pouvez ouvrir (au moins un accès en lecture).
  • Un jeton d’accès personnel Figma (uniquement pour la méthode du lien).
  • Votre WordPress, si vous allez publier : voir le guide ZIP / HTML.

Étape 1 — Préparer le design dans Figma

Tapeto lit la structure des calques ; un fichier bien rangé donne un meilleur Fidelity Score.

  1. Construisez chaque page comme un Frame en largeur bureau.
  2. Utilisez l’Auto layout partout où c’est possible : l’auto layout horizontal et vertical devient des lignes et des colonnes avec leurs espacements et marges internes.
  3. Nommez vos calques selon leur rôle — Header, Hero, Nav, Card, Button, Footer, H1, H2… Les noms aident Tapeto à décider ce qui est une section, un menu ou un bouton.
  4. Écrivez le texte en vrais calques de texte (pas en contours) et utilisez des polices disponibles sur Google Fonts.
  5. Supprimez ou laissez de côté les calques inutiles : les calques masqués sont ignorés.

Étape 2 — Créer le projet

Méthode A — Lien et jeton

  1. Dans Figma, clic droit sur le frame → Copy/Paste as → Copy link to selection (ou copiez l’URL du fichier pour convertir la première page).
  2. Créez un jeton : Figma → menu de votre profil → Settings → Security → Personal access tokens → Generate new token. Un accès en lecture au contenu du fichier suffit. Copiez-le (il commence par figd_).
  3. Dans Tapeto, cliquez sur Nouveau projet, saisissez un nom et ouvrez l’onglet Figma.
  4. Collez le lien dans URL du fichier ou du frame Figma et le jeton dans Jeton d’accès personnel Figma.
  5. Cliquez sur Créer le projet.

Le jeton sert une seule fois à télécharger le fichier et n’est jamais enregistré. Le lien doit ressembler à https://www.figma.com/design/….

Méthode B — Importer le JSON

  1. Exportez le JSON du fichier depuis l’API REST de Figma (GET /v1/files/:file_key avec votre jeton) et enregistrez-le en fichier .json de 5–200 Mo (selon l’offre) maximum.
  2. Dans Tapeto, cliquez sur Nouveau projet, ouvrez l’onglet Figma et déposez le .json dans la zone du bas.
  3. Cliquez sur Créer le projet.

Attendez que le projet soit « traité ». S’il se termine en « erreur », le message vous indique pourquoi (voir le tableau ci-dessous).

Étape 3 — Choisir le builder et convertir

  1. Ouvrez le projet et choisissez Gutenberg (toutes les offres) ou Elementor (à partir de Starter).
  2. Cliquez sur Convertir et attendez que la conversion soit terminée.
  3. Vérifiez l’Aperçu et le Fidelity Score. Contrôlez les images : s’il en manque une, remplacez-la depuis la Médiathèque après l’import.

Étape 4 — Amener le résultat dans WordPress

Compte Free

  1. Ouvrez l’onglet Contenu et cliquez sur Télécharger les fichiers (ou Copier).
  2. Dans WordPress : Pages → Ajouter, menu à trois points → Éditeur de code, collez le contenu, puis revenez à l’éditeur visuel.
  3. Si le design a un en-tête ou un pied de page, téléchargez-les depuis l’onglet En-tête / Pied / Barre latérale et collez-les dans les parties de modèle correspondantes.
  4. L’onglet Instructions détaille les étapes exactes. Exporter en WXR et Publier sur WordPress sont verrouillés en Free.

Compte payant (Starter, Pro, Agency, Studio)

  1. Choisissez Elementor si vous le préférez (à partir de Starter).
  2. Cliquez sur Exporter en WXR et importez-le depuis Outils → Importer → WordPress, ou connectez votre site et cliquez sur Publier sur WordPress. Les deux options sont expliquées pas à pas dans le guide ZIP / HTML.
  3. La publication crée la page en brouillon pour que vous la vérifiiez.
  4. Sur Agency et Studio, le WXR peut aussi contenir les types de contenu personnalisés et les boucles détectés dans le design.

Si quelque chose échoue

Message Cause Que faire
Figma a refusé le jeton ou vous n’avez pas accès Jeton incorrect, ou fichier non partagé avec vous Générez un nouveau jeton et vérifiez que vous pouvez ouvrir le fichier
Fichier introuvable Le lien est incorrect Copiez à nouveau le lien depuis Figma
Figma a limité les requêtes Trop de requêtes en peu de temps Attendez une minute et réessayez
L’URL doit ressembler à figma.com/design/… Le lien n’est pas celui d’un fichier Figma Utilisez un lien commençant par https://www.figma.com/design/
JSON non reconnu Le fichier n’est pas un export Figma Exportez-le à nouveau depuis l’API REST

Étape suivante

Lisez Exporter les résultats pour toutes les façons d’amener la sortie dans WordPress.