Introducción

Editado 2 hace meses por ExtremeHow Equipo Editorial

BocetoExportarRecursosRebanadasDesarrolloDiseño WebMóvilRecursosHerramientas

Sketch es una herramienta de diseño popular utilizada por diseñadores de UI/UX para crear diseños hermosos y funcionales. Una característica esencial de Sketch es su capacidad para exportar activos y secciones, lo cual es crucial para que los desarrolladores de frontend implementen diseños en aplicaciones web o móviles funcionales. Esta guía detallada tiene como objetivo proporcionar información detallada sobre cómo exportar activos y secciones en Sketch para el desarrollo. Cubriremos lo básico y luego discutiremos temas más avanzados, asegurándonos de que tengas toda la información que necesitas para exportaciones de activos exitosas.

Importancia de exportar activos

Antes de adentrarnos en el cómo, es importante entender por qué exportar activos y secciones es crucial en el flujo de trabajo de diseño a desarrollo. Los activos pueden incluir iconos, imágenes, botones y otros elementos gráficos que forman parte visual de un producto digital. Exportar estos elementos en el formato y la resolución correctos garantiza que los desarrolladores puedan implementarlos sin problemas en el proyecto, manteniendo la consistencia y calidad.

Configuración de tu archivo Sketch

Antes de poder exportar activos, necesitas asegurarte de que tu archivo de diseño esté bien organizado. Esto incluye nombrar tus capas con precisión y agruparlas lógicamente. Este paso no solo te es útil a ti, sino también a tu equipo de desarrollo, ya que proporciona claridad y reduce la confusión.

Aquí hay algunas pautas básicas para configurar tu archivo Sketch:

• Nombre tus capas: Cada capa en tu archivo Sketch debe tener un nombre descriptivo. Esto facilita que los desarrolladores identifiquen qué propiedad corresponde a qué parte del código.
• Usa grupos: Agrupa capas relacionadas. Por ejemplo, si tienes un botón con texto, agrúpalos para que puedan exportarse como una sola unidad si es necesario.
• Organiza páginas: Si tu archivo Sketch tiene múltiples pantallas, divídelo en varias páginas. Esto mantiene tu archivo limpio y reduce el desplazamiento.

Creando secciones

¿Qué son las secciones?

Las secciones en Sketch te permiten definir áreas específicas de tu diseño que deseas exportar. Se pueden adaptar a tus necesidades, asegurando que solo las partes necesarias de tu diseño se exporten, minimizando los tamaños de archivo y reduciendo la complejidad de las entregas de diseño.

Cómo crear secciones:

Crear secciones en Sketch es muy fácil. Aquí hay una sencilla guía paso a paso:

1. Selecciona el menú Insertar ubicado en la esquina superior izquierda de la interfaz de Sketch.
2. Selecciona la opción Sección del menú desplegable.
3. Haz clic y arrastra sobre el lienzo para crear un rectángulo. Este rectángulo define los límites de la sección. Puedes ajustar su tamaño arrastrando sus bordes o ingresando dimensiones específicas en el panel Inspector a la derecha.
4. Cambia el nombre de la sección haciendo doble clic en su nombre en el panel de Capas. Un nombre significativo ayudará a distinguir la sección durante la exportación.

Exportación de activos

Una vez que tengas configuradas las secciones o si estás exportando capas individuales, puedes proceder a exportar tu activo. Exportar implica elegir el formato y la resolución correctos para tus necesidades.

Elegir el formato correcto:

El formato que elijas depende de cómo quieras usar el activo. Aquí hay una breve descripción de los formatos más comunes:

• PNG: Ideal para imágenes que requieren transparencia. Es un formato sin pérdida, lo que significa que no comprometerá la calidad de la imagen.
• JPG: Bueno para imágenes sin transparencia y cuando el tamaño del archivo es una consideración. Sin embargo, es con pérdida, lo que significa que puede perderse algo de calidad durante la compresión.
• SVG: El mejor para imágenes vectoriales, como logotipos e iconos. Los archivos SVG son independientes de la resolución, lo que significa que se ven claros en cualquier tamaño.
• PDF: Útil para documentos y gráficos vectoriales. Al igual que SVG, PDF también puede ser independiente de la resolución.

