Recursos
Recursos de Figma a código
Guías prácticas y un benchmark abierto para convertir diseños de Figma en código real — para cualquiera que esté evaluando un flujo de Figma a código, no solo para usuarios de MarkupGen.
Figma → HTML
Convertir un frame de Figma en HTML y CSS limpio y semántico.
Figma → CSS
Mapear valores de Figma a hojas de estilo CSS simples, sin depender de un framework.
Conversión responsive de Figma
Gestionar breakpoints, layouts fluidos y frames para varios dispositivos.
HTML semántico
Landmarks, orden de encabezados y elementos interactivos reales en lugar de div soup.
Accesibilidad
Hacer que el código generado desde Figma se pueda usar con teclado, lector de pantalla y contraste de color real.
Design tokens
Llevar los tokens de color, tipografía y espaciado de Figma al CSS de producción.
Evaluación de Figma a código
Cómo juzgar el HTML generado por IA antes de publicarlo.
Benchmark de Figma a código
Una metodología abierta y reproducible para medir la calidad de la conversión de Figma a código entre distintas herramientas.
Los resultados aún no se han publicado — el dataset del benchmark se está preparando. La página anterior documenta la metodología completa.
Frameworks Figma → Code
Todos los formatos de salida que admite MarkupGen además del CSS puro — React, Vue y el resto de frameworks CSS.
MarkupGen frente a otras herramientas
En qué se diferencia MarkupGen de otras herramientas de Figma a código y de handoff de diseño.
Este centro solo enlaza a las páginas del sitio que realmente son útiles — no es un índice completo del sitio. Consulta el blog para ver la lista completa de artículos.