ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Vale, esto es importante: si sabes hacer una web, ya puedes hacer vídeos. Sin timeline, sin Premiere, sin After Effects. Solo HTML.

Eso es exactamente lo que propone HyperFrames, un framework open source de HeyGen que básicamente rompe la forma tradicional de crear vídeo.

La idea es tan simple que cuesta entender por qué no existía antes: escribes HTML, lo renderizas y obtienes un MP4. Fin.

Pero ojo, no es “HTML metido en un vídeo”. Es un sistema donde defines cada elemento con timing, capas y animaciones usando atributos tipo data-start o data-duration. Es decir, conviertes el DOM en una línea de tiempo.

Y aquí es donde se pone interesante para diseñadores y devs:
no hay interfaz visual obligatoria. No hay timeline arrastrando clips. No hay caos. Hay código limpio.

De hecho, HyperFrames está pensado más para máquinas que para humanos. Sí, literalmente. Está diseñado para que agentes de IA puedan generar vídeos solos porque “hablan HTML de forma nativa”.

Esto cambia totalmente el juego.

Antes:
→ Diseñas en Figma
→ Exportas
→ Editas vídeo
→ Renderizas

Ahora:
→ Describes el vídeo
→ Un agente escribe el HTML
→ Ejecutas un comando
→ Tienes el vídeo listo

Y además con algo clave: determinismo. Mismo input, mismo output siempre. Nada de renders aleatorios o bugs raros. Esto es oro para pipelines automáticos, CI/CD o generación masiva de contenido.

A nivel técnico, por dentro mezcla cosas que ya conoces: Chrome en modo headless, captura frame a frame y FFmpeg para generar el vídeo final. Nada mágico, pero muy bien conectado.

Lo realmente potente no es la tecnología, es el enfoque.

HyperFrames no intenta ser “otro editor de vídeo”. Es más bien una capa nueva:
el vídeo como código.

Y eso tiene implicaciones brutales:
puedes versionar vídeos en Git, generar contenido dinámico, automatizar campañas, o crear vídeos personalizados a escala sin tocar una interfaz visual.

Para diseñadores, esto puede sonar raro al principio. Pero si ya trabajas con motion, UI o sistemas de diseño, en el fondo es lo mismo: componentes, estados y animaciones… solo que ahora viven en HTML.

Para developers, esto es directamente un regalo. No tienes que aprender un software nuevo. Usas lo que ya sabes: HTML, CSS, JS, GSAP o lo que quieras.

Y si te preguntas si esto es hype o no, la comunidad está bastante intrigada. En Reddit ya lo están llamando “lo más interesante” que ha salido en vídeo programático últimamente, sobre todo por lo fácil que encaja con herramientas tipo Claude Code o similares.

¿Va a sustituir a After Effects? No.
¿Va a cambiar cómo se crean vídeos en productos digitales, marketing o IA? Muy probablemente sí.

Porque cuando el contenido se vuelve código, deja de ser manual y pasa a ser escalable.

Y ahí es donde empieza lo realmente gordo.

#HyperFrames #DiseñoGráfico #Programación #VideoAutomation #AI #HTML #Frontend #MotionDesign #DevTools #OpenSource #HeyGen #ContentCreation #NoCode #CreativeCoding

Vale, te voy a ahorrar tiempo: si estás usando IA para programar interfaces y todo te sale con pinta de plantilla cutre… no eres tú, es la falta de contexto.

Aquí entra awesome-design-md, un repo que básicamente dice: “oye, en vez de pedirle magia a la IA, dale instrucciones de diseño claras”. Y lo hace con algo tan simple que duele: archivos Markdown.

Sí, Markdown. Nada de Figma, nada de tokens raros, nada de pipelines complejos. Un archivo llamado DESIGN.md donde defines colores, tipografías, espaciados, componentes… y listo. Lo metes en tu proyecto y le dices al agente: “usa esto”. Fin.

La idea es potente porque soluciona un problema real: las IAs programan bien, pero diseñan como si vivieran en 2014. Botones genéricos, layouts reciclados… todo correcto, pero sin alma.

Este repo lo que hace es convertir el “gusto” en texto reutilizable. No estás copiando componentes, estás copiando criterios de diseño.

Y aquí está la magia: puedes hacer que tu app parezca Stripe, Notion o Apple simplemente cambiando un archivo. Literalmente eliges un estilo y la IA lo sigue como si fuera un manual de marca.

Además, cada DESIGN.md no es un resumen cutre. Tiene de todo:

