Figma a HTML: las opciones y cómo saltarte la conversión

Por qué pasar de Figma a HTML nunca es cosa de un clic

Un frame de Figma es un dibujo vectorial. El texto, los espaciados y la maquetación los calcula Figma, no un navegador. Para obtener una página web, algo tiene que traducir ese dibujo a elementos HTML y reglas CSS, y cada traducción toma decisiones que tú no tomaste.

El auto layout se parece mucho a flexbox, pero no es una equivalencia exacta. Las restricciones se convierten en reglas de posicionamiento. Las fuentes se renderizan de otra manera. Por eso el resultado suele necesitar una ronda de correcciones antes de publicarse.

Opción 1: un plugin de Figma

En la Figma Community hay varios plugins de Figma a HTML, y herramientas como Anima convierten frames en HTML, React o Tailwind. Framer ofrece un plugin para pegar frames de Figma en Framer y publicarlos allí.

• Ideal para: un primer borrador rápido de una página estática.
• Ojo con: los nombres de clase generados, el posicionamiento absoluto y un marcado que tendrás que reescribir para encajarlo en tu código.

Opción 2: una herramienta de IA de diseño a código

Figma Make genera HTML, CSS y JavaScript a partir de frames, y cada vez más herramientas de IA leen un diseño y escriben componentes para tu stack.

• Ideal para: tener rápido componentes en tu framework.
• Ojo con: el diseño y el código se separan en cuanto uno de los dos cambia.

Opción 3: rehacerlo a mano

Sigue siendo la respuesta más habitual. Un desarrollador lee el diseño, lo mide y escribe el HTML y el CSS. El resultado es limpio, pero es un segundo proyecto, y cada cambio de diseño obliga a rehacer una parte.

Opción 4: diseñar en HTML desde el principio

El problema de la conversión desaparece cuando el lienzo ya es una página web. En Kalka, cada frame es un elemento HTML y cada propiedad que ajustas en el panel de diseño es una declaración CSS. No hay nada que exportar porque no hay nada que traducir.

Lo que obtienes es una carpeta: pages/home.html, styles.css y tus design tokens en design-system/tokens.json. Un desarrollador puede abrirla en cualquier editor, revisarla en Git e integrarla en el sitio real.

Qué opción te conviene

• Una landing page, una sola vez: un plugin basta.
• Un producto con componentes en React o Vue: una herramienta de IA de diseño a código, más una revisión.
• Sitios web que diseñas y entregas una y otra vez: diseña en HTML y sáltate por completo el paso de conversión.

Kalka está en desarrollo y es de código abierto. Si la cuarta opción se parece a tu forma de trabajar, la lista de espera es la manera de recibir las primeras versiones.