Dominar las propiedades visuales de cada capa en Figma es fundamental para construir interfaces atractivas y funcionales. Comprender cómo funcionan el relleno, los bordes y los efectos te permite transformar rectángulos simples en tarjetas con personalidad, fondos con video y composiciones que transmiten profesionalismo.
¿Cuáles son las tres propiedades visuales de cada capa en Figma?
Cada capa dentro de Figma posee tres categorías de propiedades visuales que puedes gestionar desde el panel derecho [0:28]: fill (relleno), stroke (trazo o borde) y efectos. Estas propiedades son la base para definir la apariencia de cualquier elemento, desde un simple rectángulo hasta una tarjeta completa de dashboard.
El fill ofrece múltiples modos de relleno que se adaptan a distintas necesidades de diseño. Al hacer clic en la sección de relleno aparecen varias opciones que vale la pena conocer en detalle.
¿Cómo funcionan los modos de relleno sólido y degradado?
- Relleno sólido: asigna un color plano que puedes seleccionar desde la paleta cromática, mediante un valor hexadecimal o cambiando el modo de color a HSB [0:50].
- Degradado: permite agregar una cantidad ilimitada de puntos de color a lo largo de una línea que se extiende incluso más allá del elemento seleccionado [1:10]. Si tienes experiencia con herramientas como Adobe Illustrator, el comportamiento te resultará familiar.
- Puedes ajustar la opacidad individual de cada punto del degradado; por ejemplo, colocar el inicio al 40 % genera una transparencia parcial [1:35].
- Existen varios tipos de degradado: linear, radial, angular y diamante, cada uno con un efecto visual distinto según el contexto [1:45].
¿Qué es el modo de patrones en Figma?
El modo de patrones resulta muy útil porque permite usar otro elemento de Figma como fuente de relleno [2:02]. Al seleccionar una capa que ya contiene un degradado, esta se replica como textura dentro del nuevo elemento. No se duplica el degradado: se referencia directamente al original.
- Si renombras la capa de origen, el nombre se actualiza en el panel de patrones [2:25].
- Puedes ajustar la escala, el espaciado y la alineación del patrón para lograr efectos de zona o mosaico [2:40].
- El modo de mosaico admite disposición en grid o hexagonal, con control sobre la dirección [2:52].
¿Cómo agregar imágenes y videos como relleno?
El modo imagen permite cargar archivos desde tu computadora, generar imágenes con inteligencia artificial integrada en Figma o recurrir a plugins [3:10]. Un plugin muy práctico es Unsplash, un banco de imágenes gratuitas organizadas por categorías que se instala desde la sección de acciones [3:22].
Una vez cargada la imagen puedes controlar si abarca toda la caja o se adapta proporcionalmente. Las opciones incluyen fill, fit, crop y tile [3:50]. También dispones de controles básicos de edición como exposición y contraste [4:05].
El modo video funciona de forma similar: cargas el archivo, visualizas un thumbnail de previsualización y ajustas el estilo de relleno [4:15]. El video no se reproduce en el lienzo de diseño, sino que necesitas el modo prototipo para verlo en acción con el botón de play [4:35].
Un truco interesante consiste en combinar varios rellenos y reordenarlos. Si un video tiene opacidad al 100 % y el contraste con el texto es pésimo, puedes colocar un relleno sólido encima con opacidad del 90 % para lograr una versión mucho más sutil [5:05].
¿Cómo funcionan el stroke y el drop shadow en tarjetas UI?
El stroke añade un borde al elemento para mejorar la separación visual respecto al fondo. En casos de alto contraste, conviene elegir un color tenue que defina el límite sin ser agresivo [5:30].
Dentro de los efectos, el más utilizado es el drop shadow [5:45]. Sus parámetros son:
- Posición X: desplaza la sombra en horizontal.
- Posición Y: desplaza la sombra en vertical.
- Blur: controla la difuminación de la sombra.
- Spread: define el peso o extensión que ejerce la sombra alrededor del elemento [6:00].
- Color y opacidad: permiten personalizar el tono exacto de la sombra.
Figma también ofrece otros efectos como blur general, background blur, ruido o textura, y el efecto de glass típico de iOS [5:50].
Aplica estos ajustes de relleno, borde y sombra en todas las tarjetas del dashboard para mantener coherencia visual. Además, prueba agregar una imagen de recibo en el detalle de la transacción para practicar el uso de imágenes como relleno. ¿Qué combinación de propiedades te parece más efectiva para tus diseños? Comparte tu experiencia.
