Genera iconos, copies e imágenes con Magician

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:002:33

Genera iconos, copies e imágenes con Magician

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

Clase 16 de 29

Clase 16 / 29

Recursos

Si diseñas en Figma y quieres acelerar tu flujo de trabajo, los plugins de inteligencia artificial en Figma abren un camino directo para generar iconos, textos e imágenes sin salir del lienzo. Esta guía te muestra cómo usar Magician, el plugin estrella de Diagram, y por qué importa para diseñadores de producto e interfaces.

En la Config 2023, Figma anunció la adquisición de Diagram, la empresa detrás de herramientas como Magician, Genius y Automator. La promesa es que pronto tendremos esas funciones de IA de forma nativa dentro de Figma, pero mientras tanto, los plugins ya disponibles te permiten experimentar con ese poder hoy mismo.

¿Qué es Magician y para qué sirve en Figma?

Magician es un plugin de Diagram que usa IA generativa para producir tres tipos de activos directamente en tu canvas: iconografía, copies e imágenes. La idea es que dejes de saltar entre apps y resuelvas dentro de Figma lo que antes requería abrir Midjourney, un banco de iconos o un documento aparte.

¿Qué hace exactamente Magician en Figma? Genera iconos vectoriales, textos sugeridos para tu interfaz e imágenes a partir de un prompt, todo desde el panel del plugin sin salir de Figma.

¿Cómo generar iconografía con IA en Figma?

La primera función de Magician es la generación de iconos vectoriales a partir de un prompt corto. Escribes la palabra que describe lo que necesitas, por ejemplo home, y la IA te devuelve cuatro variantes para que elijas la que mejor encaje con tu interfaz.

Lo interesante viene después de elegir el icono. Al insertarlo en el canvas, aparece como un vector editable en la sidebar izquierda de Figma. Eso significa que puedes:

Cambiar el color de relleno y trazo.
Ajustar el tamaño sin perder calidad.
Modificar puntos y curvas como en cualquier vector nativo.

Esa edición libre es la diferencia entre un icono PNG cualquiera y un activo que se adapta a tu sistema de diseño.

¿Cómo escribir copies de UI con Magician?

La segunda función te ayuda a resolver textos de interfaz cuando te quedas en blanco. Le das un prompt con contexto, por ejemplo a title of a bank app, y Magician te devuelve tres sugerencias de texto listas para probar.

¿Sirven los copies generados por IA tal cual? No siempre. Funcionan como punto de partida; tú decides cuál usar, cuál ajustar al tono de tu producto y cuál descartar.

Esta función acelera ese momento incómodo donde tienes el layout listo pero no sabes qué título poner. En vez de bloquearte, generas opciones y editas.

¿Cómo generar imágenes dentro de Figma sin Midjourney?

La tercera función es probablemente la más vistosa: generación de imágenes integrada en Figma. Escribes un prompt, por ejemplo dog, y la IA te devuelve cuatro imágenes con buena resolución para insertar en tu diseño.

La ventaja frente a flujos tradicionales con Midjourney u otros generadores externos es directa:

No sales de Figma.
No descargas archivos sueltos.
La imagen aparece lista para colocar en tu frame.

Eso reduce fricción cuando necesitas placeholders realistas para mockups, presentaciones a cliente o exploraciones visuales rápidas.

¿Qué tipo de prompts funcionan mejor?

Los prompts cortos y descriptivos dan resultados más limpios. Para iconos basta con un sustantivo como home. Para copies conviene añadir contexto del producto, como a title of a bank app. Para imágenes, entre más específico el prompt, más control tienes sobre el resultado.

¿Qué herramientas de Diagram llegarán nativas a Figma?

Además de Magician, Diagram trae otras dos piezas que se integrarán de forma nativa:

Genius: asistente de diseño que sugiere componentes basados en tu sistema.
Automator: automatización de tareas repetitivas dentro de Figma.

Entre la iconografía vectorial editable, los copies sugeridos y las imágenes generativas, Magician cubre tres cuellos de botella reales del diseño de producto. ¿Cuál de estas funciones te ahorraría más tiempo en tu flujo actual? Cuéntame en los comentarios qué prompts te han dado mejores resultados.

Comentarios (10)10 comentarios

Jonathan Steep

Hace 3 años

brutal, figma es algo impresionante

Roberto Daniel Baltazar Macias

Hace un año

Actualmente ya no aparece Magician como un plugin disponible :(

CCEO Software Development

tampoco a mi me aparece disponible /:

JONATHAN RUBEN HERNANDEZ GONZALEZ

Hace 8 meses

Magician ya no está disponible como un plugin independiente de la misma forma que antes.

La razón es sencilla pero importante: Figma adquirió a Diagram (la startup creadora de Magician, Genius y Automator) hace un tiempo. Como parte de esta integración, el equipo de Diagram pasó a formar parte de Figma para construir las herramientas nativas de inteligencia artificial que ahora conocemos como Figma AI.

Roiber Avendaño

Magician: plugin para generar iconografía, imágenes, textos con la IA

Gabriel P

Hace 2 años

Es mayormente de pago, para tener en cuenta

David Aragón

No tengo la "page" de IA , tampoco esta la de la clase pasada de variables de cambiar el idioma asi debe ser?

Carlos Espinoza

Yo pensaba que sabía Figma, pero en tan poco tiempo salieron tantas cosas que wao.

Stiven Castillo Montero

Lo que veo bueno en magician es solo la generación de copys. Lo demás ya hay librerías

David Beltran Mancera

si creo que en calidad y para los desarrolladores es mejor material symbols

Carolina Gómez

Resumen de la clase: Inteligencia Artificial aplicada al diseño en Figma

La IA y el diseño:

La inteligencia artificial ha revolucionado el mundo del diseño.
En Figma, se puede aprovechar esta tecnología mediante plugins.
Figma adquirió la empresa Diagram, especializada en herramientas de IA para mejorar y acelerar los procesos de diseño.

Herramientas creadas por Diagram:

Magician
Genius
Automator

Estas herramientas están disponibles como plugins dentro de Figma.

Enfoque en el plugin: Magician

Magician es un plugin que utiliza inteligencia artificial para facilitar y mejorar la experiencia de diseño. Sus funciones principales incluyen:

Generación de iconos:
- Por ejemplo, si escribes "home icon", Magician genera cuatro opciones distintas.
- Los iconos generados son vectores completamente editables (puedes cambiar color, forma, tamaño, etc.).
Generación de textos (copies):
- Se le da una instrucción o prompt, y Magician sugiere diferentes textos.
- Estos textos pueden ser títulos, descripciones, frases llamativas, entre otros.
Generación de imágenes:
- Similar a la generación de iconos: escribes lo que necesitas y Magician entrega cuatro versiones diferentes para elegir.
- La imagen seleccionada puede incluirse directamente en el diseño.

Ainara Gil

Intento entrar a el pluggin pero me aparece esta captura de pantalla, que es lo que debo poner ahi?

Solo tienes que darle a Star free trial y te registras, despues te va dar un codigo para que lo coloques ahi

La "page" de aplicacion IA no la tengo tampoco la de apple y google de la pasada esta bien?

Victoria Sanchez

Quedé impresionada, llevaba tiempo buscando un plug in así!!

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

Genera iconos, copies e imágenes con Magician