Cuando la imagen ya está en Figma
Figma tiene una función llamada Remove background. En Figma Design, selecciona la imagen y busca esa opción en la barra de herramientas secundaria. El acceso depende del plan y de los permisos; la guía enlazada indica los requisitos actuales.
Si la función está disponible y el resultado te sirve, sigue en el mismo archivo. No hace falta sacar la imagen de Figma para volver a importarla. Revísala sobre el color de relleno del marco antes de dedicar tiempo a la composición.
Cuando la referencia sigue abierta en Chrome
ClickCutout resulta útil mientras eliges entre imágenes web que puedes reutilizar. Permite el acceso a imágenes, inicia sesión con Google y selecciona PNG. La extensión entrega un archivo o una imagen en el portapapeles; no crea un componente de Figma ni una conexión sincronizada con la página del producto.
- Abre la versión grande de la imagen en su página de origen.
- Haz clic derecho, abre ClickCutout y elige Copiar.
- Selecciona la zona de destino en tu archivo editable de Figma y pega. Si el navegador o el editor no acepta la imagen, descarga el PNG.
- Inserta el archivo con las opciones de importación de imágenes de Figma o arrástralo al lienzo.
Compara dos fotos en la misma cabecera
Imagina la primera sección de una tienda de zapatos. Coloca el título, el botón y el fondo, y después añade un zapato recortado junto al texto. Duplica el marco y sustituye la imagen por otra tomada desde un ángulo distinto. Mantén el texto y los espacios para que la comparación se centre en la foto.
Observa hacia dónde apunta la puntera, cuánto espacio visual ocupa el zapato y si se acerca demasiado al botón. Iguala el tamaño del objeto visible, no solo el ancho de la imagen. Los márgenes transparentes pueden ser diferentes. Conserva las proporciones al redimensionar.
Prueba el diseño estrecho y el color de fondo
Coloca también el recorte en la versión móvil. Quizá necesites otra posición u otro ángulo si el producto queda diminuto o desplaza demasiado el texto hacia abajo. Quitar el fondo no recupera un talón o una manga que faltaban en la fotografía original.
Revisa los bordes sobre un fondo claro y otro oscuro. Si aparece un rectángulo blanco, comprueba si pertenece a la imagen, a una forma adicional o al marco de detrás. Vuelve a insertar el PNG transparente descargado si se ha perdido la transparencia al pegar. Un halo pegado al contorno requiere corregir el borde o buscar una fuente mejor.
Guarda la fuente con el diseño aprobado
Pon nombre a la capa y conserva el enlace original en las notas del diseño. La siguiente persona podrá confirmar la versión del producto o sustituir una referencia por una imagen aprobada. Guarda también un archivo transparente para futuros cambios de composición.
ClickCutout conserva las dimensiones de la imagen que recibe. No convierte una miniatura pequeña en una gran imagen nítida. Para publicar la web, prepara el tamaño y el formato definitivos dentro del proceso habitual del sitio y comprueba la imagen en la página real.
