Aprende a exportar imágenes para tu web con Figma

 

Hoy te vamos a contar cómo exportar imágenes para tu web con Figma.

Si ya tienes el diseño de tu página hecho en Figma y quieres pasarlo todo a tu web este es el momento de prestar atención, porque te puedes ahorrar mucho tiempo.

Si alguna vez has tratado de subir alguna foto a tu página web y la has puesto al mismo tamaño que la tenías en tu diseño previo te habrás dado cuenta de que no se ve bien en la web. ¿Y eso porqué? te preguntarás, pues mira las imágenes para que se vean bien en la web deben ser imagen retina y eso quiere decir que debe tener el doble de tamaño que en el diseño original.

Ahora es cuando entra Figma y lo que te decía de que te va a facilitar el trabajo. En Figma cuando exportas tienes la opción de exportar la imagen a tamaño real o por el doble, triple, etc. A nosotros, en este caso, nos interesa el doble.

Debes saber que para que todo este proceso funcione, las imágenes con las que vas a trabajar tienen que ser de buena calidad. Si la calidad es baja no va a cambiar por pasarlas por Figma.

Y ahora sí, si estás listo para empezar a exportar, ¡Allá vamos!

 

PASO 1: Selecciona las imágenes

Haz clic sobre la imagen o imágenes que quieres exportar.

Puedes seleccionar solo una o todas las que tengas a la vez. Si las quieres todas en jpg al doble de tamaño, por ejemplo, ahorrarás tiempo exportándolas todas de un clic.

Si quieres exportar a diferentes tamaños o formatos las deberás exportar una a una.

 

PASO 2: Exporta las imágenes

Si ya tienes las imágenes seleccionadas, verás que en el menú de la derecha, abajo del todo te pone “Export”, haz click en el más y te aparecerán varias casillas.

 

 

La primera que pone “x1” es la que nos da el tamaño en el que exportamos. El “x1” significa que va a medir el mismo tamaño que tiene en tu diseño, el “x2” el doble, el “x3” el triple, y así sucesivamente.

La segunda casilla que pone “Suffix” es la casilla en la que puedes escribir el nombre que quieres que lleve ese archivo.

Y en la tercera casilla escoges el formato del archivo.

Nosotros queremos las fotos al doble de tamaño, por eso, vamos a escoger “x2”, en “Suffix” pondremos “amarillo”, y en el formato escogeremos JPG. Ahora solo te falta clicar en “Export”, seleccionas en que carpeta quieres guardar tus fotos ¡y ya lo tienes!

 

 

Ahora que ya tienes tus fotos retina las puedes subir a tu web.

Recuerda que cuanto mayor sea el tamaño de las cosas que subes a la web más tardará en cargar tu página. Por eso te recomendamos pasar tus imágenes por tinypng.com antes de subirlas a tu web. Tinypng permite comprimir tus imágenes jpg y png sin perder calidad.

Si quieres saber más sobre la optimización de las imágenes para tu web te dejamos este post aquí.

Como has visto es muy fácil y rápido exportar con Figma y te permite cambiar el tamaño al que exportas con un simple clic.

Esperamos que este post te sea de gran utilidad y que quieras seguir descubriendo el mundo de Figma con nosotros. Si has visto los posts que hemos ido subiendo últimamente ya te habrás dado cuenta de que es un programa sencillo de utilizar y con muchísimo potencial.

Si quieres exportar otra cosa que no sea una imagen como por ejemplo un estampado como el que te enseñamos a hacer en este post debes usar el mismo procedimiento, pero por ejemplo, si solo quieres exportar un icono lo puedes hacer en png para mantener el fondo transparente o en svg para que siga siendo vectorial y no pierda calidad. Debes escoger el formato según te vaya mejor.

A nosotros en este caso nos interesaba exportar en jpg, pero también puedes exportar en png, svg y pdf. En el caso de las imágenes, por ejemplo, no nos sirve de nada exportarlas en svg porque nunca serán vectoriales.

Aquí el tutorial ya ha terminado pero con esto ya no te tendrás que preocupar más de que las imágenes se vean mal en tu web.

¡Ya tienes todos los trucos necesarios para que tus fotos se vean a la perfección en tu página web!

¿Te está gustando lo que vas aprendiendo de Figma? ¡A nosotros nos parece una herramienta maravillosa!

Share on facebook
Share on twitter
Share on pinterest
Share on google
Share on linkedin
Share on whatsapp

MINICURSO GRATIS PARA CREAR TU PROPIA WEB CON WORDPRESS

Y dos ebooks para mejorar el diseño de tu identidad corporativa y lanzamiento de tu página web.

Deja tu comentario

Tu dirección de correo electrónico no será publicado. Los campos obligatorios están marcados como *



Existe un método muy sencillo para que consigas crear tu propia web sin necesidad de tener ni idea de programación, partiendo de un diseño web maquetado por diseñadoras, sin necesidad de pagar miles de euros para contratarlas.

Tenemos un minicurso para
crear tu propia web
paso a paso

En este curso gratuito explicamos una pequeña porción de todo lo que hemos aprendido durante nuestros años de experiencia.

Además, recibes dos ebooks adicionales para mejorar tu identidad corporativa y página web.

Existe un método muy sencillo para que consigas crear tu propia web sin necesidad de tener ni idea de programación, partiendo de un diseño web maquetado por diseñadoras, sin necesidad de pagar miles de euros para contratarlas.

Tenemos un minicurso para
crear tu propia web
paso a paso

En este curso gratuito explicamos una pequeña porción de todo lo que hemos aprendido durante nuestros años de experiencia.

Además, recibes dos ebooks adicionales para mejorar tu identidad corporativa y página web.