manifest.jsonConfiguration du plugin. Sélectionnez ce fichier lors de l’installation dans Figma.
1
Importer le projet
HTML, HTM ou ZIP · 15 Mo maximum
Déposez ici un projet HTML ou ZIP, ou choisissez un fichier
2
Formats adaptatifs
FONCTIONNEMENT
Rendu par le navigateur, résultat structuré.
CoreBase rend l’état initial à trois largeurs, lit le DOM visible et les styles calculés, puis crée trois arbres adaptatifs indépendants.
Contenu des données
Le JSON versionné décrit la hiérarchie, le texte, les dimensions, Flexbox, les espacements, la typographie, les couleurs, les bordures, la visibilité, le débordement, la position et les images.
Limites actuelles
CoreBase exporte des données structurées ; le plugin Figma séparé reconstruit des calques modifiables. Toutes les fonctions CSS ne sont pas reproduites à l’identique. Scripts, ressources distantes, animations et états temporaires sont limités. Vérifiez les maquettes et avertissements.
DE A À Z
Du projet HTML aux maquettes Figma modifiables.
Préparez la mise en page dans votre navigateur, téléchargez le JSON, puis importez-le avec le plugin CoreBase dans Figma Desktop. Une seule installation suffit pour vos projets suivants.
CoreBase HTML to Figma
ZIP prêt à l’emploi · schéma v2 · sans compilation ni Node.js
Il vous faut Figma Desktop, un fichier Figma Design modifiable et un projet HTML ou ZIP local. Le plugin s’installe en mode développement, pas depuis Figma Community. Conservez son dossier décompressé sur votre ordinateur après l’installation.
Préparer le projet HTML
Utilisez un fichier HTML/HTM ou un ZIP réunissant HTML, CSS, images et polices, sans modifier les chemins relatifs. Le ZIP est préférable avec des ressources locales. Limite : 15 Mo. Les ressources externes et les scripts du projet sont bloqués ; seul l’état statique initial est capturé.
Exporter les mises en page
Importez le projet ci-dessus et choisissez la page principale s’il contient plusieurs fichiers HTML. Gardez Desktop 1440, Tablet 768 et Mobile 390 px, ou définissez vos largeurs. Lancez Préparer les données de mise en page, attendez les trois captures et téléchargez le fichier .corebase-layout.json.
Télécharger et décompresser le plugin
Téléchargez le ZIP du plugin et décompressez-le dans un dossier local permanent. Il contient manifest.json, README.md et dist avec code.js et ui.html. N’importez pas le ZIP, ne déplacez pas le manifeste seul et ne renommez pas dist.
Installer dans Figma Desktop
Ouvrez un fichier Figma Design. Clic droit sur le canevas → Plugins → Development → Import plugin from manifest… (parfois Import new plugin from manifest…). Sélectionnez manifest.json dans le dossier extrait. Inutile de créer un nouveau plugin ou de modifier le manifeste.
Lancer le plugin et choisir le JSON
Ouvrez Plugins → Development → CoreBase HTML to Figma. Sélectionnez l’export .corebase-layout.json de l’étape 2, pas le HTML, le ZIP du projet ou le manifeste. Vérifiez le nom, l’Import ID, le schéma v2 et les largeurs, puis cliquez sur Import to Figma.
Vérifier les maquettes importées
Attendez Done. Une section CoreBase Import contient Desktop, Tablet et Mobile côte à côte, automatiquement sélectionnés. Consultez les avertissements et utilisez Select Imported Frames au besoin. Textes et vecteurs pris en charge restent modifiables. Vérifiez hiérarchie, dimensions, espacements et ressources manquantes.
Ajuster et recommencer
Modifiez le HTML/CSS source, exportez un nouveau JSON et relancez le plugin. Chaque import crée une nouvelle section sans écraser la précédente. Organisez et enregistrez les maquettes dans Figma comme d’habitude.
Conservez ces fichiers ensemble
dist/code.jsCode d’import compilé. À conserver dans dist.
dist/ui.htmlInterface du plugin. À conserver à côté de code.js dans dist.
README.mdInstallation, développement et limites de la V1.
Ce que vous obtenez
Des calques, pas une capture
Cadres, textes, images intégrées et SVG complets deviennent des calques modifiables. Flexbox utilise Auto Layout lorsque possible ; CSS Grid conserve les positions relatives dans un cadre ordinaire.
Polices et images à contrôler
Les polices ou graisses indisponibles sont remplacées avec un avertissement. Les images absentes ou uniquement distantes deviennent des espaces réservés aux bonnes dimensions. Incluez vos ressources locales dans le ZIP : aucun téléchargement externe n’est effectué.
Trois maquettes indépendantes
Desktop, Tablet et Mobile sont des cadres distincts, pas des composants adaptatifs automatiquement liés. CSS avancé, animations, interactions de prototype, composants et design tokens ne sont pas reconstruits.
En cas de difficulté
Erreur de manifeste ou fichier manquant
Téléchargez à nouveau le ZIP actuel et extrayez tout le dossier. Choisissez manifest.json en conservant dist/code.js et dist/ui.html à leur place. Une erreur mentionnant description indique un ancien manifeste ; ce champ est absent du paquet actuel.
Schéma incompatible ou JSON invalide
Exportez un nouveau Layout JSON ici. Seul schemaVersion 2 est accepté. Renommer du HTML en .json ou utiliser un ancien export incompatible ne fonctionne pas. L’Import ID identifie le projet ; il ne permet pas de récupérer les données en ligne.
Import terminé avec avertissements
Les avertissements signalent des remplacements et limites, pas une fidélité parfaite. Contrôlez les calques, images et polices indiqués. Si la capture source est vide ou incomplète, vérifiez la page HTML principale, les chemins locaux et le contenu statique avant un nouvel export.
Vos fichiers ne passent pas par les serveurs CoreBase
Le HTML est analysé localement dans un cadre isolé du navigateur. Le plugin lit le JSON local sans appeler CoreBase ni d’API externe. Les calques importés font ensuite partie de votre fichier Figma, soumis aux paramètres de stockage et de confidentialité de Figma.
Précision et confiance
Conçu pour être utile. Conçu pour être vérifié.
Nous testons et examinons les outils, formules et informations CoreBase pour les garder utiles et précis. Des inexactitudes occasionnelles ou des circonstances spécifiques à votre situation peuvent toujours affecter un résultat, alors vérifiez les décisions importantes par rapport à vos propres exigences.
Vous avez trouvé quelque chose qui ne semble pas correct ? Dites-le-nous afin que nous puissions le revoir et l'améliorer.