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

Si pensabas que Figma ya era mucho más que una herramienta de diseño, Config 2026 ha dejado claro que la compañía quiere convertirse en el centro de todo el proceso creativo y de desarrollo digital.

La gran estrella del evento ha sido la llegada de los Code Layers, una función que permite trabajar directamente con código dentro del propio lienzo de Figma. La idea es reducir la distancia entre diseño y desarrollo, permitiendo explorar, modificar y sincronizar interfaces sin saltar constantemente entre herramientas.

Otra de las novedades más llamativas es Figma Motion, un sistema de animación integrado que añade líneas de tiempo, fotogramas clave y generación de animaciones mediante IA. Esto significa que los diseñadores podrán crear transiciones, efectos y movimientos complejos sin depender de software externo.

La inteligencia artificial también llega al apartado visual con los nuevos Shaders, capaces de generar efectos avanzados como pixelados, desenfoques o tratamientos gráficos personalizados simplemente describiendo lo que se quiere conseguir.

Además, Figma ha presentado los Generative Plugins, una forma de crear herramientas personalizadas mediante instrucciones en lenguaje natural, sin necesidad de conocimientos de programación. A esto se suman las nuevas integraciones de IA, conectores con plataformas externas y los flujos de trabajo de Weave, orientados a automatizar tareas creativas complejas.

La sensación general tras Config 2026 es clara: Figma ya no quiere ser únicamente una aplicación para diseñar interfaces. Su objetivo es convertirse en el espacio donde diseñadores, desarrolladores e inteligencia artificial colaboren sobre un mismo lienzo, eliminando barreras entre la idea inicial y el producto final.

#Figma #Config2026 #DiseñoUX #UIDesign #DiseñoDigital #Programacion #DesarrolloWeb #InteligenciaArtificial #MotionDesign #DesignTools #Frontend #ProductDesign

Google ya ha empezado a mover fichas con el Core Update de mayo de 2026, y sí, eso significa que durante los próximos días medio internet va a mirar Search Console como quien revisa el pulso de un paciente en urgencias.

La actualización ya está en marcha y Google avisa de que el despliegue puede tardar hasta dos semanas completas. Traducido al idioma SEO: hoy puedes subir, mañana caer y pasado volver a aparecer como si nada hubiese pasado.

Por eso el consejo más inteligente ahora mismo es bastante simple: calma.

Muchos proyectos empiezan a tocar títulos, cambiar enlaces, borrar artículos o rehacer webs enteras en cuanto ven una bajada pequeña. Y muchas veces no hace falta. No has roto nada. Google simplemente está reorganizando resultados, ajustando relevancias y recolocando webs dentro del buscador.

Es como cuando un restaurante mueve las mesas de sitio. La comida sigue siendo la misma, pero durante un rato nadie sabe dónde sentarse.

Los Core Updates funcionan así. No son penalizaciones manuales ni ataques personales contra tu web. Son reajustes enormes del algoritmo para decidir qué contenido merece más visibilidad y cuál menos.

Durante estos días lo más útil es observar tendencias, tomar notas y evitar decisiones impulsivas. Comparar datos en mitad de un update es como intentar medir un terremoto mientras el suelo todavía se mueve.

Cuando termine el despliegue sí tendrá sentido analizar:

• Qué URLs subieron o bajaron
• Qué intención de búsqueda está premiando Google
• Si el contenido sigue siendo útil y actual
• Cómo está respondiendo la competencia

Hasta entonces, paciencia, café y cero dramas.

Porque en SEO, muchas veces el peor error no es caer unas posiciones. Es entrar en pánico antes de tiempo.

#SEO #Google #CoreUpdate #SearchConsole #MarketingDigital #DiseñoWeb #Programación #WebDev #PosicionamientoWeb #GoogleUpdate #SEO2026

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 tenido que implementar un sistema de subida de archivos en una web, sabes que puede convertirse en un pequeño dolor de cabeza. Formularios poco atractivos, cargas lentas o falta de compatibilidad… y ahí es donde FilePond entra en escena para salvar el día.

FilePond es una librería JavaScript pensada para crear experiencias de subida de archivos rápidas, modernas y muy fáciles de usar. Lo mejor de todo es que es ligera, flexible y extremadamente personalizable, lo que la hace perfecta tanto para proyectos pequeños como para aplicaciones más grandes.

