7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Figma

Consejos para Imágenes en Figma

Scroll to top
Read Time: 2 mins
This post is part of a series called Figma Tips and Tricks.
Figma Properties Tips
Figma Vector Tips

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

Figma ofrece una gama de atajos y controles para importar imágenes, colocarlas en el lienzo, y modificarlas una vez que están en su posición. ¡Veamos!

Mira los Consejos

1. Usa los Parámetros de Relleno en Imágenes para Controlar el Tamaño

Cuando colocas una imagen en Figma, se crea un rectángulo, luego la imagen se establece como el relleno de fondo de ese rectángulo. Para modificar como se muestra la imagen, dirígete a las propiedades de relleno del rectángulo en el panel Properties (Propiedades).

La manera en que podemos controlar como se muestra una imagen de fondo es por CSS, aquí podemos indicar que la imagen debería:

  • Rellenar: la imagen se corta horizontal o verticalmente para que completamente cubra el objeto.
  • Encajar: toda la imagen es visible, lo que a menudo deja un área del rectángulo sin llenar.
  • Cortar: donde la imagen realmente se estira con el tamaño del rectángulo.
  • Fomar Mosaico: la imagen forma mosaicos para cubrir el rectángulo. El tamaño de los mosaicos puede cambiarse por medio de un secundario conjunto de manejadores para redimensionar.
Use Fill Settings on Images to Control SizeUse Fill Settings on Images to Control SizeUse Fill Settings on Images to Control Size
Usando las propiedades de relleno de Figma para cambiar la manera en que la imagen es mostrada

2. Importar Conjuntos Completos de Imágenes

Para importar un completo conjunto de imágenes puedes arrastrar y soltar un directorio en el lienzo de Figma, luego todas las imágenes serán importadas automáticamente por tí.

Import Whole Sets of Images in FigmaImport Whole Sets of Images in FigmaImport Whole Sets of Images in Figma

3. Importar y Colocar Múltiples Imágenes

Para mantener la importación de imágenes por lotes más organizada, primero configura algunos marcos donde quisieras mostrar tus imágenes, luego pulsa (CMD o CTRL) + MAYÚSCULAS+K, haz click en algún lugar del lienzo para comenzar el proceso, luego selecciona todas las imágenes necesarias en el seleccionador de archivo que aparece.

Luego puedes hacer click en el lienzo, una vez por cada imagen, colocándolas exactamente donde quieres que vayan. En la captura de pantalla de abajo verás desde el cursor del mouse que todavía hay dos imágenes para colocar.

Import and Place Multiple Images with FigmaImport and Place Multiple Images with FigmaImport and Place Multiple Images with Figma
Dos imágenes quedan por colocar.

Recursos para Aprender Figma

Esos fueron algunos consejos para trabajar con imágenes en Figma. Para ayudarte a llevar las cosas al siguiente nivel tenemos una serie de cursos de Figma en Tuts+.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.