Guía de usuario de MarkupGen
Todo lo que necesitas saber para convertir diseños de Figma en código listo para producción — funciones, planes, límites y cómo obtener los mejores resultados.
Bienvenido a MarkupGen
Qué es MarkupGen, para quién está pensado y qué lo hace diferente.
¿Qué es MarkupGen?
MarkupGen es una plataforma que convierte diseños de Figma en código front-end listo para producción. Un plugin complementario de Figma exporta el frame en el que estás trabajando; MarkupGen lo convierte en HTML y CSS y, en los planes de pago, en un componente de React, Vue, Svelte o Angular. Un editor integrado de doble modo (editor de código más un editor visual de clic para editar) te permite refinar el resultado antes de exportarlo.
Para quién está pensado
Desarrolladores front-end y freelancers que prefieren no traducir a mano cada diseño desde un archivo de diseño, pequeñas agencias que convierten diseños de clientes en páginas funcionales con rapidez, y cualquiera que esté creando una plantilla de correo electrónico en HTML que deba funcionar en Gmail, Outlook y Apple Mail.
El problema que resuelve
Convertir un archivo de Figma en código funcional a mano es repetitivo y fácil de hacer mal sin darse cuenta. La conversión base de MarkupGen funciona con un motor predecible basado en reglas, guiado por los nombres de tus capas de Figma y la configuración de Auto Layout, de modo que el mismo diseño se convierte siempre de la misma manera. Sobre esa base se añade un conjunto específico de funciones de IA — para interactividad, variantes responsivas, puntuación de calidad y correcciones con un clic — justo donde la IA aporta valor real.
Principales casos de uso
- Convertir un único frame o componente de Figma en una página HTML independiente.
- Producir una landing page responsiva que se adapte a escritorio y móvil.
- Generar una plantilla de correo electrónico en HTML con estilos en línea para compatibilidad entre distintos clientes de correo.
- Exportar un diseño como componente de React, Vue, Svelte o Angular para tu propio código (planes de pago).
- Construir una biblioteca personal o de equipo de puntos de partida reutilizables con Templates.
Primeros pasos
Desde crear una cuenta hasta revisar tu primera página generada.
- 1
Crea una cuenta
Regístrate con Google en un clic, o con correo electrónico y contraseña. La opción por correo requiere resolver una comprobación de verificación rápida y confirmar tu correo antes de poder iniciar sesión.
- 2
Inicia sesión
Usa el mismo método con el que te registraste. Cinco intentos fallidos de contraseña bloquean tu cuenta durante 15 minutos — usa "¿Olvidaste tu contraseña?" para restablecerla por correo en cualquier momento.
- 3
Explora tu panel
Tu panel muestra un botón Create from Figma, tu número de proyectos y la puntuación media de calidad de IA, un acceso directo Quick Convert, y tus proyectos actualizados más recientemente.
- 4
Entiende los espacios de trabajo
Cada proyecto vive dentro de un Workspace — un espacio compartido para ti y tus compañeros de equipo. Dentro de un proyecto, puedes alternar entre el Code Editor (todos los planes) y el Visual Editor (Starter, Pro, Business).
- 5
Crea tu primer proyecto
Instala el plugin de MarkupGen desde Figma Community, ábrelo en Figma, selecciona un frame o componente y haz clic en Export & Send.
Aparece un nuevo proyecto en tu panel de MarkupGen.
- 6
Ejecuta tu primera conversión
Abre el nuevo proyecto y haz clic en Generate Code. Observa el progreso mientras MarkupGen se conecta a los datos de tu diseño, analiza las capas, extrae las imágenes y escribe el HTML/CSS.
Una página HTML/CSS funcional, más una puntuación de calidad automática de 0 a 10.
- 7
Revisa el resultado
Usa la pestaña Code para un editor dividido de HTML/CSS/JS, o el panel Preview para comprobar las vistas de escritorio (1280px), tablet (768px) y móvil (375px).
- 8
Exporta tu código
Descarga HTML/CSS plano en cualquier plan. Los planes de pago pueden exportar un único componente de framework, o todos los frameworks a la vez en un paquete ZIP.
Funciones principales
Todas las funciones del producto, qué plan requieren y cómo funcionan.
Importación mediante el plugin de Figma
Exporta un único frame, componente o grupo seleccionado de Figma — incluidos íconos vectoriales como SVG real, imágenes de fondo, fuentes y la estructura de Auto Layout.
Instálalo desde Figma Community, inicia sesión una vez, selecciona un frame y haz clic en Export & Send.
Un frame por exportación — todavía no existe importación por lotes de múltiples frames o de una página completa.
Code Editor
Un editor de código profesional de vista dividida para tu HTML, CSS y JS generados, con resaltado de sintaxis y autoformato.
Visual Editor
Edición con clic directamente sobre la vista previa en vivo: inspeccionar elementos, edición de estilos por arrastrar y soltar, edición de texto en línea, gestión segura de enlaces y mostrar/ocultar con transiciones.
Requiere una suscripción de pago activa, verificada en el servidor.
Conversión de elementos semánticos con IA
Convierte cajas de diseño estáticas en controles de formulario interactivos reales — botones, campos de entrada, áreas de texto, selectores — usando IA.
Tres niveles de precisión:
Analiza la estructura HTML actual, los estilos y la imagen de vista previa.
Compara con el diseño original para obtener mayor precisión.
Análisis estructural completo para clasificar componentes complejos con precisión.
JavaScript y componentes interactivos con IA
Detecta patrones de interfaz — sliders, carruseles, acordeones, modales, pestañas, validación de formularios — y genera JS y CSS funcionales para ellos.
Generador de diseño responsivo con IA
Reestructura una conversión de escritorio en un diseño optimizado para otro tamaño de pantalla, con una vista previa de antes y después lado a lado.
Admite dos direcciones de destino — móvil y escritorio — con un punto de quiebre configurable (320–2000px).
Puntuación y comparación de calidad con IA
Puntúa tu código generado de 0 a 10 frente al diseño original en seis criterios ponderados: diseño, espaciado, tipografía, color, contenido y detalles.
Convención de colores de la puntuación
Excelente
Coincide casi a la perfección con el diseño original.
Bueno
Muy cercano en general, con algunas diferencias notables.
Necesita mejoras
Diferencias significativas respecto al diseño original.
Corrección inteligente de código con 1 clic
Aplica parches generados por IA de forma específica para las discrepancias detectadas por la puntuación de calidad, sin alterar el resto de tu código.
Validación y comprobación automática de sintaxis
Inspecciona y repara problemas de sintaxis en el HTML/CSS generado antes de guardarlo.
Procesamiento prioritario de alta velocidad
Límites de generación más altos por minuto y por día, con procesamiento más rápido en el plan Business.
Exportación de componentes
Descarga tu diseño generado como HTML/CSS plano, un único componente de framework, o un paquete completo con varios frameworks.
React (JSX/TSX), Vue 3 SFC, Svelte 5 o Angular Standalone, además de un paquete ZIP y una opción de prueba para clientes de correo.
Salida en framework CSS
Genera tu CSS en uno de seis estilos: Vanilla, Tailwind, Bootstrap, Bulma, Materialize o Pico CSS.
Vanilla, Tailwind y Bootstrap están disponibles en todos los planes. Bulma, Materialize y Pico CSS requieren un plan de pago.
Modos de salida
Standard Web Page (conversión directa a Flexbox/Grid), Responsive Layout (fluido, para varias pantallas) o Email Template (tablas con CSS en línea para Gmail, Outlook y Apple Mail).
El modo Email Template no puede reproducir rotaciones, modos de fusión no estándar ni efectos de sombra o desenfoque — en su lugar, se simplifican o se rasterizan como imagen.
Templates
Marca cualquiera de tus proyectos como un Template reutilizable, visible en una galería con búsqueda para tu espacio de trabajo.
Flujo de trabajo de Figma a código
Cómo preparar, convertir y revisar un diseño de principio a fin.
Figma limpio dentro, código limpio fuera
Esto no es solo un consejo motivacional — así es como funciona el motor. Las etiquetas HTML semánticas, las etiquetas accesibles y los niveles de encabezado se infieren directamente de los nombres de tus capas de Figma y de la estructura de Auto Layout. Un archivo con nombres descriptivos y Auto Layout consistente producirá una conversión medible mejor que un archivo lleno de formas sin agrupar con nombres predeterminados como "Rectangle 4".
Preparar tu archivo de Figma
Nombra las capas según lo que son — "Header", "Add to Cart Button", "Hero Image" — no según los nombres autogenerados de Figma. Usa Auto Layout siempre que puedas: los frames con Auto Layout se convierten directamente en CSS Flexbox, mientras que los frames sin él se exportan como cajas de tamaño fijo. Mantén cada frame muy por debajo de unas 2000 capas y 120 megapíxeles de área renderizada — divide los diseños grandes en frames más pequeños.
Importación
La exportación se realiza a través del plugin de Figma, un frame, componente o grupo por exportación. Actualmente no hay forma de importar varios frames o una página completa en una sola acción — convierte cada frame como su propio proyecto de MarkupGen.
Opciones de configuración
Elige tu modo de salida (Standard Web Page, Responsive Layout o Email Template), tu framework CSS (Vanilla, Tailwind y Bootstrap en todos los planes; Bulma, Materialize y Pico CSS en los planes de pago) y un formato de imagen para los activos exportados (Original, PNG, AVIF, WebP o JPG).
Revisar el HTML generado
El motor emite etiquetas semánticas reales — header, nav, main, footer, aside, article, section — inferidas a partir de los nombres de tus capas, con niveles de encabezado inferidos según el tamaño y el peso de la fuente. Los botones de solo ícono reciben etiquetas ARIA reales, las imágenes de contenido reciben texto alternativo descriptivo, y las imágenes decorativas o vectoriales reciben correctamente un alt vacío con aria-hidden.
Revisar el CSS
Los frames con Auto Layout se convierten en Flexbox con el mismo gap, padding y alineación. Los frames sin Auto Layout conservan las dimensiones y la posición en píxeles fijos de tu archivo de Figma.
Comportamiento responsivo
La conversión base refleja tu frame de Figma en un tamaño fijo — no es responsiva de forma automática. Para un diseño que se adapte a distintos dispositivos, elige el modo de salida Responsive o usa el generador de diseño responsivo con IA (direcciones móvil y escritorio).
Tipografía, colores, espaciado, imágenes e íconos
Los niveles de encabezado se infieren según el tamaño y el peso de la fuente. Los colores se leen directamente de tus rellenos de Figma. El espaciado sigue el gap, el padding y la alineación de Auto Layout, o las posiciones fijas cuando no se usa Auto Layout. Las imágenes se exportan en el formato elegido; los íconos se extraen como SVG real siempre que es posible, y los rellenos o máscaras complejas se rasterizan como composiciones PNG.
Componentes, diseño y restricciones
Los componentes y conjuntos de componentes de Figma se leen durante la exportación, pero MarkupGen actualmente no reconstruye una única definición de componente compartida y reutilizable por cada componente de Figma — cada conversión es una página o fragmento independiente. El diseño proviene de Auto Layout y de cajas delimitadoras absolutas; la configuración de restricciones de Figma (fijar izquierda/derecha, escalar) no se lee ni se reproduce actualmente.
HTML semántico, accesibilidad y SEO
El HTML semántico y la accesibilidad son funciones reales e implementadas, descritas arriba y en Funciones principales. El SEO no está incluido — MarkupGen no añade un título de página, meta descripción, etiquetas Open Graph ni datos estructurados al código que genera. Añádelo tú mismo una vez que integres el resultado en tu proyecto.
Qué afecta a la precisión y cómo obtener el mejor resultado
La calidad del nombrado de las capas de Figma es el factor individual más importante para lograr un resultado semántico y accesible, seguido del uso de Auto Layout, la complejidad del frame y si tu diseño usa efectos que el modo de salida elegido puede reproducir (el modo Email Template, en particular, no puede reproducir rotaciones, modos de fusión ni sombras).
Calidad del resultado
Qué controla MarkupGen, qué depende de tu entrada y qué se mide.
Lo que controla MarkupGen
- El motor de conversión y las heurísticas de etiquetas semánticas
- La generación de etiquetas accesibles y texto alternativo
- Las capas de IA de puntuación, corrección, diseño responsivo y JS (planes de pago)
Lo que controla tu entrada
- La calidad del nombrado de las capas de Figma
- El uso de Auto Layout
- La complejidad del frame y el uso de efectos
Precisión y fidelidad visual
Se mide automáticamente con la puntuación de calidad de IA (planes de pago): de 0 a 10 en diseño, espaciado, tipografía, color, contenido y detalles. No existe un porcentaje de precisión global independiente — la calidad depende del diseño.
Estructura y semántica del HTML
Etiquetas semánticas y niveles de encabezado reales, condicionados por lo descriptivos que sean los nombres de tus capas de Figma.
Calidad y mantenibilidad del CSS
Basado en Flexbox para los frames con Auto Layout, con posición fija para el resto. La mantenibilidad depende del framework CSS elegido, del estilo de nombrado de clases y del nombrado de capas.
Comportamiento responsivo, accesibilidad y preparación SEO
El diseño responsivo es opcional mediante el modo de salida Responsive. La accesibilidad incluye etiquetas ARIA y texto alternativo generados automáticamente. Los metadatos SEO no están incluidos — añade los tuyos después de exportar.
Idiomas disponibles
La interfaz está disponible en diez idiomas.
Inglés, Tiếng Việt, Francés, 中文 (simplificado), Japonés, हिन्दी, Italiano, Español, ไทย y Ruso. El inglés es el idioma predeterminado; la aplicación no cambia automáticamente según el idioma de tu navegador, de modo que un enlace compartido siempre se abre en el idioma previsto.
Cambia tu idioma desde Configuración → Idioma. MarkupGen convierte el texto que hay dentro de tus capas de Figma tal cual — la disponibilidad de las funciones depende únicamente de tu plan, no del idioma de la interfaz.
Planes y precios
Todas las cifras siguientes provienen directamente de la configuración de facturación.
| Función | Free | Starter | Pro | Business |
|---|---|---|---|---|
| Precio | $0 | $10 / mes | $20 / mes | $100 / mes |
| Generaciones de código | 5 / mes | 50 / día | 150 / día | 1,000 / día |
| Proyectos nuevos | 10 / mes | 100 / día | 300 / día | 2,000 / día |
| Límite de velocidad de generación | 2 solicitudes/min | 10 solicitudes/min | 20 solicitudes/min | 60 solicitudes/min, modelo de IA más rápido |
| Frameworks CSS | Vanilla, Tailwind, Bootstrap | Los 6 frameworks | Los 6 frameworks | Los 6 frameworks |
| Visual Editor | No incluido | Incluido | Incluido | Incluido |
| Puntuación y correcciones de calidad con IA | No incluido | Incluido | Incluido | Incluido |
| Exportación de componentes | Solo HTML / CSS | 1 framework a la vez | Todos los frameworks + Export Studio | Todos los frameworks + Export Studio |
| Soporte | Comunidad | Soporte por correo | Soporte prioritario por correo | Soporte dedicado uno a uno |
Todos los planes de pago se facturan solo mensualmente — no hay opción anual. Las tarifas no son reembolsables salvo que la ley lo exija. Paga con tarjeta a través de Stripe o Lemon Squeezy, o mediante código QR de transferencia bancaria instantánea vietnamita con SePay.
Plan Free
Ideal para probar el producto o para una conversión puntual ocasional: 5 conversiones asistidas por IA al mes, descarga de HTML/CSS plano, y CSS en Vanilla, Tailwind o Bootstrap. El Visual Editor, la puntuación de calidad con IA y la exportación a frameworks no están incluidos.
Planes de pago
Starter es adecuado para creadores individuales y proyectos freelance. Pro añade el paquete completo de Export Studio para profesionales y pequeñas agencias que gestionan varios proyectos de clientes. Business ofrece el mayor volumen y el procesamiento más rápido para equipos. Mejora tu plan cuando alcances tu límite de generación, necesites el Visual Editor o la puntuación de calidad, o necesites un componente de framework real en lugar de HTML sin procesar.
Créditos, uso y límites
MarkupGen no usa un sistema de créditos por puntos — usa un simple conteo de generaciones por plan.
- Cómo se cuenta — una acción de "Generate Code" equivale a una unidad de tu cuota de generación.
- Frecuencia de reinicio — Free se reinicia según el mes calendario; todos los planes de pago se reinician a diario.
- Acumulación — ninguna; la cuota no utilizada no pasa al siguiente periodo.
- Vencimiento — la cuota simplemente se reinicia cada periodo; no vence a mitad de periodo.
Cuota de creación de proyectos
Es independiente de la cuota de generación y siempre es exactamente el doble del límite de generación de tu plan para el mismo periodo (por ejemplo, Free: 10 proyectos/mes; Pro: 300 proyectos/día). Si estás exactamente en tu límite, todavía se puede guardar un proyecto más para que nunca pierdas tu trabajo — pero queda en estado Quota Locked y no puede generar código hasta que mejores tu plan o el periodo se reinicie. Eliminar un proyecto no libera cuota para ese periodo.
| Límites por exportación | |
|---|---|
| Número de capas del frame de Figma | ~2,000 capas por exportación |
| Área de exportación del frame de Figma | ~120 megapíxeles |
| Tamaño total de subida por exportación | 50 MB |
| Tiempo límite de subida del plugin | 3 minutos |
| Longitud de instrucción personalizada para la IA | 3,000 caracteres |
Cuenta y suscripción
Qué puedes cambiar tú mismo y cómo funciona la facturación.
Configuración de la cuenta
Desde Configuración puedes editar tu perfil, cambiar tu contraseña (esto funciona incluso si te registraste con Google — puedes establecer una contraseña por primera vez desde aquí), gestionar tu plan y facturación, y cambiar tu idioma.
Mejorar de plan
Mejora tu plan desde la página de Precios. Las mejoras se aplican de inmediato con facturación prorrateada.
Bajar de plan
Desde Configuración → Facturación, programa un cambio a un nivel de pago inferior que entra en vigor al final de tu periodo de facturación actual, sin reembolso parcial. Starter no tiene un nivel de pago inferior al que bajar.
Cancelar
Para cancelar tu suscripción, contacta a support@markupgen.com. Si estás en Pro o Business, también puedes programar mientras tanto una bajada a un nivel de pago inferior desde Configuración → Facturación.
Facturación y pagos
Paga con tarjeta a través de Stripe o Lemon Squeezy, o mediante código QR de transferencia bancaria instantánea vietnamita con SePay (una ventana de 15 minutos).
Reembolsos
Todas las tarifas no son reembolsables salvo que la ley lo exija. No existe una garantía de devolución de dinero independiente.
Eliminación de la cuenta
Hoy no existe un botón de autoservicio para "Eliminar mi cuenta". Puedes solicitar la eliminación de tu cuenta y sus datos en cualquier momento escribiendo a support@markupgen.com.
Seguridad y privacidad
Resumen de la Política de privacidad, los Términos de uso y el diseño de autenticación de MarkupGen.
Qué datos se recopilan
Tu nombre, correo electrónico y credenciales de cuenta, además únicamente de los frames de Figma específicos que exportas de forma explícita — MarkupGen no tiene acceso permanente a toda tu cuenta de Figma. Se recopilan datos técnicos básicos (IP, navegador, dispositivo) mediante cookies.
Tus diseños y el código generado
Conservas los derechos sobre los diseños y el contenido de Figma que importas. MarkupGen no usa tus diseños privados para entrenar modelos de IA para otros clientes.
Retención y eliminación de datos
Los datos se conservan mientras tu cuenta esté activa, o según sea necesario por razones legales, contables o de seguridad. Puedes solicitar su eliminación en cualquier momento a través de support@markupgen.com.
Seguridad de la cuenta
Las contraseñas se almacenan con hash; tanto el inicio de sesión como el registro requieren una comprobación CAPTCHA; cinco intentos fallidos de inicio de sesión bloquean una cuenta durante 15 minutos; se requiere verificación de correo electrónico para las cuentas basadas en contraseña. La autenticación de dos factores y la gestión de sesiones activas no están disponibles actualmente.
Servicios de terceros
Stripe y Lemon Squeezy para pagos con tarjeta, SePay para transferencias bancarias vietnamitas, y Google Analytics para análisis de uso.
Solución de problemas
Problema, causa probable y solución — organizados por categoría.
Problemas de conversión
Generate Code aparece deshabilitado o se rechaza.
→ Has alcanzado el límite de generación o de creación de proyectos de tu plan, o el proyecto está en estado Quota Locked por un exceso anterior.
Espera a tu próximo reinicio, o mejora tu plan — mejorar el plan desbloquea los proyectos bloqueados de inmediato.
La exportación desde el plugin de Figma falla o se agota el tiempo de espera.
→ El frame supera aproximadamente las 2,000 capas o los 120 megapíxeles, o la subida superó el límite de 3 minutos.
Divide el frame en partes más pequeñas y exporta cada una por separado.
El resultado se ve genérico, con divs simples y texto alternativo poco útil.
→ Tus capas de Figma todavía usan nombres predeterminados como "Rectangle 4" o "Group".
Renombra las capas de forma descriptiva y vuelve a exportar.
Problemas de resultado
Faltan rotaciones, sombras o efectos de fusión en una exportación de correo.
→ Los clientes de correo no pueden renderizar estos efectos de forma fiable, así que el modo Email Template los simplifica o los rasteriza.
Usa el modo Standard o Responsive si necesitas esos efectos como CSS real.
El diseño no se adapta al tamaño de pantalla.
→ La conversión base refleja un único tamaño fijo.
Elige en su lugar el modo de salida Responsive.
Problemas de autenticación
No se puede iniciar sesión.
→ Cinco intentos fallidos bloquean la cuenta durante 15 minutos, o tu correo aún no está verificado.
Espera 15 minutos, o revisa tu bandeja de entrada (y la carpeta de spam) en busca del correo de verificación.
Olvidaste tu contraseña.
Usa "¿Olvidaste tu contraseña?" en la página de inicio de sesión; el enlace de restablecimiento es válido durante una hora.
Problemas de pago
Un pago por transferencia bancaria con SePay se queda "pendiente".
→ El código QR caduca a los 15 minutos.
Revisa la página de estado del pedido, o vuelve a iniciar el pago si ya caducó.
Un pago con tarjeta falla.
→ La tarjeta fue rechazada o los datos se introdujeron incorrectamente.
Verifica los datos de tu tarjeta con tu banco, o prueba con el otro proveedor de pago. Contacta con soporte si se te cobró pero tu plan no se actualizó.
Problemas de suscripción
No hay botón "Cancel Subscription".
→ Todavía no es un control de autoservicio.
Escribe a support@markupgen.com para cancelar.
No hay opción para bajar de plan en Starter.
→ Starter es el nivel de pago más bajo.
Esto es lo esperado — no hay nada inferior a lo que bajar dentro de la aplicación.
Problemas de descarga y exportación
La exportación a framework (React/Vue/Svelte/Angular) está bloqueada.
→ La exportación a un solo framework requiere cualquier plan de pago.
Mejora a Starter o superior.
Export Studio está bloqueado, incluso en Starter.
→ El paquete con todos los frameworks requiere específicamente Pro o Business.
Mejora a Pro.
Buenas prácticas
Hábitos concretos que mejoran de forma medible la calidad de la conversión.
- Usa Auto Layout siempre que puedas — es el factor individual más importante que separa un CSS fluido de cajas de posición fija.
- Nombra las capas en lenguaje sencillo — "Header", "Add to Cart Button", "Hero Image" — el motor lee estos nombres para elegir etiquetas HTML, etiquetas ARIA y texto alternativo.
- Agrupa los elementos relacionados dentro de un solo frame con Auto Layout en lugar de dejarlos como formas sueltas con posición absoluta.
- Usa tamaños de tipografía consistentes y con propósito para encabezados frente a texto de cuerpo — los niveles de encabezado se infieren a partir de ellos.
- Mantén las imágenes de contenido y los recursos decorativos visualmente diferenciados — MarkupGen ya los trata de forma distinta en el resultado.
- Elige tu modo de salida desde el principio. No esperes que una conversión en modo Standard se vuelva responsiva después — empieza con el modo Responsive si el destino necesita funcionar en móvil.
- Evita depender de las restricciones de Figma para el comportamiento de redimensionado — no se reproducen; reconstruye ese comportamiento con Auto Layout.
- Para resultados de correo, evita rotaciones, modos de fusión y efectos de sombra o desenfoque — no sobrevivirán al renderizado en los clientes de correo.
- Revisa siempre las vistas de escritorio, tablet y móvil en Preview antes de exportar, y ejecuta la puntuación de calidad con IA (planes de pago) para obtener una lectura específica y ponderada de qué corregir.
- Planea añadir tus propios metadatos SEO después de exportar — MarkupGen no genera etiquetas de título, meta descripciones ni datos estructurados.
Preguntas frecuentes
Basadas en el comportamiento verificado del producto.
Limitaciones
En qué es bueno MarkupGen y qué todavía no hace.
En qué destaca MarkupGen
Convierte un frame de Figma bien estructurado y basado en Auto Layout en HTML/CSS limpio y con etiquetas semánticas de forma rápida y predecible, con capas opcionales de IA para interactividad, capacidad de respuesta, puntuación de calidad y correcciones con un clic.
Lo que no hace
Reconstruir automáticamente datos de prototipo o interacción de Figma; respetar el redimensionado basado en restricciones de Figma (fijar, escalar); importar varios frames o una página completa en una sola acción; añadir metadatos SEO al código generado; o exportar una definición de componente compartida y reutilizable por cada componente de Figma.
Dónde el resultado puede necesitar edición manual
Capas de Figma genéricas o sin nombre que producen código genérico; efectos visuales complejos en el modo Email Template; interactividad más allá de los patrones que reconoce la función de sugerencias de JS con IA.
Límites técnicos
Consulta Créditos, uso y límites para las cifras exactas — aproximadamente 2,000 capas, 120 megapíxeles y 50 MB por exportación, un tiempo límite de subida de 3 minutos, y un tope de 3,000 caracteres en las instrucciones personalizadas para la IA.
Glosario
El vocabulario usado a lo largo de esta guía.
- Frame
- Un contenedor de nivel superior en Figma — aproximadamente una pantalla o sección. MarkupGen exporta un frame, componente o grupo a la vez.
- Auto Layout
- La función integrada de Figma para apilado responsivo; MarkupGen la mapea directamente a CSS Flexbox.
- Constraints
- Las reglas de redimensionado de fijación y escala de Figma anteriores a la existencia de Auto Layout; actualmente MarkupGen no las lee.
- Conversión / Generación
- Una ejecución de "Generate Code" sobre un proyecto — la unidad en la que se mide la cuota de tu plan.
- Proyecto
- Una única exportación de Figma registrada en tu panel, propiedad tuya dentro de un Workspace.
- Workspace
- Un espacio de equipo compartido al que pertenecen los proyectos; la pertenencia conlleva un rol que controla los permisos.
- Template
- Cualquiera de tus propios proyectos marcado para su reutilización en la galería de Templates de tu espacio de trabajo.
- Export
- Descargar código generado como HTML/CSS plano, un único componente de framework, o un paquete completo con varios frameworks.
- Subscription
- Tu plan de pago mensual recurrente — Starter, Pro o Business.
- Quota Locked
- Un proyecto creado después de haber alcanzado ya el límite de creación de tu plan — se guarda, pero no puede generar código hasta que mejores tu plan o el periodo se reinicie.
Guía rápida de inicio
De Figma a código listo para producción.
- 1Instala el plugin de MarkupGen desde Figma Community.
- 2Selecciona en Figma un frame limpio, bien nombrado y con Auto Layout.
- 3Ejecuta Export & Send desde el plugin (inicia sesión una vez a través del navegador).
- 4Abre el nuevo proyecto en tu panel.
- 5Elige tu modo de salida y framework CSS, luego haz clic en Generate Code.
- 6Revisa el resultado en Preview y comprueba la puntuación de calidad con IA (planes de pago).
- 7Corrige manualmente en el Code Editor, o mejora tu plan para acceder al Visual Editor y a la corrección inteligente con 1 clic.
- 8Exporta como HTML/CSS, o como componente de framework en un plan de pago, y luego intégralo en tu proyecto.
¿Listo para acelerar tu flujo de trabajo de diseño a código?
Empieza gratis hoy mismo, o mejora tu plan para acceder al Visual Editor, la puntuación de calidad con IA y la exportación completa a frameworks.