Etapas de exportación de activos:

1. Selecciona la capa o grupo de capas que deseas exportar.
2. Encuentra la opción Exportar en la parte inferior del panel Inspector a la derecha.
3. Haz clic en el botón + para agregar diferentes escalas y formatos. Por ejemplo, @2x o @3x para pantalla retina.
4. Especifica el formato (por ejemplo, PNG, JPG, SVG) según tu requisito.
5. Una vez que hayas agregado todas las opciones de exportación necesarias, haz clic en el botón Exportar.
6. Elige tu carpeta de destino deseada, y Sketch exportará los activos en consecuencia.

Opciones avanzadas de exportación

Sketch ofrece algunas opciones avanzadas que pueden usarse para personalizar y automatizar tu proceso de exportación.

Usando preajustes de exportación:

Sketch te permite crear preajustes de exportación. Si sueles exportar activos en la misma configuración, estos preajustes pueden ahorrar tiempo. Para crear un preajuste:

1. Configura la escala y el formato de exportación requeridos para cualquier capa.
2. Haz clic en el ícono de engranaje junto a la Configuración de Exportación y selecciona Crear Preajuste.
3. Nombre tu preajuste y se guardará para uso futuro.

Exportación por lotes:

Si necesitas exportar múltiples secciones o capas a la vez, Sketch proporciona una función de exportación por lotes:

1. Mantén presionada la tecla Shift y selecciona todas las capas o secciones que deseas exportar.
2. Una vez seleccionados, el panel de exportación mostrará opciones para todos los elementos seleccionados.
3. Configura tus opciones de exportación y haz clic en Exportar seleccionados.

Optimización de activos para desarrolladores

Al exportar activos para el desarrollo, optimizarlos es importante para asegurar el mejor rendimiento en tu aplicación:

Minimización del tamaño de archivo:

• Usa PNG para activos que requieran transparencia; de lo contrario, opta por JPG para reducir el tamaño del archivo.
• Considera usar SVG para gráficos escalables, reduciendo la necesidad de exportaciones de múltiples resoluciones.

Usando la entrega al desarrollador:

Herramientas como Zeplin y Abstract pueden cerrar aún más la brecha entre diseñadores y desarrolladores. Estas plataformas permiten una entrega más fluida al integrarse directamente con Sketch, proporcionando los atributos y medidas necesarios directamente desde los archivos de diseño.

Trabajando con capas exportables

Sketch ofrece una función llamada Capas Exportables, que automatiza el proceso de exportación para activos usados frecuentemente. Así es como puedes hacer que una capa sea exportable:

1. Selecciona una capa o grupo.
2. Haz clic en el botón Hacer Exportable debajo de las Propiedades de Capa.
3. Agrega el formato y la escala requeridos.
4. Siempre que actualices el diseño, las capas exportables se actualizarán en consecuencia y estarán listas para exportarse en cualquier momento.

Conclusión

Exportar activos y secciones de Sketch es un componente crítico del proceso de diseño y desarrollo. Al entender y usar las funciones de exportación de Sketch de manera efectiva, puedes asegurar que tus elementos de diseño sean claros, limpios y completamente preparados para el desarrollo. La planificación y organización cuidadosa al inicio de tu proceso de diseño ahorrará tiempo y mejorará la colaboración con tu equipo de desarrollo. Al aprovechar las opciones avanzadas de exportación de Sketch, los desarrolladores reciben activos en el formato y la resolución exactos que necesitan, eliminando conjeturas y asegurando una transición consistente del diseño a la implementación.

Con estas pautas y consejos, estarás bien preparado para manejar la exportación de activos y secciones en Sketch y mejorar la eficiencia y calidad de tus entregas de diseño.

  Comparte este artículo

Si encuentras algo incorrecto en el contenido del artículo, puedes solicitar una actualización