Rellenos, gradientes y videos en Figma

Contenido del curso

No sé dónde empezar

Introducción a Figma y Diseño Básico

Organización de Proyectos

Componentes y Estilos

Herramientas Avanzadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:23

Rellenos, gradientes y videos en Figma

Curso de Figma

Clase 6 de 22

Clase 6 / 22

Recursos

Diseñar interfaces en Figma va más allá de arrastrar formas: el verdadero salto ocurre cuando dominas los rellenos, las gradientes y la organización inteligente de objetos. Aquí aprendes a darle vida a tus frames usando colores HSB, imágenes con plugins y videos como fondo, todo aplicado a una pantalla de splash real.

¿Cómo organizar objetos automáticamente en Figma?

Cuando duplicas varios rectángulos sin cuidar la alineación, ordenarlos uno por uno se vuelve tedioso. Figma tiene un atajo poderoso para resolverlo.

Al seleccionar varios elementos con estructura modular, aparece un pequeño botón en la parte inferior de la selección que activa el organizador inteligente. Este distribuye tus objetos con distancias iguales, marcadas en rosado, mostrando los valores exactos de separación, por ejemplo 28 puntos horizontales y 47 verticales [1:00].

Desde ahí puedes:

Modificar el padding horizontal y vertical arrastrando los puntos rosados.
Mover un solo elemento dentro del grupo y mantener la coherencia espacial del resto.
Reubicar objetos sin reorganizar manualmente, ideal para botones, íconos o textos repetitivos.

¿Qué hace el organizador inteligente de Figma? Detecta la estructura modular de tu selección y aplica espaciado uniforme entre objetos. Te permite mover elementos individuales sin romper la distribución del grupo.

¿Cuáles son los tipos de relleno en Figma?

Un objeto en Figma puede tener cuatro tipos de relleno y hasta varios apilados al mismo tiempo. Conocerlos te ahorra horas de trabajo.

Relleno sólido y el modo HSB

En la barra de propiedades a la derecha, sobre la sección Fill, al hacer clic en el color se abre un pop-up con todas las opciones [2:30]. La primera es el relleno sólido.

Una recomendación clave para diseño de interfaces: no escojas colores en hexadecimal o RGB. Usa HSB (hue, saturation, brightness), que aparece como última opción. Este modo te permite entender:

Hue: la gama del color en la barra inferior.
Saturation: qué tan saturado está, mayor a la derecha y menor a la izquierda.
Brightness: la cantidad de luz, mayor hacia arriba y menor hacia abajo.

Cuando seleccionas varios objetos con colores distintos, Figma indica que no comparten el mismo fill. Al presionar el botón de más, reemplazas el relleno de todos por uno solo. Si quitas un objeto de la selección con shift, el cambio aplica únicamente a los restantes.

Gradientes lineales y radiales

Las gradientes se manejan con dos puntos: uno de origen y otro de destino, y la dirección define cómo se transita entre ellos [4:30]. Puedes cambiar de gradiente lineal a radial, que expande el color desde un centro como si fuera un círculo, perfecto para fondos de pantalla.

También puedes agregar pasos intermedios haciendo clic en la mitad de la barra de gradiente, creando un stop nuevo con un color diferente, por ejemplo un azul entre dos tonos.

Imágenes y videos como relleno

Un mismo objeto puede tener varios rellenos apilados, por ejemplo un color gris debajo de una imagen. Para reemplazar la imagen puedes subirla desde el computador con upload from computer, o usar un plugin.

El plugin recomendado es Unsplash, una base de fotos sin regalías [6:50]. Se busca en el menú Plugins and widgets en la barra inferior. Al abrirlo, en la pestaña presets eliges un tema como nature, y con tus rectángulos seleccionados, el plugin rellena cada uno con una imagen distinta automáticamente.

El cuarto tipo de relleno es video. En la pestaña video puedes cargar un archivo desde sitios como pexels.com y elegir el modo fill para ajustarlo al objeto. Como el video no se reproduce en el canvas, debes entrar al modo prototipo seleccionando el frame y presionando shift + espacio para previsualizarlo corriendo de inicio a fin [8:30].

¿Cómo pongo un video como fondo en Figma? Selecciona el objeto, ve a Fill, elige la pestaña video y carga el archivo. Para verlo reproducido, presiona shift + espacio sobre el frame.

¿Cómo crear una pantalla de splash en Figma?

La pantalla de splash es la primera vista que aparece al abrir una app. Para el reto del curso de la app Apata, se construyen dos versiones: una con gradiente y otra con video en overlay.

Para la versión con gradiente:

Pega el logotipo de Apata en el centro del frame.
Cambia el relleno del frame de sólido a gradiente.
Ajusta el color superior a uno más oscuro y elige el modo radial.
Amplía el radio del color principal por fuera del frame para un efecto más interesante.
Agrega un stop intermedio haciendo clic en la mitad de la barra para suavizar la transición.

Para la versión con video:

Trae un objeto con video aplicado y agrándalo hasta enfocar la zona visual clave, en este caso una catarata.
Coloca encima un rectángulo negro del mismo tamaño del frame.
Baja la opacidad de ese rectángulo al 40% o 50% usando shift + flecha arriba para que el logo resalte sobre el video.
Pega el logo dentro del frame para completar la composición.

Con estas dos versiones puedes comparar cómo se ve un splash estático con gradiente frente a uno dinámico con video oscurecido.

¿Cuál de las dos opciones aplicarías en tu próximo proyecto? Cuéntalo en los comentarios.