Muse y Builder contra la página en blanco

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:47

Muse y Builder contra la página en blanco

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 17 de 29

Clase 17 / 29

Recursos

Cuando abres Figma y te enfrentas a la hoja en blanco, los plugins de IA como Muse y Builder se convierten en aliados para acelerar el proceso. Te muestro cómo usarlos para generar copy, importar webs reales y crear interfaces desde prompts, todo sin salir del navegador.

¿Cómo generar títulos con Muse en Figma?

Muse es un plugin que crea contenido fake listo para usar en tus mockups. Lo abrimos desde el navegador porque Figma a veces se vuelve inestable con ciertos plugins, y la versión web responde mejor [00:20].

Dentro de Muse encontrarás varias opciones, pero la que más usarás al inicio es la de generar un título. El plugin te pide rellenar varios inputs que funcionan como prompts para afinar el resultado:

Descripción del producto, por ejemplo una landing page del sector banca.
Nombre del producto o empresa.
Buyer persona objetivo, con demografía y edad.
Tono de voz deseado: alegre, creativo, formal, etc.

Una vez completados los campos, Muse devuelve varias propuestas. Copias la que más te guste, creas un cuadro de texto en Figma y la pegas. Así de simple alimentas tus diseños con copy coherente sin escribir desde cero.

¿Qué es Muse en Figma? Es un plugin que genera contenido fake como títulos y descripciones a partir de prompts donde defines producto, audiencia y tono de voz.

¿Cómo exportar diseños de Figma a código con Builder?

Builder es la plataforma desde la que parto siempre que diseño. Funciona como plugin dentro de Figma y abre tres caminos potentes para tu flujo de trabajo [01:32].

Exportar a HTML o React con un clic

Cualquier diseño que tengas en Figma lo puedes pasar a código HTML o React con un solo botón. Esto significa que tu interfaz puede estar online en producción a través de la plataforma de Builder casi de inmediato. Necesitas tener cuenta creada para usar esta función.

Importar webs reales como punto de partida

La segunda función me parece la más útil para evitar la página en blanco: importar webs que ya están online. Eliges una URL, por ejemplo apple.com, seleccionas el tamaño del dispositivo entre desktop, tablet o mobile, y le das a importar a Figma.

El tiempo de importación depende de la complejidad de la página, aunque suele ser rápido. El resultado no es perfecto, hay que decirlo, pero todo el contenido es editable: textos, espaciados, jerarquías. Puedes estudiar cómo está construida la página de Apple y aplicar esos espaciados a tus propios diseños [02:45].

¿Builder importa cualquier web a Figma? Sí, copias la URL y eliges el dispositivo. La interfaz llega editable a Figma, aunque la fidelidad depende de la complejidad de la página original.

¿Cómo generar diseños con prompts usando OpenAI y Builder?

La tercera opción de Builder es generar diseños a partir de prompts, y aquí entra una pieza extra: necesitas cuenta en OpenAI, la empresa detrás de ChatGPT. El plugin te pedirá una key para autenticarte [03:38].

El sistema funciona con créditos que cuestan céntimos, así que es bastante asequible para experimentar. Escribes el prompt describiendo lo que quieres, le das a generar y Builder te devuelve varias propuestas de interfaz.

Igual que pasa al importar webs, los resultados no son diseños impecables ni listos para producción. Pero cumplen un rol clave: te dan un punto de partida editable para iterar. Puedes cambiar textos, mover bloques y empezar a idear soluciones reales en vez de mirar un artboard vacío.

¿Necesito pagar OpenAI para usar Builder con prompts? Sí, el plugin se conecta vía API key y cobra créditos en céntimos por cada generación. Si ya usas ChatGPT, puedes aprovechar la misma cuenta.

¿Por qué combinar Muse y Builder al diseñar?

La lógica de usar estos dos plugins juntos es sencilla. Builder te resuelve el layout y la estructura visual importando webs o generando con prompts, mientras que Muse llena esos espacios con copy realista ajustado a tu producto, tu audiencia y tu tono.

La tecnología todavía evoluciona y los resultados no son finales, pero la combinación te ahorra el bloqueo inicial. Pasas de la página en blanco a una base editable en minutos, y desde ahí puedes enfocarte en lo que realmente importa: refinar la experiencia y la jerarquía visual.

¿Ya probaste alguno de estos plugins en tu flujo? Cuéntame en los comentarios cuál te funcionó mejor para arrancar tus diseños.

Resumen

¿Cómo generar títulos con Muse en Figma?

Descripción del producto, por ejemplo una landing page del sector banca.
Nombre del producto o empresa.
Buyer persona objetivo, con demografía y edad.
Tono de voz deseado: alegre, creativo, formal, etc.

¿Qué es Muse en Figma? Es un plugin que genera contenido fake como títulos y descripciones a partir de prompts donde defines producto, audiencia y tono de voz.

¿Cómo exportar diseños de Figma a código con Builder?

Builder es la plataforma desde la que parto siempre que diseño. Funciona como plugin dentro de Figma y abre tres caminos potentes para tu flujo de trabajo [01:32].

Exportar a HTML o React con un clic

Importar webs reales como punto de partida

¿Builder importa cualquier web a Figma? Sí, copias la URL y eliges el dispositivo. La interfaz llega editable a Figma, aunque la fidelidad depende de la complejidad de la página original.

¿Cómo generar diseños con prompts usando OpenAI y Builder?

¿Necesito pagar OpenAI para usar Builder con prompts? Sí, el plugin se conecta vía API key y cobra créditos en céntimos por cada generación. Si ya usas ChatGPT, puedes aprovechar la misma cuenta.

¿Por qué combinar Muse y Builder al diseñar?

¿Ya probaste alguno de estos plugins en tu flujo? Cuéntame en los comentarios cuál te funcionó mejor para arrancar tus diseños.

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Muse y Builder contra la página en blanco