De Figma a Bulma CSS: guía práctica de conversión

Bulma ocupa un lugar peculiar frente a Bootstrap o Tailwind: es un framework de componentes completo, pero también funciona solo con clases — sin JavaScript incluido, sin paso de build. Eso lo convierte en un buen destino para una exportación desde Figma, pero convertir un diseño a mano al vocabulario específico de clases de Bulma sigue exigiendo conocer bien su sistema de grid, espaciado y modificadores para elegir la clase correcta cada vez.

Por qué la conversión manual de Figma a Bulma es lenta

El grid de Bulma basado en flexbox (columns, column, modificadores de tamaño is-*) se lee de forma simple una vez escrito, pero llegar ahí a mano desde un frame de Figma implica el mismo trabajo repetitivo de traducción que con cualquier otro framework:

• Mapear el Auto Layout al sistema de columnas de Bulma. Una fila de elementos con espaciado uniforme en Figma tiene que convertirse en la combinación correcta de columns, column is-half/is-one-third y manejo del gap — decidido a ojo, frame a frame.
• Elegir las clases modificadoras correctas. Bulma expresa la mayor parte del estilo mediante modificadores (is-primary, is-rounded, is-large), así que hay que traducir un color de relleno o un radio de esquina en Figma al "modificador de Bulma más parecido", y esa correspondencia no siempre es exacta.
• Reconstruir tipografía y espaciado usando la propia escala de Bulma (title, subtitle, helpers mb-*/mt-*) en lugar de copiar valores en píxeles directamente.
• Repetir todo esto en cada breakpoint, ya que los helpers responsive de Bulma (is-hidden-mobile, cambios de ancho de columna) hay que añadirlos a mano para cada tamaño de pantalla del diseño.

Nada de esto es conceptualmente difícil, pero es justo el tipo de trabajo repetitivo y con mucho criterio implicado que genera pequeñas inconsistencias en un diseño real de varias páginas.

Cómo genera MarkupGen la salida en Bulma a partir de un diseño real

MarkupGen elimina el paso de traducción en lugar de solo acelerarlo. El flujo de trabajo es el mismo sea cual sea el formato de salida:

1. Exporta el frame desde Figma con el plugin de MarkupGen, que captura estructura, estilos e imágenes juntos.
2. La IA construye el markup a partir de la estructura real del diseño, no de una aproximación.
3. Perfecciona contenido, fuentes y layout de forma visual en el editor integrado antes de dar nada por definitivo.
4. Exporta el paquete de código final en Bulma 1.0.2.

En el momento de exportar, el Auto Layout y los valores de espaciado de Figma se mapean a las clases de grid y helpers reales de Bulma en lugar de adivinarse — una fila de elementos con Auto Layout se convierte en una estructura columns/column ajustada a su tamaño, y el padding, el gap y la alineación se resuelven en los helpers de espaciado de Bulma en lugar de estilos inline. La salida se mantiene sin ninguna dependencia de JavaScript, en línea con la filosofía de Bulma, así que no hay que conectar nada extra para que el CSS se renderice correctamente.

Dónde encaja Bulma entre los formatos de salida de MarkupGen

Bulma es uno de los seis destinos CSS que soporta MarkupGen, junto con CSS plano, Tailwind, Bootstrap, Materialize y Pico — se elige por proyecto desde el panel de configuración en lugar de fijarse de antemano. Es la opción a elegir cuando quieres una estética moderna y limpia por defecto sin adoptar una librería de componentes completa como exigirían Bootstrap o Materialize. Para una comparación lado a lado de los seis, consulta 6 frameworks CSS para Figma-to-Code.

Revisar el markup generado antes de publicar

La conversión automática acierta con la estructura de clases en la mayor parte del diseño, pero merece la pena revisarla antes de hacer merge:

• Comprueba los anchos de columna en cada breakpoint — el grid de Bulma es flexible, así que confirma que los tamaños is-* generados siguen coincidiendo con la intención en móvil, no solo en escritorio.
• Busca patrones de modificadores repetidos, sobre todo donde el mismo componente (una card, un estilo de botón) aparece más de una vez — debería resolverse en las mismas clases modificadoras en todas partes.
• Confirma el HTML semántico bajo las clases de Bulma — el output favorece etiquetas con significado en lugar de <div> anidados por defecto.
• Usa el editor integrado para ajustes de contenido o layout en lugar de editar a mano las clases exportadas, y vuelve a exportar.

Cada exportación recibe además una puntuación de calidad de IA automática, así tienes una señal rápida de si está lista para publicarse antes de seguir adelante.

Pruébalo con tu propio diseño

Si todavía estás eligiendo a mano las clases modificadoras de Bulma para que coincidan con un archivo de Figma, vale la pena ver cuánto de ese trabajo desaparece cuando las clases salen de los valores reales del diseño. Prueba MarkupGen gratis en uno de tus frames, o consulta la página del conversor de Figma a Bulma para ver qué obtienes de serie.