Vamos a aprender cómo descargar los recursos o assets para un proyecto desde el prototipo que nos envía el equipo de diseño, en este caso, desde Figma. Es importante que los tengamos listos al momento de crear el código para sólo tener la necesidad de agregarlos con el link.
¿Qué son los assets?
Son todos los recursos estáticos como imágenes, audio, documentos y demás que utilizaremos en nuestro proyecto.
Para descargar cualquier recurso, hacemos clic sobre él para ver sus detalles en el panel derecho.
Vamos a la pestaña ""Exportar"".
Elegimos el formato en que queremos descargar el recurso, en este caso una imagen.
En la pestaña de ""Preview"" vemos el resultado final del recurso. La imagen a descargar tiene un fondo transparente.
Damos clic en ""Exportar"".
Si un asset está conformado por muchos otros y quieres descargarlo como uno solo, debes seleccionar su grupo.
Al seleccionar el grupo sigues los mismos pasos anteriores para exportar desde el panel derecho. No olvides de revisar la vista previa para asegurarte que seleccionaste bien el grupo.
Y así hacemos con todas las imágenes y demás assets que necesitemos para nuestro proyecto. Te recomiendo descargar en .svg las imágenes que puedas, ya que este es el mejor formato para usar en la web.
Aquí te dejo el enlace a una carpeta donde están todos los assets a usar, separados en carpetas. Descarga aquí.
¿Cómo organizar nuestros assets?
¿Ya descargaste todos los reursos del proyecto? ¡Muy bien! Como desarrolladores sabemos que el orden es una cualidad muy importante en nuestro trabajo. Todos los archivos deben estar organizados dentro de la carpeta principal del proyecto.
Para este caso vamos a crear una carpeta de assets que contenga dos carpetas en las que diferenciemos muy bien cuáles vamos a usar como íconos y cuáles como imágenes.
Renombra los archivos para que te sean fáciles de recordar, eliminando espacios para evitar conflictos con el navegador al momento de interpretarlos.
Tips para organizar assets de un proyecto
Recuerda:
Es posible que todos y todas nos perdamos en algún momento de nuestro aprendizaje y es totalmente normal. Tienes a tu disposición siempre el código del proyecto en GitHub para que te guíes y lo puedas revisar en caso que lo necesites. Sin embargo, es solo eso, una guía. Intenta siempre resolver todo por tu cuenta primero, ya que es la única manera en que realmente puedas crecer en el mundo de la tecnología, practicando.
Contribución creada por: José Miguel Veintimilla (Platzi Contributor) con aportes de Carlos David Ramírez Gómez.
Los assets son todos los recursos estáticos que utilizaremos en nuestro proyecto, tales como:
Imágenes
Logotipos/Isotipos (Si el logotipo y el nombre de la empresa/marca se encuentran en elementos separados, es preferible descargarlos agrupados)
Íconos
PRO TIP: podemos descargar varios assets simultáneamente. Solo debemos seleccionar varios elementos, presionando CTRL + Clic sobre el elemento, y luego presionamos Export seleccionamos el formato, ¡y Listo! nuestros assets se descargaran en un archivo .zip
Clasificamos los assets según el tipo de recurso (imagen, ícono, etc…), además es recomendble que sigamos un estándar para nombrar nuestros archivos (nombre corto, desciptivo, en minúsculas, sin espacios) .
Finalmente la estructura de carpetas de nuestro proyecto debería quedar de esta forma:
Para los que hacen el proyecto en un repositorio de Git, como no es recomandable poner binarios directamente en tu proyecto, pueden subir sus imagenes acá. Espero les sirva!
Encontré que hay iconos que solo cambia su rotación, hay que evitar que el sitio se sature en descargar imagenes y lo que se pueda remplazar con CSS implementarlo.
En este caso para rotar una imagen usaremos:
.miImagen{
transform: rotate(-10deg);
}
Donde el valor positivo gira a la derecha, el negativo a la izquierda seguido por un numero que indica los grados de rotación con s prefijo deg.
Recuerden usar .svg para las imágenes que no contengan tantos detalles o colores, mientras que los .png sirve por ejemplo para la foto de la mujer dentro del diseño de Batatabit ya que tiene un cierto número de detalles aunque maneje principalmente tonos naranjas.
Pues si no estoy mal, el profesor en el curso de html y css recomendó que para fotografías el mejor formato es jpg y es una categoría lossy por tal motivo se carga mas rápido, sin embargo este no tiene que pasar los 70 KB, mejore el tamaño de las imagenes por tinypng y este es el resultado
Recomiendo que descarguen el programa PowerToys para desplegar la vista rpevia de los archivos SVG (Scalable vector graphics), PDF (Portable Document Format) y MD (MarkDown; el de los readmes). Es de Microsoft, está en GitHub bajo la licencia MIT y es fácil de usar, sólo siguen al mago instalador y abren la aplicación, buscan, dentro de PowerToys, el menú del explorador de archivos, y le dan los ajustes que digo. Les será útil ;)
Observación:
Un SVG es un archivo que nos da una serie de instrucciones para construir una imagen basada en vectores. Para esto, se requieren formas simples que al componerlas, tendremos como resultado una imagen basada en formulas matemáticas.
Si vemos Group19.svg, no hay problema, por que en su forma tiene un texto y varios grupos con formas simples. Como resultado vamos a obtener vectores. Sin embargo, el elemento Bitcoin es una imagen png, y te puedes dar cuenta por que Figma te muestra el ícono de imagen en vez de el ícono que utiliza para las formas.
Cuando el algoritmo de Figma lo procese, lo va a convertir en una imagen en código binario y la va almacenar en la estructura del SVG. Pero no la va a transformar en vectores. Por lo tanto, no hay garantía que el escalado quede bien. Ya que la imagen estará sujeta a la dimensión de sus píxeles. Si se hace mucho zoom, se va a poder ver pixelada.
