manifest.jsonConfiguración del plugin. Selecciona este archivo al instalarlo en Figma.
1
Sube el proyecto
HTML, HTM o ZIP · máximo 15 MB
Arrastra aquí un proyecto HTML o ZIP, o elige un archivo
2
Tamaños adaptables
CÓMO FUNCIONA
Renderizado en el navegador, resultado estructurado.
CoreBase renderiza el estado inicial en tres anchuras, lee el DOM visible y el CSS calculado y crea árboles adaptables independientes.
Qué incluyen los datos
El JSON versionado registra jerarquía, texto, medidas, Flexbox, espaciado, tipografía, colores, bordes, visibilidad, desbordamiento, posición y referencias de imagen.
Límites actuales
CoreBase exporta datos estructurados y el plugin de Figma reconstruye capas editables. No todas las funciones CSS se reproducen exactamente. Se limitan scripts, recursos remotos, animaciones y estados transitorios. Revisa los diseños y las advertencias tras importar.
DE PRINCIPIO A FIN
Del proyecto HTML a diseños editables en Figma.
Prepara el diseño en el navegador, descarga el JSON e impórtalo con el plugin CoreBase en Figma Desktop. Instala el plugin una vez y reutilízalo en tus siguientes proyectos.
CoreBase HTML to Figma
ZIP listo para usar · esquema v2 · sin compilar ni instalar Node.js
Necesitas Figma Desktop, un archivo Figma Design editable y un proyecto HTML o ZIP local. Se instala como plugin de desarrollo, no desde Figma Community. Conserva la carpeta descomprimida en el ordenador después de instalarlo.
Prepara el proyecto HTML
Usa HTML/HTM o un ZIP con HTML, CSS, imágenes y fuentes, conservando las rutas relativas. Si hay recursos locales, es preferible ZIP. Límite: 15 MB. Se bloquean los recursos externos y los scripts del proyecto; se captura el estado estático inicial.
Exporta los diseños adaptables
Sube el proyecto arriba y elige la página principal si contiene varios HTML. Mantén Desktop 1440, Tablet 768 y Mobile 390 px o introduce otras anchuras. Pulsa Preparar datos del diseño, espera las tres capturas y guarda el archivo .corebase-layout.json.
Descarga y descomprime el plugin
Descarga el ZIP del plugin y extráelo en una carpeta local permanente. Debe contener manifest.json, README.md y dist con code.js y ui.html. No importes el ZIP, no muevas solo el manifiesto ni cambies el nombre de dist.
Instálalo en Figma Desktop
Abre un archivo Figma Design. Haz clic derecho en el lienzo → Plugins → Development → Import plugin from manifest… (a veces Import new plugin from manifest…). Selecciona manifest.json de la carpeta extraída. No necesitas crear otro plugin ni editar el manifiesto.
Ejecuta el plugin y selecciona el JSON
Abre Plugins → Development → CoreBase HTML to Figma. Elige el .corebase-layout.json del paso 2, no el HTML, el ZIP del proyecto o el manifiesto. Revisa el nombre, Import ID, esquema v2 y anchuras, y pulsa Import to Figma.
Revisa los diseños importados
Espera a Done. Se crea una sección CoreBase Import con Desktop, Tablet y Mobile en paralelo y seleccionados. Lee las advertencias y usa Select Imported Frames si hace falta. El texto y los vectores compatibles siguen siendo editables. Comprueba jerarquía, medidas, espaciado y recursos que falten.
Ajusta y vuelve a importar
Modifica el HTML/CSS original, exporta un nuevo JSON y ejecuta el plugin otra vez. Cada importación crea una sección nueva sin sobrescribir la anterior. Organiza y guarda los diseños en Figma como de costumbre.
Mantén estos archivos juntos
dist/code.jsImportador compilado. Déjalo dentro de dist.
dist/ui.htmlInterfaz del plugin. Debe estar junto a code.js en dist.
README.mdInstalación, desarrollo y limitaciones de V1.
Qué reconstruye el plugin
Capas, no una captura
Marcos, texto, imágenes incrustadas y SVG completos se reconstruyen como capas editables. Flexbox se convierte en Auto Layout cuando es posible; CSS Grid conserva las posiciones relativas dentro de un marco normal.
Comprueba fuentes e imágenes
Las fuentes o pesos no disponibles se sustituyen con una advertencia. Las imágenes ausentes o solo remotas se convierten en marcadores con las medidas correctas. Incluye recursos locales en el ZIP: el importador no los descarga de internet.
Tres diseños independientes
Desktop, Tablet y Mobile son marcos separados, no componentes adaptables enlazados automáticamente. No se reconstruyen CSS avanzado, animaciones, interacciones de prototipo, componentes ni tokens de diseño.
Si algo no se importa
Error de manifiesto o archivo ausente
Descarga de nuevo el ZIP actual y extrae toda la carpeta. Selecciona manifest.json sin mover dist/code.js ni dist/ui.html. Si el error menciona description, estás usando un manifiesto antiguo; el paquete actual no contiene ese campo.
Esquema incompatible o JSON inválido
Exporta aquí un nuevo Layout JSON. Solo se admite schemaVersion 2. No sirve renombrar HTML a .json ni usar un export antiguo incompatible. Import ID es un identificador, no un código para recuperar datos en línea.
Importación con advertencias
Las advertencias indican sustituciones y límites, no una reproducción perfecta. Revisa las capas, fuentes e imágenes señaladas. Si la captura original está vacía o incompleta, comprueba la página principal, las rutas locales y el contenido estático antes de exportar otra vez.
Tus archivos no se envían a CoreBase
El HTML se analiza localmente en un marco aislado del navegador. El plugin lee el JSON local sin llamar a CoreBase ni a API externas. Tras importar, las capas forman parte de tu archivo Figma, sujeto a las condiciones y ajustes de almacenamiento y privacidad de Figma.
Precisión y confianza
Construido para ser útil. Diseñado para ser revisado.
Probamos y revisamos herramientas, fórmulas e información CoreBase para mantenerlas útiles y precisas. Las imprecisiones ocasionales o las circunstancias específicas de su situación aún pueden afectar el resultado, así que verifique las decisiones importantes con respecto a sus propios requisitos.
¿Encontró algo que no se ve bien? Cuéntanos para que podamos revisarlo y mejorarlo.