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!
