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

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.