Qué es el estilo flat en ilustración y cuándo usarlo
Irene Lidia Wang
9 de noviembre de 2026 · 11 min de lectura
La captura del producto ya es un dashboard cargado de datos. Y al lado, la ilustración del hero llega con brillos, una cara llena de detalles y un cielo en degradado del azul al salmón. La interfaz es sobria; la imagen, todo lo contrario. ¿Te suena?
Imágenes así son las que acabo quitando de una landing page, porque chocan con la interfaz. Y no se arregla con un prompt mejor: el problema es el estilo.
Una ilustración flat es un dibujo hecho con formas simples y colores lisos: pocas sombras, casi ningún degradado y nada de profundidad fingida. Es la imagen en sí, no el marco de interfaz que la rodea. Cuando esa imagen tiene que convivir con una interfaz real, abro el generador de ilustraciones flat, elijo Flat en Estilo y describo solo el motivo.
Cómo es una ilustración en estilo flat
Empieza por los rellenos. Cada forma lleva un solo color: la camisa, azul marino; la taza, terracota. El fondo es liso, blanco o crema, y deja sitio al titular que va al lado.
Las personas salen sin cara: un círculo hace de cabeza, un bloque hace de torso y aun así se lee "persona frente a una laptop". Es justo lo que quiero. Una cara con detalle se lleva la mirada que debería ir a la captura.
Mantén la paleta corta: dos o tres colores que ya estén en el producto, más un neutro. Un tono extra puesto al azar hace que la ilustración parezca un añadido de última hora. Es la misma regla que doy en estilos de ilustración que funcionan en una landing page: la imagen está para apoyar al producto, no para competir con él.
Los bordes tienen que ser evidentes: señalas una forma y sabes decir de qué color es. Si la luz envuelve una mejilla o un degradado hace de sombra, eso ya no es flat. Es un render, y un render choca con una interfaz limpia.
El estilo flat no es lo mismo que el flat design
Mucha gente busca los dos términos a la vez, pero cada uno resuelve una cosa distinta.
El flat design (o diseño plano) es una manera de construir interfaces. Se popularizó cuando Microsoft presentó Metro, su lenguaje de diseño, en Windows Phone 7 en 2010 y lo llevó después a Windows 8, que salió en octubre de 2012. Hacia 2013 se sumó la propia página de inicio de Apple.
El artículo de Nielsen Norman Group sobre interfaces planas y botones que no parecen botones es el aviso que sigo mandando a mi equipo: si todos los controles son rectángulos planos, la gente deja de saber dónde puede hacer clic. El llamado "flat 2.0" que llegó después, con la elevación de Material Design como ejemplo, recupera una sombra discreta en botones y paneles para que la pantalla se entienda.
Una ilustración flat puede vivir en esa pantalla y ser incluso más sencilla que los botones. Al botón quizá le haga falta una sombra para que se note que es un botón; a la imagen del hero, no. Si le pones esas mismas sombras, tienes dos capas gritando a la vez.
El flat design construye la pantalla. La ilustración flat es lo que colocas encima.
El estilo flat frente al line art, el 3D y el cuento infantil
Illustro tiene cuatro estilos. Flat es al que recurro cuando el archivo tiene que encajar en el diseño de un producto y, además, exportarse en SVG. Los otros tres no son un "flat más pulido": son otra clase de imagen.
| Estilo | Qué obtienes | Cuándo usarlo |
|---|---|---|
| Flat | Formas de color liso, pocas sombras, SVG editable | Huecos de la interfaz, pantallas vacías, secciones de landing page |
| Line art | Trazos limpios, En color o Blanco y negro | Iconos, diagramas, un dibujo más que una escena rellena |
| Ilustración 3D | Figura de plastilina, solo PNG o JPEG, sin SVG | Una mascota de marca que parezca un objeto real |
| Cuento infantil | Colores suaves, tipo gouache, solo PNG o JPEG | Cuentos ilustrados e historias para niños |
El line art también es vectorial, así que Cambiar colores funciona igual; lo que ves, eso sí, son trazos de tinta, no formas rellenas. Paso al generador de line art cuando el diseño pide más un diagrama que una escena.
La Ilustración 3D es mate, redondeada y con la luz de un objeto pequeño fotografiado en estudio. No se exporta en SVG ni es un archivo de Blender. Si al lado de un producto desenfadado el flat se queda corto, lee cómo crear una mascota de marca en 3D sin Blender antes de obligarlo a hacer algo que no se le da bien.
El estilo Cuento infantil es cálido a propósito. A una historia para niños le sienta bien; a una pantalla de configuración, no. Las ilustraciones de cuento, que se queden en el cuento. Además, ese estilo tampoco es vectorial, así que no puedes cambiar los colores de los trazados como en el flat.
Dónde encaja de verdad una ilustración en estilo flat
Pantallas vacías. Onboarding. Una fila de funciones bajo un titular. Una diapositiva que tiene que ir a juego con el sitio web. En todos esos casos, lo que explica son el texto y la captura; a la imagen le basta con que se reconozca el momento: una persona, una laptop, una planta, una bandeja de entrada vacía.
Un hero ancho necesita aire. Si la imagen llena todos los rincones, el titular no tiene adónde ir. Pide un solo motivo sobre fondo liso y comprueba el recorte en un teléfono antes de dar por buena la versión de escritorio.
Que la misma persona aparezca en todo un flujo es otro problema: volver a generar no fija quién es. Para eso está el pack de ilustraciones.
Escribes un tema y una descripción del personaje, preparas las escenas con Planificar el pack (planificar es gratis) y luego haces clic en Fijar personaje. La hoja de personaje cuesta 3 créditos y la apruebas tú antes de pasar a ninguna escena. Cada escena cuesta otros 3 créditos, porque los packs funcionan en Illustro MAX. Un pack de 4 escenas sale por 15 créditos.
Cuenta con un resultado "más coherente", no con un clon exacto píxel a píxel.
Cuándo dejo este estilo de lado
Cuando la gracia está en la cara. En Flat, las figuras no tienen ojos ni boca. Si la idea depende de la expresión, necesitas otro estilo.
Para un cuento ilustrado. Ahí lo que cuenta es la suavidad, y además no vas a obtener un SVG.
Cuando la mascota de marca tiene que parecer un juguete encima de la mesa. Ahí entra la Ilustración 3D, que se exporta en PNG o JPEG.
Para un logo. Las formas flat pequeñas pueden leerse bien, pero Illustro no es una herramienta para hacer logos. Un logo que vas a imprimir en mil objetos sigue necesitando a un diseñador.
Cuando la marca ya tiene su propio sistema de ilustración, uno que ningún prompt va a poder reproducir. El flat te da un borrador que puedes publicar esta misma semana, pero no sustituye a la dirección de arte de la imagen principal de una campaña.
Cómo escribir el prompt de una ilustración en estilo flat con colores editables
Este es el prompt que uso de verdad; lo pego y luego lo retoco:
"Persona frente a una laptop, vista de perfil, formas geométricas simples, camisa azul marino, taza terracota, fondo crema, sin rasgos faciales, sin degradados"
Indica el motivo, la pose y dos o tres colores de relleno. Olvídate de "cinematográfico", "8k" e "iluminación dramática": esas palabras piden justo la profundidad que intentas evitar.
Si el prompt habla de cámaras y objetivos, la imagen no va a salir plana. "Mujer en una oficina llena de sol, estilo cinematográfico, cara detallada, bokeh suave" pide a gritos una fotografía. La versión flat nombra formas y rellenos, y le dice a la imagen que no lleve cara ni degradados.
Si el primer resultado todavía parece un render, vuelve a generar con Illustro Light antes de gastar créditos de MAX en una escena que no quieres. Cómo crear un archivo SVG con IA que puedas cambiar de color parte de la misma idea: pide un gráfico, no una fotografía.
Y ahora, los controles.
- Pon Estilo en Flat.
- Usa Illustro Light (1 crédito) mientras todavía estés probando poses, y cambia a Illustro MAX (2 créditos) cuando la escena sea la que vas a publicar. El editor se abre en Light, así que revisa el modo antes de hacer clic en Generar.
- Elige el Tamaño: Cuadrado (1024×1024), Vertical (1024×1536) u Horizontal (1536×1024). Cuadrado para un hueco de la interfaz; Horizontal para un hero. No hay un campo para indicar un tamaño a medida en píxeles.
- Si la pose está bien pero el amarillo no te convence, abre Cambiar colores. Es gratis: cambia un color allí donde aparezca, o haz clic en una forma y cambia solo esa.
- Para añadir un objeto o cambiar un gesto (que la figura salude con la mano, por ejemplo), usa Editar con IA (3 créditos): Cambiar colores no dibuja nada nuevo.
- Descargar en PNG o JPEG es gratis. Exportar en SVG cuesta 1 crédito en las ilustraciones generadas en Illustro. Lleva ese archivo a Figma con el plugin de Illustro, o expórtalo y arrástralo tú mismo al lienzo.
¿Ya tienes una foto con la pose? Convierte la foto en ilustración. Esa herramienta solo trabaja en estilo flat y cuesta 3 créditos; después cambias los colores como en cualquier otro archivo flat. Si en la foto sale otra persona, súbela solo si está de acuerdo.
Preguntas frecuentes
¿Qué significa flat en ilustración?
Flat significa que la imagen no finge profundidad. Las formas están en un solo plano, el color es liso y las sombras son mínimas o no existen. En el diseño de un producto, ese aspecto evita que la ilustración compita con los botones, el texto y las capturas. Si en una mejilla se nota de dónde viene la luz, el dibujo ya no es flat.
¿Para qué se usa una ilustración en estilo flat?
Se usa en secciones de sitios web, en el onboarding de apps, en pantallas vacías y en diapositivas: en cualquier lugar donde una escena sencilla tenga que combinar con una interfaz. Los equipos la eligen cuando la protagonista es la captura y a la imagen le basta con mostrar una persona, un objeto o una bandeja de entrada vacía. Exporta el SVG cuando el archivo tenga que escalar, y mantén la paleta corta para que pueda tomar prestados los colores del producto.
¿El estilo flat es lo mismo que el flat design?
No. El flat design es un estilo de interfaz. Metro apareció en Windows Phone 7 en 2010, Windows 8 lo llevó al escritorio en octubre de 2012 y después llegó al resto de interfaces de producto.
Una ilustración en estilo flat es la imagen que colocas dentro de esa interfaz. El botón puede seguir teniendo una pequeña sombra para que se note que se puede hacer clic en él; la imagen puede ser más plana que el control.
¿Las ilustraciones en estilo flat son vectoriales?
En Illustro, lo que generas en Flat sale como un SVG al que puedes cambiar los colores. Descargar ese SVG cuesta 1 crédito; PNG y JPEG son gratis.
Cambiar colores puede sustituir un relleno o borrar una forma, pero no añade trazos nuevos como haría la herramienta pluma. Cuento infantil e Ilustración 3D no son vectoriales, así que esto no se aplica a esos estilos.
¿Cómo se llama un dibujo en estilo flat?
También se habla de ilustración vectorial flat, ilustración flat design o ilustración de diseño plano. Yo uso "flat" para formas de color liso casi sin sombras. Si la imagen es sobre todo contornos, es line art, no flat. Si parece un juguete de plastilina, es Ilustración 3D.
¿Puedo usar una ilustración en estilo flat con fines comerciales?
Sí, en cuanto compras créditos: el uso comercial viene con cualquier paquete de créditos de pago único, siempre que cumplas los términos. Mientras no compres, lo que creas con los créditos gratis del registro es solo para uso personal. Tu primera compra lo cubre también. Y no uses esos archivos para entrenar ni evaluar otro sistema de IA.
En los precios de Illustro verás los derechos de uso comercial incluidos en los paquetes de créditos de pago único. Aun así, una campaña con un sistema de marca a medida quizá siga necesitando a un ilustrador de carne y hueso después del borrador.