• paleta de colores con roles semánticos
• jerarquía tipográfica completa
• estilos de botones, inputs, cards
• reglas de espaciado y layout
• comportamiento responsive
• incluso “qué NO hacer”

O sea, es como pasarle a la IA el cerebro de un diseñador comprimido en texto.

Y lo mejor: funciona porque Markdown es justo el idioma que las LLM entienden mejor. No hay que parsear nada raro.

Ahora bien, tampoco es la panacea.

#diseñografico #uxui #frontend #ia #programacion #webdesign #openSource #designsystems #markdown #aiTools

Si estás empezando en diseño o simplemente necesitas un logo rápido sin complicarte la vida, Logo Diffusion es una de esas herramientas que te hacen pensar: “vale, esto ya está jugando en otra liga”.

La idea es simple: escribes lo que quieres (por ejemplo: logo minimalista para marca de café moderno) y la IA te escupe varias propuestas listas para usar. También puedes subir un boceto cutre hecho en 30 segundos y la herramienta lo convierte en algo bastante decente.

Y aquí viene lo interesante: no es solo generar por generar. Puedes ajustar colores, estilos, composición… básicamente tienes control suficiente para que no parezca el típico logo genérico de IA.

Además, trabaja con modelos de difusión (de ahí el nombre), lo que significa que las imágenes que genera tienen bastante calidad y coherencia visual. Nada de logos rotos o letras raras… bueno, casi nunca

Otro punto fuerte es la velocidad. En minutos tienes varias opciones sobre la mesa, algo que en un proceso tradicional te puede llevar horas o días. Y si estás validando ideas o haciendo branding rápido, esto es oro puro.

También mola que puedas exportar en vector (SVG), lo cual es clave si luego quieres usar ese logo en serio: web, impresión, lo que sea.

Ahora, vamos a ser claros: esto no sustituye a un diseñador. Es una herramienta brutal para empezar, prototipar o incluso sacar algo funcional si vas justo de presupuesto. Pero si quieres una identidad de marca con personalidad de verdad, ahí sigue ganando el factor humano.

En resumen, Logo Diffusion es como tener un diseñador junior ultrarrápido dentro del navegador. Tú le das ideas, él te devuelve opciones. Y a partir de ahí decides si te vale o si necesitas algo más trabajado.

#DiseñoGráfico #IA #LogoDesign #Branding #HerramientasIA #Diseño #Creatividad #Startups #Freelance #DiseñoDigital

Si alguna vez has diseñado en Figma y luego has tenido que “traducir” eso a código… sabes perfectamente el dolor.

Horas perdidas, inconsistencias, y ese momento en el que el diseño final no se parece en nada al mockup. Pues bien, ahí es donde entra Pencil.dev y viene a romper esa dinámica de raíz.

La idea de pencil.dev es simple pero potente: diseñar interfaces directamente dentro de tu editor de código. Sí, dentro del propio VS Code o Cursor. Nada de saltar entre herramientas. Nada de handoff. Todo en el mismo sitio.

Funciona como un lienzo vectorial (rollo Figma), pero integrado en tu entorno de desarrollo. Tienes canvas infinito, capas, componentes reutilizables… lo típico de diseño, pero pegado a tu código.

Y aquí viene lo interesante: está pensado para trabajar con IA desde el minuto uno. Puedes generar interfaces enteras con prompts, iterar diseños o modificar componentes sin salir del editor.

En lugar de diseñar algo bonito y luego pelearte para implementarlo, aquí el diseño ya vive dentro del proyecto. Literalmente se guarda como archivos versionables en Git, lo que significa que diseño y código están sincronizados desde el principio.

Esto cambia bastante el juego, sobre todo si eres desarrollador con inquietudes de diseño o si trabajas solo. Porque elimina ese paso intermedio donde todo se rompe.

Además, la herramienta tira fuerte hacia lo que ahora llaman “vibe coding”: generar interfaces directamente con IA mientras programas. Es decir, describes lo que quieres y el sistema te monta la UI y el código a la vez.

¿Es perfecta? Ni de lejos.

Al ser una herramienta bastante nueva, todavía está verde. Le faltan cosas que Figma ya tiene súper pulidas, y dependiendo de cómo la uses puede volverse algo inestable o consumir bastantes recursos. Pero eso es bastante normal en este tipo de herramientas que están naciendo ahora mismo.

Aun así, lo importante no es si hoy es mejor que Figma o no. Lo importante es hacia dónde apunta:

