Contenido del curso
Diseño Responsive y Técnicas Avanzadas
- 4

Cómo crear una grid de 12 columnas en Figma
04:32 min - 5

Constraints en Figma para diseño responsive
03:40 min - 6

Menú responsive con Auto Layout y constraints
09:18 min - 7

Wrap y min/max width en Figma Auto Layout
02:14 min - 8

Cómo usar el design system en Figma
05:47 min - 9

Ensamblando una interfaz mobile en Figma
05:25 min - 10

Breakpoints y Responsively para probar diseño responsive
07:58 min
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
Muse y Builder contra la página en blanco
Resumen
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.