En el mundo del desarrollo web, la calidad del código HTML es esencial para garantizar que un sitio sea accesible, eficiente y bien posicionado en los buscadores. Sin embargo, recientemente ha surgido una preocupación considerable en la comunidad tecnológica sobre Figma Sites, una plataforma emergente que, a pesar de su facilidad para crear páginas web, produce un código HTML absolutamente carente de estructura semántica. En términos simples, casi todos los elementos generados por esta herramienta son meros divs, divs y más divs, sin utilizar etiquetas nativas que reflejen la jerarquía y el significado del contenido, como encabezados, párrafos, listas o apartados específicos. Esta práctica, aunque pudiera parecer inofensiva para quienes no profundizan en el código, tiene consecuencias severas tanto para la accesibilidad como para el rendimiento SEO y la experiencia del usuario. Para comprender la gravedad de este asunto, primero es importante entender qué es el HTML semántico.
A diferencia del HTML genérico, donde se usan etiquetas como <div> o <span> sin atribuirles un significado específico, el HTML semántico emplea etiquetas que describen el rol de cada sección dentro de la página, tales como <header>, <nav>, <article>, <section>, <footer>, <h1> a <h6>, entre otras. Esta estructuración no solo facilita el trabajo de los motores de búsqueda para indexar el contenido de manera más precisa, sino que también es fundamental para que los usuarios que utilizan tecnologías asistivas, como lectores de pantalla, puedan navegar con fluidez y comprender el contexto y la jerarquía de la información. El problema con Figma Sites radica en que al exportar o generar el código de las páginas web, se crea una maraña de elementos div que carecen de significado individual. Por ejemplo, lo que debería ser un título principal, un subencabezado o un párrafo, todos aparecen como simples contenedores genéricos sin propósitos definidos. La falta de etiquetas adecuadas impide que los lectores de pantalla detecten correctamente las secciones importantes, lo que para usuarios con discapacidades visuales supone una barrera significativa para interactuar con el sitio.
Pero la accesibilidad no es el único perjudicado. Desde la perspectiva del SEO, los motores de búsqueda dependen de la correcta semántica para comprender la estructura y relevancia del contenido dentro de una página. Cuando el código está lleno de divs sin sentido, los algoritmos pueden tener dificultades para determinar cuáles son los elementos más importantes, lo que puede afectar la visibilidad en los resultados de búsqueda. Además, la ausencia de enlaces con atributos href adecuados y roles semánticos precisos empeora esta situación, generando problemas para la indexación y la experiencia de navegación. Varios expertos y profesionales en desarrollo web han expresado su descontento ante esta limitación de Figma Sites.
En plataformas como Mastodon, se han registrado múltiples intercambios de opiniones en donde se destaca el impacto negativo en la accesibilidad y la lectura automatizada del sitio. Algunos mencionan que ni siquiera se utiliza la etiqueta <nav> de forma consistente, y que los enlaces se presentan sin el atributo href, haciendo que parezcan visualmente activos pero carezcan de funcionalidad real para tecnologías asistivas. Otros critican la utilización de clases híbridas, generadas de forma automática y sin significados claros, que dificultan el mantenimiento y evolución del código. Este enfoque de Figma Sites contrasta con las mejores prácticas recomendadas por organizaciones de accesibilidad web y portales especializados, que enfatizan la importancia de diseñar con una base semántica sólida para alcanzar estándares internacionales como WCAG (Web Content Accessibility Guidelines). Más allá de cumplir una normativa, adoptar HTML semántico contribuye a construir una web inclusiva, donde todos los usuarios, sin importar sus capacidades, pueden acceder y comprender la información ofrecida.
Por otro lado, el diseño y creación de sitios web con herramientas basadas en divs masivos puede aparentar simplicidad para diseñadores no técnicos, ya que elimina la necesidad de preocuparse por etiquetas específicas o atributos semánticos. Sin embargo, esta comodidad puede ser engañosa, ya que genera una deuda técnica que en el futuro se traduce en dificultades para realizar optimizaciones, correcciones o mejorar la experiencia de usuario. El hecho de que el código generado no sea legible ni estructurado dificulta también la colaboración entre desarrolladores y diseñadores, así como la integración con otros sistemas o frameworks. Algunos desarrolladores han señalado además que el código producido por Figma Sites no es solo un problema de accesibilidad, sino una amenaza para la sostenibilidad del contenido web. La ausencia de una estructura clara puede provocar que los motores de búsqueda no indexen correctamente la información, que los usuarios abandonen el sitio frustrados y que las empresas pierdan oportunidades valiosas por no aprovechar el potencial pleno de sus páginas.
Frente a esta realidad, ¿qué opciones tienen los profesionales que desean utilizar Figma para sus proyectos web? Actualmente, la recomendación es ser conscientes de las limitaciones inherentes a la herramienta y evaluar si su uso es adecuado para proyectos que demanden altos estándares de accesibilidad y SEO. En muchos casos, puede ser más beneficioso emplear Figma como prototipo o herramienta de diseño visual y luego trasladar manualmente el diseño a un código limpio, estructurado y semántico desarrollado por profesionales. Asimismo, la comunidad de desarrolladores y diseñadores podría alzar su voz para incentivar a Figma a mejorar su exportador de código, incorporando una generación automática de etiquetas semánticas relevantes y prácticas que cumplan con los estándares internacionales de accesibilidad y SEO. Esta mejora no solo beneficiaría a los usuarios con discapacidades, sino también a los creadores de sitios que buscan eficiencia y calidad en sus productos finales. En el panorama actual, donde la experiencia digital debe ser inclusiva y accesible para todos, la apuesta por HTML semántico no es opcional sino indispensable.
Figma Sites, con su dependencia exclusiva de divs, representa un paso atrás en términos de accesibilidad y buenas prácticas web. Reconocer esta problemática es el primer paso para promover herramientas que respeten la diversidad de usuarios y que valoren la sustentabilidad y efectividad del contenido en la web. Finalmente, la discusión sobre Figma Sites sirve para recordar a la comunidad que el diseño y desarrollo web exitoso no solo se trata de estética o rapidez, sino también de compromiso con la calidad, la inclusión y la funcionalidad. Solo así podremos construir un entorno digital más justo, intuitivo y eficiente para todos.