Una de sus grandes ventajas es que funciona de forma asíncrona, permitiendo subir archivos sin recargar la página. Además, ofrece características que hoy en día casi damos por obligatorias: vista previa de imágenes, validación de archivos, límites de tamaño, reordenación mediante drag & drop y compatibilidad con múltiples frameworks como React, Vue, Angular o Svelte.

Otro punto fuerte de FilePond es su sistema de plugins. Gracias a ellos puedes añadir funciones como compresión de imágenes, recorte, conversión de formatos o incluso detección automática de archivos duplicados. Todo esto sin complicarte la vida y manteniendo el rendimiento de la web.

Y si te preocupa la integración con tu backend, FilePond también lo pone fácil. Funciona perfectamente con APIs REST, subida directa a servidores o incluso servicios en la nube. Básicamente, tú decides cómo y dónde se suben los archivos.

En resumen, FilePond no es solo un input para subir archivos, es una solución completa para mejorar la experiencia del usuario y darle un toque profesional a cualquier formulario.

#FilePond #JavaScript #Frontend #SubidaDeArchivos #WebDevelopment #UX #LibreríasJS #DiseñoWeb

iHover (35 efectos)
Para mi la mejor librería de la colección, aporta animaciones muy elegantes y profesionales. No usan JavaScript y todo lo realizan con CSS3 y HTML

Image Hover Effects (16 efectos)
Bonita colección de 16 «hover effects» con subtitulos. Dispones de el HTML y CSS necesario para emular los efectos en tus proyectos.

Captión Hover Effect (7 efectos)
Transiciones suaves y bonita son las que ofrece esta librería. Si quieres usarla en algún proyecto en su sección de tutoriales te explican como poder usarlas.

Image Caption Hover Animation (4 efectos)
En este enlace encontrarás 4 animaciones para cuando colocan el cursos sobre tus imágenes.
Toda las animaciones son en CSS3, no usan JavaScript, por lo que son ideal para no tener problemas de compatibilidad con navegadores.

Image Hover (44 efectos)
Solo con CSS esta biblioteca posee 44 efectos hover. En esta librería encontrarás efectos de diapositivas, zoom, desenfoque o desvanecimientos entre otros. Además de esta versión gratuita ofrecen una versión premium por 14€ que ofrece un total de 216 efectos.

El Gran Libro de Diseño Web

Descarga el en PDF El Gran Libro de Diseño Web. Una guía definitiva para crear páginas web increíbles, llenas de dinamismo y calidad.
Encontrarás una completisima guía de HTML5, CSS3, Photoshop y jQuery.

Descargar – El Gran Libro de Diseño Web en PDF

Ultimate TV webdesign PSD

Espero que hayáis pasado unas agradables y placenteras fiestas rodeados de vuestros seres queridos y que este nuevo año que hemos inaugurado venga lleno de salud, amor y trabajo.

Centrándonos en la temática de este blog, que por cierto entre fiestas y trabajo estaba algo descuidado, comparto con ustedes este simple pero elegante diseño web en PSD. Este tipo de interface es recomendable bajarlas y estudiaras por dentro, siempre se aprende algún truquito de su creador. Que la disfrutéis!!

Descargar – Ultimate TV webdesign PSD

Web Interface – LyricalMind

Navegando por la red me he tropezado con esta delicia de interface web. La comparto con ustedes para que os sirva de inspiración, si la veis a tamaño completo comprobaréis que esta llena de detalles que pueden ser reutilizados en tus futuros proyectos.

Web Gray Web Elements (Interfaz PSD)

Descarga de forma gratuita esta elegante Interface Web basada en tonos grises y formato PSD.
Descargar: Interfaz Web Gray Web Elements (Grey PSD UI)
Fuente: Redursos2d

10 Amazing Free HTML5 and CSS3 Template

Estupendo recopilatorio de 10 plantillas en formato HTML5 y CSS3 el que comparte DJ Designer Lab, podréis personalizarlas a vuestro gusto y usarla en vuestros proyecto de forma totalmente gratuita. También os pueden servir para curiosear sus entrañas y así aprender de otros diseñadores web (esto es lo que haré yo ^^).

Visitar – 10 Amazing Free HTML5 and CSS3 Template