Organización de Assets para Proyectos Web

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.

¿Cómo descargar los assets?

Lo primero es entrar al prototipo del proyecto en Figma.

• 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.