Eliminar la separación entre diseño y desarrollo
Trabajar directamente sobre el producto final
Usar IA como parte del flujo, no como añadido

Si estás empezando en diseño o desarrollo, esta es de esas herramientas que merece la pena probar aunque sea por entender por dónde va el futuro.

Porque esto huele a cambio gordo.

#DiseñoUI #UX #IA #Herramientas #Programación #Frontend #WebDesign #AItools #Figma #Desarrollo

Llevaba tiempo con el gusanillo de meterme en el mundo de la pintura digital. Tenía el iPad muerto de risa para cuatro notas y Netflix, así que pensé: “oye, igual aquí hay un mini artista frustrado esperando salir”. Total, que me lancé a probar tres de las apps más populares: Adobe Fresco, Procreate y Autodesk SketchBook. Y sí, hay diferencias… y bastante claras.

Empecé por Procreate, que es como la puerta de entrada de casi todo el mundo. Es rápida, intuitiva y tiene una barbaridad de pinceles. Literalmente abres la app y ya estás dibujando como si llevaras años. Me flipó lo fluido que es todo, el rendimiento es una pasada y tienes herramientas suficientes para hacer cosas muy serias. Eso sí, cuando intentas ir más allá y buscas un rollo más “realista” en pintura, notas que todo está muy optimizado para ilustración digital más que para simular pintura tradicional.

Luego probé SketchBook, que es como el colega tranquilo que no hace ruido pero cumple. Es gratuita, ligera y muy fácil de usar. Perfecta si estás empezando o si quieres dibujar sin complicarte la vida con mil menús. Pero claro, comparada con las otras dos, se queda un poco corta en herramientas avanzadas y en sensaciones. Es como si te faltara ese “algo” cuando quieres experimentar más en serio.

Y aquí es donde entra Adobe Fresco… y donde yo hice clic. Lo que más me atrapó es cómo se siente pintar. Los pinceles “vivos” son una locura: acuarelas que se mezclan de verdad, óleos que reaccionan como esperarías… de repente no estás “dibujando en digital”, estás pintando. Para alguien que viene con la idea romántica de la pintura tradicional, esto engancha muchísimo. Además, la integración con el ecosistema de Adobe suma puntos si ya tocas otras herramientas.

Eso no quiere decir que sea perfecta. Fresco puede parecer menos inmediata que Procreate al principio, y algunas funciones están más escondidas. Pero cuando le pillas el truco, es donde más disfrutas el proceso, no solo el resultado.

Si tuviera que resumirlo fácil: Procreate es la mejor para ilustrar rápido y con potencia, SketchBook es la más sencilla para empezar sin presión, y Adobe Fresco además de gratuita es la que más se acerca a la sensación real de pintar. Y en mi caso, eso último ha pesado más que todo lo demás.

Así que sí, después de probar las tres, mi favorita es Adobe Fresco. No porque sea “la mejor” en todo, sino porque es la que me ha hecho querer volver a abrir el iPad cada día para seguir pintando. Y al final, de eso va todo esto.

#AdobeFresco #Procreate #SketchBook #iPad #ArteDigital #Ilustración #DiseñoGráfico #Creatividad #DigitalPainting #AppsCreativas

Si alguna vez has tenido una idea brillante para una web o app pero te has quedado bloqueado al momento de diseñarla, Google está experimentando con algo que podría cambiar bastante las reglas del juego. Se llama Stitch y básicamente intenta convertir descripciones simples en interfaces visuales funcionales usando inteligencia artificial.

La propuesta es tan simple como potente: escribes lo que quieres crear, algo tipo “una app de recetas con fotos grandes y botón de favoritos”, y Stitch empieza a generar una interfaz acorde a esa idea. No hablamos solo de bocetos básicos, sino de layouts bastante coherentes que ya te dan una base real para trabajar. Es como tener un diseñador UI al lado… pero en versión IA.

Este tipo de herramientas encaja perfectamente con la tendencia actual de desarrollo asistido por IA, donde cada vez más tareas creativas y técnicas se automatizan o se aceleran. Stitch no viene a reemplazar diseñadores, pero sí a quitar esa fricción inicial de empezar desde cero. Y seamos honestos: empezar es muchas veces lo más difícil.

Lo interesante es que Stitch forma parte de la línea experimental de Google, lo que significa que está en constante evolución. No es un producto final ni cerrado, sino más bien un laboratorio donde se están probando nuevas formas de interacción entre humanos y máquinas. Algo muy en la línea de lo que ya vimos con herramientas como Figma o Adobe XD, pero con el añadido fuerte de la inteligencia artificial generativa.

