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

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

lorempixum

Inspirado en la famosa simulación de texto Lorem ipsum, llega esta aplicación llama Lorempixum que nos resultara muy útil cuando nos encontramos en la fase de bocetos de nuestros diseños, ya que nos generara imágenes del tamaño y categoría que deseemos.

Las categorías de imágenes que nos brinda Lorempixum son: abstracto, animales, ciudad, comida, noche, vida, moda, gente, naturaleza, deportes, tecnología y transporte.

Su uso es bastante sencillo e intuitivo, basta con añadir una línea de código con alguna de las sentencias que nos muestran en su web, como por ejemplo:

http://lorempixum.com/500/400/
“ toma una imagen aleatoria de 500 × 400px”.

http://lorempixum.com/500/400/nature
“ toma una imagen aleatoria de 500 × 400px de la categoría de nature”.

http://lorempixum.com/g/500/400/
“inserta una imagen aleatoria en escala de grises de 500 × 400px”

http://lorempixum.com/500/400/nature/1
“muestra la imagen 1 de 10 de la categoría nature”.

Espero que os sea útil, yo ya la tengo en mis favoritos 🙂

Gracias Pablo por pasarme el enlace.

Entorno de trabajo de pixlr

Gracias a los compañeros de Ateneu Popular he descubierto Pixlr, un editor de imágenes online. Dicho editor aunque quede lejos del potencial de Adobe Photoshop o Gimp siempre te puede sacar de un apuro cuando no estas en tu centro de trabajo y necesitas hacer unos pequeños retoques a una imagen y lo único que tienes a mano es un equipo que sólo tiene MSN instalado. (Vamos mi caso cientos de veces ^^)

Comente hace unos días que tenía algo abandonado otros software de diseño y que por ello iba a centrarme en buscar más recursos sobre ellos.
Hoy le toca el turno a GIMP y os voy a dejar una completísima recopilación de 10 sitios especializados en GIMP, la alternativa libre a Photoshop.
Fuente: diariothc.com

La comunidad de Gimp va creciendo a un ritmo frenético, ya no se bastan con el desarrollo la aplicación sino que cada vez disponemos de más pinceles, plugins, estilos y tutoriales. Para muestra un botón a través de Techzilo encontramos un recopilatorio de 35 set de pinceles (brushes) para sumar entre todos más de 1400 pinceles para el gran Gimp.
Visto en DiariTHC

El titulo lo dice todo, no queríais recursos para Gimp pues aquí tenéis para dar y regalar, en esta galería de DeviantART encontrareis mas de 300 set de pinceles y como es de esperar de todo tipos, florales, árboles, animales, abstractos, tatuajes, texturas, cabellos, deportivos y un largo etcétera.
Agradecer los comentarios y propuestas que recibo tanto por el blog como por correo, así que si tenéis más sugerencias bienvenidas serán.

Normalmente traemos recursos para Adobe Photoshop, pero como me han tirado de la oreja (con razón) porque tengo otros buenos programas olvidados como Gimp o Paint Shop Pro.
Vamos a intentar arreglarlo aportando esta completa colección de pinceles para Paint Shop Pro, donde el tema floral es el que reina y para descárgalos solo tendréis que pulsar sobre las imágenes.
Que lo disfrutéis 🙂

Vista el perfil de su creador, Illyera