Si estás listo para llevar tus diseños de Figma al siguiente nivel, ¡has llegado al lugar correcto! En este tutorial paso a paso, te guiaremos a través del proceso de exportar en Figma, una de las herramientas UX/UI más utilizadas. Aprenderás desde la selección del contenido hasta la configuración de las opciones de exportación. ¡Vamos a empezar!
Exportar en Figma: Guía
Selecciona y exporta contenido
- Selecciona tu contenido: Antes de exportar en Figma, es crucial seleccionar el contenido que deseas incluir en tu archivo exportado. En Figma, puedes seleccionar capas individuales, marcos completos, componentes en Figma específicos o incluso áreas específicas del lienzo utilizando la herramienta de selección.
- Capas individuales: Si solo necesitas exportar en Figma elementos específicos, como iconos o imágenes, selecciona las capas correspondientes haciendo clic en ellas.
- Marcos completos: Para exportar en Figma un marco completo que contiene múltiples elementos, simplemente haz clic en el marco para seleccionarlo.
- Áreas específicas del lienzo: Si solo necesitas exportar en Figma una parte específica de tu diseño, puedes utilizar la herramienta Slice para delimitar el área deseada.
- Usa la herramienta Slice: La herramienta Slice te permite crear áreas de recorte personalizadas para exportar en Figma partes específicas de tu diseño. Es especialmente útil cuando necesitas exportar en Figma secciones específicas de una pantalla o interfaz de usuario.
- Cómo usarla: Selecciona la herramienta Slice en la barra de herramientas y luego dibuja un rectángulo alrededor del área que deseas exportar en Figma. Puedes ajustar el tamaño y la posición de la rebanada según sea necesario.
- Beneficios: La herramienta Slice te permite exportar en Figma secciones específicas de tu diseño con precisión, lo que es útil para crear vistas previas detalladas o exportar partes de una interfaz de usuario para compartir con otros.
Configura las opciones de exportación
- Accede a las opciones de exportación: Después de seleccionar el contenido, dirígete a la sección de exportación en la barra lateral derecha. Dependiendo de tu nivel de acceso al archivo y del modo en el que estés trabajando, la ubicación de esta sección puede variar.
- Modo de diseño: Si tienes permisos de edición en el archivo, encontrarás la sección de exportación hacia la parte inferior de la barra lateral derecha.
- Modo de desarrollo: Si estás utilizando el Modo de Desarrollo, la sección de exportación estará en la barra lateral derecha, pero solo será visible cuando tengas un objeto seleccionado.
- Añade configuraciones de exportación: Una vez en la sección de exportación, podrás agregar diferentes configuraciones de exportación para tu selección. Estas configuraciones incluyen el formato de archivo, la escala, las dimensiones y más.
- Formato de archivo: Figma te permite exportar tu contenido en varios formatos, como PNG, SVG, JPG y PDF. Elige el formato que mejor se adapte a tus necesidades.
- Escala y dimensiones: Puedes ajustar la escala y las dimensiones de tu exportación para garantizar que tus archivos tengan el tamaño adecuado y la resolución deseada.
- Opciones avanzadas: Figma también ofrece opciones avanzadas de exportación, como la capacidad de rasterizar textos, incluir o excluir fondos, y más. Explora estas opciones para personalizar aún más tu exportación.
- Previsualiza y exporta: Antes de finalizar, asegúrate de previsualizar cómo se verá tu activo exportado utilizando la opción de vista previa. Una vez que estés satisfecho con la configuración, simplemente haz clic en el botón de exportación para generar tus archivos.
- Vista previa: Figma te permite previsualizar cómo se verá tu activo exportado antes de generar el archivo final. Utiliza esta función para asegurarte de que todo se vea como esperas.
- Exporta: Una vez que estés listo, haz clic en el botón de exportación y elige la ubicación donde deseas guardar tus archivos. Dependiendo de si estás utilizando Figma en el navegador o en la aplicación de escritorio, el proceso de exportación puede variar ligeramente.
Exporta tus diseños
- Accede al menú de exportación: Después de haber ajustado todas las configuraciones de exportación según tus necesidades, dirígete al menú de exportación para iniciar el proceso. Puedes acceder a este menú desde la barra de herramientas o desde la sección de exportación en la barra lateral derecha.
- Selecciona los activos a exportar en Figma: En el menú de exportación, verás una lista de todos los activos que has configurado para exportar. Aquí puedes revisar cada activo y asegurarte de que esté listo para la exportación. Si es necesario, puedes realizar ajustes de último minuto antes de proceder.
- Elige el método de exportación: Figma ofrece varias opciones para exportar tus activos, dependiendo de tus preferencias y necesidades específicas. Puedes exportar activos individualmente, en grupos o en conjunto, según lo que mejor se adapte a tu flujo de trabajo.
- Exportación Individual: Si solo necesitas exportar un activo específico, simplemente selecciona ese activo y elige la opción de exportación correspondiente.
- Exportación en Grupo: Si tienes varios activos que deseas exportar juntos, puedes agruparlos y exportarlos como un solo archivo. Esto es útil cuando trabajas en un proyecto con múltiples elementos relacionados.
- Exportación en Conjunto: Para proyectos más grandes o complejos, puedes exportar todos tus activos juntos como un único paquete. Esto facilita la organización y el intercambio de archivos con otros miembros del equipo.
- Completa el proceso de exportación: Una vez que hayas seleccionado tus activos y elegido el método de exportación adecuado, simplemente haz clic en el botón de exportación para iniciar el proceso. Figma generará tus archivos según las configuraciones que hayas establecido previamente.
- Proceso de exportación: Dependiendo del tamaño y la cantidad de activos que estés exportando, el proceso de exportación puede llevar algunos segundos o minutos. Mantén la paciencia mientras Figma genera tus archivos.
- Ubicación de los archivos exportados: Una vez completada la exportación, tus archivos estarán listos para ser guardados en la ubicación que hayas especificado anteriormente. Puedes encontrar tus activos exportados en la carpeta designada en tu dispositivo.
¡Ahora estás listo para llevar tus diseños de Figma al siguiente nivel como todo un UX/UI Designer! Con este tutorial, has aprendido cómo seleccionar, configurar y exportar tu contenido de forma eficiente y sin complicaciones. ¡Sigue explorando las increíbles posibilidades que ofrece Figma y sigue creando diseños asombrosos!
¿Quieres llevar tus habilidades de diseño digital al siguiente nivel? Apúntate al Bootcamp de diseño UX/UI de KeepCoding y obtén acceso a una formación de calidad impartida por expertos de la industria tecnológica. ¡Prepárate para una carrera exitosa en el mundo de la tecnología con KeepCoding!