Para diseñadores, puede ser una herramienta brutal para prototipar rápido y validar ideas. Para desarrolladores, un atajo para visualizar conceptos sin tener que montar todo desde cero. Y para creadores en general, una forma de dar forma a ideas sin necesidad de dominar herramientas complejas desde el minuto uno.

¿Es perfecta? Para nada. Como toda IA generativa, puede fallar, generar cosas genéricas o no entender del todo lo que buscas. Pero como punto de partida, es difícil no verle el potencial. Y sobre todo, abre una puerta interesante: la de democratizar aún más el diseño digital.

En definitiva, Stitch es otro paso más hacia un futuro donde crear productos digitales sea más rápido, accesible y, por qué no, más divertido.

#Google #Stitch #InteligenciaArtificial #DiseñoWeb #UIUX #DesarrolloWeb #IA #HerramientasDigitales #Diseño #UX #Tecnología

Si alguna vez has intentado explicar una idea compleja con palabras y has terminado diciendo “espera, que te lo dibujo”, entonces Excalidraw te va a gustar mucho. Esta herramienta online es básicamente una pizarra digital pensada para dibujar ideas rápidamente, pero con un toque muy especial: todo tiene un estilo de boceto hecho a mano que hace que tus diagramas se vean claros, informales y fáciles de entender.

La gracia de Excalidraw es su simplicidad. Entras en la web y puedes empezar a dibujar inmediatamente sin crear cuenta ni instalar nada. Tienes un lienzo infinito donde puedes añadir rectángulos, círculos, flechas, texto o dibujar a mano alzada para crear diagramas, esquemas, wireframes o mapas mentales en cuestión de segundos. Todo está pensado para ir rápido: seleccionar, arrastrar, conectar elementos y listo.

Uno de los detalles más curiosos es su estilo visual. En lugar de buscar líneas perfectas y diseños ultra pulidos, Excalidraw apuesta por una estética de “boceto”. Esto tiene más sentido de lo que parece, porque cuando algo se ve como un sketch la gente se centra más en la idea que en los detalles visuales. Es perfecto para sesiones de brainstorming, planificación de proyectos o explicar procesos técnicos sin perder tiempo afinando píxeles.

Además, permite colaborar en tiempo real, lo que significa que puedes compartir un enlace y empezar a dibujar con tu equipo como si estuvierais en una misma pizarra. También incluye funciones como exportar los dibujos en PNG o SVG, importar imágenes, usar bibliotecas de elementos o guardar los proyectos en archivos propios de la herramienta.

Otro punto fuerte es que es open source y gratuito, algo que lo ha convertido en una herramienta muy popular entre desarrolladores, diseñadores de producto y equipos que necesitan visualizar ideas rápidamente. Incluso puedes integrarlo en otras herramientas o alojarlo en tu propio servidor si quieres tener control total sobre tus datos.

En resumen, Excalidraw es una de esas herramientas que no intenta sustituir a software de diseño complejo como Figma o Illustrator. Su objetivo es mucho más simple: ayudarte a pensar, explicar y compartir ideas visualmente en cuestión de segundos. Y cuando la idea es buena, un simple boceto muchas veces vale más que un diseño perfecto.

Si trabajas en diseño, desarrollo, producto o simplemente te gusta organizar ideas visualmente, probablemente acabarás abriendo Excalidraw más veces de las que imaginas.

#Excalidraw #HerramientasOnline #Diagramas #Wireframes #UXDesign #Productividad #DiseñoDigital #Brainstorming #OpenSource #DiseñoUX

Si trabajas con Figma a diario, sabes que el verdadero poder de la herramienta no está solo en su interfaz limpia y colaborativa, sino en su ecosistema de plugins. Y es que los plugins para Figma pueden convertir un buen flujo de trabajo en uno brutalmente eficiente. Hoy te traigo una selección que debería estar instalada ya mismo en tu panel: Motion, Table Creator, Supa Palette, Storyset, Typescale y Breakpoints. Y sí, al final te dejo algunos extras que también merecen cariño.

Empezamos con Motion, un plugin perfecto para quienes quieren añadir animaciones y microinteracciones sin salir de Figma. Ideal para prototipos más realistas y presentaciones que no se queden en pantallas estáticas. Si trabajas en UX, Motion te ayuda a simular transiciones y movimientos de forma sencilla, elevando la percepción profesional de tus entregables.

