Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma

Una guía rápida de los ajustes de relleno de imagen de Figma

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Ali_Trads (you can also view the original English article)

En este tutorial, aprenderás todos sobre los ajustes de relleno de imagen de Figma. Existen 4 en total, cada uno de los cuales te permite manipular la imagen de relleno de un objeto de formas diferentes. Habiendo dicho esto, ¡echemos un vistazo!

Ajustes de imagen de relleno en Figma

Esta es una versión completa en video de este práctico tutorial. Síguenos en nuestro canal Envato Tuts+ de YouTube:


Comienza con un relleno

Comenzaré creando un objeto en el artboard, luego iré a la opción Relleno (Fills), en el panel de propiedades a la derecha, y seleccionaré relleno de Imagen (Image) como en el ejemplo.

image fill

Luego, podrás subir una imagen de tu elección y tendrás 4 opciones de tipo de relleno, como:

fill type

1. Relleno (Fill)

Relleno (Fill) estará seleccionado de forma predeterminada. Esto garantiza que la imagen va a rellenar todo el objeto. Si el objeto es más ancho o alto que la imagen, esta se estirará o recortará según el objeto, pero siempre permanecerá centrada y dejará visible la mayor parte posible:

2. Ajustar (Fit)

Si cambiáramos el tipo de relleno a Ajustar (Fit) en este punto, podremos ver la imagen en el objeto contenedor, incluso si esto significa que parte del objeto no tendrá relleno.

fit

3. Recortar (Crop)

El tipo relleno Recortar (Crop) se comporta de manera similar a Fill (relleno por defecto), con la diferencia de que te ofrece herramientas de posicionamiento para personalizar el recorte por ti mismo. Como se ve en el ejemplo de abajo, podrás escalar y mover el objeto sobre la imagen como si fuera una ventana:

crop figma

Otra diferencia es que cuando redimensionas un objeto después de aplicar el tipo de relleno Recortar (Crop), la imagen se escalará junto con el objeto en ambos ejes (encogiendo y estirando la imagen de forma efectiva).

resize crop

4. Mosaico (Tile)

Es último tipo de relleno es Mosaico (Tile), el cual repite la imagen una y otra vez. Esto se demuestra mejor en la imagen de abajo, donde podemos ver una imagen con un mosaico que se repite:

tile fill figma

Tal y como puedes ver la imagen se repite infinitamente a medida que el objeto cambia de tamaño. En las opciones también podrás determinar la escala de la sección repetida.

Estos fueron todos los ajustes de relleno de Figma

¡Hoy descubriste las diferentes formas en las que puedes rellenar un objeto en Figma! Espero que hayas disfrutado esta guía práctica. No te olvides de echarle un vistazo a los recursos adicionales de Figma que aparecen a continuación.

Más consejos prácticos sobre Figma

Aprende más sobre cómo usar Figma con nuestros tutoriales escritos y nuestras guías de video:

Recursos para Figma (Gratuitos y premium)

Inspírate con estos resúmenes de paquetes de UI y UX para Figma. Gráficos, paquetes de íconos, ¡y mucho más!


Links útiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.