Table Creator (muchos lo buscan como Table Creatos, pero el nombre correcto es Table Creator) es un salvavidas cuando necesitas crear tablas complejas en segundos. Olvídate de duplicar celdas manualmente. Este plugin para Figma genera tablas personalizables que puedes adaptar a dashboards, tablas de precios o sistemas de datos sin perder tiempo.

Supa Palette es una joya para trabajar color. Te permite generar y organizar paletas coherentes de forma rápida, ideal si estás creando un sistema de diseño o ajustando branding. Si el color es una parte clave de tu proyecto, este plugin te ayudará a mantener consistencia visual sin volverte loco probando combinaciones infinitas.

Autoflow para crear flujos entre pantallas de forma visual.

Storyset integra ilustraciones editables directamente en Figma. Si ya conoces el potencial de las ilustraciones personalizables en diseño web y apps, este plugin te permite importar recursos listos para adaptar a tu estilo visual. Perfecto para landing pages, onboarding screens o presentaciones más dinámicas.

Content Reel para insertar texto e imágenes de prueba rápidamente

Typescale es imprescindible cuando trabajas tipografía en proyectos UI. Define escalas tipográficas coherentes basadas en ratios y crea jerarquías claras en cuestión de segundos. Si estás desarrollando un design system, este plugin te ahorra tiempo y mejora la consistencia visual de tu producto.

Breakpoints es otro imprescindible para diseño responsive. Te ayuda a trabajar distintos tamaños de pantalla dentro de Figma sin perder el control del layout. Si diseñas para desktop, tablet y móvil, este plugin facilita visualizar y organizar puntos de ruptura de forma clara.

Unsplash para añadir fotografías sin salir de la herramienta

Figmotion si quieres una alternativa potente para animación avanzada.

Si trabajas con sistemas complejos, Tokens Studio también puede ser una gran incorporación para manejar variables y design tokens.

La clave no es instalar todos los plugins posibles, sino elegir los que realmente mejoran tu productividad en Figma. Con esta selección tienes una base sólida para optimizar diseño UI, prototipado, color, tipografía, responsive y contenido visual. Si todavía no los usas, es momento de probarlos y llevar tu flujo de trabajo al siguiente nivel.

#Figma #PluginsFigma #UIDesign #UXDesign #DiseñoWeb #DesignTools #Prototipado #DesignSystem #DiseñoDigital #ProductDesign #HerramientasCreativas

¿Alguna vez has exportado un icono perfecto desde Figma, pero al ponerlo en tu web parece que tiene vida propia y no se alinea con el texto? No es un error de tu código, es un problema de Bounding Box (caja contenedora).

El Problema: El icono «flota» o no se centra

En Figma, los diseñadores suelen crear iconos dentro de marcos cuadrados (por ejemplo, 24x24px). Si el dibujo del icono no ocupa todo ese espacio o no está centrado dentro de su marco, al exportarlo como SVG e insertarlo en tu HTML, heredará esos espacios vacíos asimétricos.

La Solución en Figma (Antes de exportar)

Antes de pasar el diseño a desarrollo, asegúrate de:

1. Flatten Shapes: Selecciona el icono y pulsa Cmd + E (Mac) o Ctrl + E (Windows) para simplificar los vectores.
2. Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
3. Outline Stroke: Si el icono usa bordes (strokes), conviértelos a esquemas (Shift + Cmd + O) para que el tamaño de exportación sea exacto.

La Solución en CSS (Si ya está en el código)

Si no puedes volver a Figma, puedes corregir la alineación visual usando este «truco» de alineación flexible:

.icon-container {
  display: inline-flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  vertical-align: middle; /* Alineación respecto al texto contiguo */
}

svg {
  display: block; /* Elimina el espacio reservado para descendentes de texto */
  width: 1em; /* Escala el icono proporcionalmente al texto */
  height: 1em;
}

Tip Pro: Si el icono sigue viéndose «caído», usa transform: translateY(-1px); para un ajuste óptico fino. A veces, la geometría no coincide con la percepción del ojo humano.

¿No sería genial que tus ideas comenzaran como bocetos realizados con un bolígrafo «real» y se convirtieran inmediatamente en gráficos vectoriales?
Pues gracias a Inkling de Wacom ya no será un sueño y será realidad, que podrás disfrutar por 169.90€
Espero que los reyes magos hayan visto que he sido un niño muyyy muyyy bueno y se deje caer una maravilla como esta 🙂

Más información sobre Inkling
Fuente Ateneu Popular