¿Cómo exportar y compartir tu trabajo desde Figma?

Exportar y compartir tu trabajo desde Figma significa convertir tus diseños en archivos listos para producción o en enlaces que otros pueden revisar sin necesidad de tener una cuenta.

Figma tiene herramientas de exportación muy completas. Con ellas puedes entregar íconos, pantallas, especificaciones técnicas y prototipos interactivos. Esta lección te enseña cómo hacerlo de forma profesional.

Cómo preparar tu archivo antes de exportar

Antes de exportar cualquier cosa, necesitas revisar tu archivo. Un archivo desordenado produce entregas con errores.

Revisa estos puntos antes de exportar:

• Todos los frames tienen nombre claro. Usa nombres como Inicio, Carrito, Confirmación de pago.
• Las capas están agrupadas y nombradas correctamente. Evita nombres como Rectangle 24 o Group 7.
• Los elementos que NO son parte del diseño final están en una página separada o fuera del área visible.
• Las imágenes están en resolución correcta. Para pantallas de celular, usa mínimo 375 px de ancho.

Nombrar bien tus capas es crítico. Cuando exportas un ícono llamado icono_carrito, el archivo descargado se llama icono_carrito.png. Si se llama Ellipse 12, el archivo descargado también.

Cómo exportar elementos individuales

Exportar un elemento significa convertirlo en un archivo de imagen o vector para usarlo en desarrollo o en otro programa.

Pasos para exportar:

1. Selecciona el elemento en el canvas. Puede ser un ícono, una imagen, un frame completo o un grupo.
2. Ve al panel derecho y baja hasta la sección Export.
3. Haz clic en el botón + para agregar una configuración de exportación.
4. Elige el formato: PNG, JPG, SVG o PDF.
5. Define la escala: 1x, 2x, 3x.
6. Haz clic en el botón Export [nombre del elemento].

¿Qué formato usar?

Ejemplo práctico: íconos para una app de Liverpool

Imagina que diseñas una app de compras para Liverpool. Tienes un ícono de bolsa de compras. El desarrollador necesita tres versiones para distintas densidades de pantalla.

1. Seleccionas el ícono icono_bolsa.
2. En Export, haces clic en + tres veces.
3. Configuras: 1x PNG, 2x PNG, 3x PNG.
4. Haces clic en Export icono_bolsa.
5. Figma descarga un archivo .zip con las tres versiones listas.

El desarrollador solo descomprime y usa los archivos sin modificar nada.

Cómo exportar frames completos como pantallas

Un frame exportado como imagen representa una pantalla completa de tu diseño.

Si diseñas un flujo de compra para Mercado Libre con cinco pantallas, puedes exportarlas todas juntas.

Exportación múltiple:

1. Selecciona varios frames al mismo tiempo. Usa Shift + clic para seleccionarlos.
2. En el panel de Export, agrega el formato que necesitas.
3. Haz clic en Export [número] layers.
4. Figma descarga un .zip con todas las pantallas nombradas según el nombre de cada frame.

Esto ahorra tiempo. No tienes que exportar una por una cuando tienes 20 pantallas.

Cómo usar la función de especificaciones para desarrolladores

Las especificaciones técnicas son los datos exactos de tu diseño: tamaños, colores, tipografías, márgenes y estilos CSS.

Figma genera estas especificaciones automáticamente. El desarrollador no necesita medir nada a mano.

Cómo activar el modo de inspección:

1. Comparte el enlace de tu archivo (ver sección siguiente).
2. El desarrollador abre el enlace y activa el panel Inspect en el lado derecho.
3. Al hacer clic en cualquier elemento, aparecen los datos técnicos: tamaño, color en HEX, tipografía, espaciado.

Ejemplo: especificaciones de un botón

Tienes un botón de Agregar al carrito en tu diseño para FEMSA Digital. Al hacer clic sobre él en el modo Inspect, el desarrollador ve:

• Ancho: 200 px, Alto: 48 px
• Fondo: #E8000D (rojo corporativo)
• Tipografía: Inter Bold, 16 px
• Bordes redondeados: 8 px
• Espaciado interno: 12 px arriba y abajo, 24 px a los lados

Con esos datos, el desarrollador puede reproducir el botón exactamente sin adivinar medidas.

Cómo compartir tu archivo con clientes o equipos

Compartir en Figma significa generar un enlace que otros pueden abrir en su navegador, sin instalar nada.

Tipos de enlace:

1. Enlace de edición (Editor) La otra persona puede editar el archivo. Solo compártelo con compañeros de trabajo de confianza.

2. Enlace de visualización (Viewer) La otra persona solo puede ver el diseño y dejar comentarios. Ideal para clientes.

3. Enlace de prototipo Muestra el prototipo interactivo. El cliente navega por las pantallas sin ver las capas ni el canvas.

Pasos para compartir:

1. Haz clic en el botón Share en la esquina superior derecha.
2. Elige si el enlace es para Anyone with the link (cualquiera con el enlace) o solo para personas específicas.
3. Define el permiso: Can view (solo ver) o Can edit (puede editar).
4. Copia el enlace y envíalo por correo o WhatsApp.

Ejemplo: entregar un diseño a un cliente de Bimbo

Terminas el rediseño de la sección de "Productos" del sitio de Bimbo. El cliente quiere revisar y dar comentarios.

1. Haces clic en Share.
2. Seleccionas Anyone with the link → Can view.
3. Copias el enlace y lo envías por correo.
4. El cliente abre el enlace, ve el diseño y puede dejar comentarios con el ícono de burbuja.
5. Tú recibes notificaciones de cada comentario directamente en Figma.

Nunca compartas el enlace de edición con un cliente. Podrían mover o borrar elementos por accidente.

Cómo compartir el prototipo interactivo

Compartir el prototipo es diferente a compartir el archivo de diseño.

Pasos:

1. Abre el modo Prototype en el panel derecho.
2. Haz clic en el botón ▶ (Present) en la esquina superior derecha. Figma abre el prototipo en una nueva pestaña.
3. Copia la URL de esa pestaña.
4. Envía esa URL al cliente o al desarrollador.

Con ese enlace, el receptor puede navegar por el flujo completo como si fuera una app real. No ve el canvas ni las capas.

Errores comunes al exportar y compartir

Error 1: Exportar sin revisar los nombres de capa Si tus capas se llaman Frame 1, Rectangle 23 o Group 5, tus archivos exportados tendrán esos mismos nombres. El desarrollador no sabrá qué archivo corresponde a qué pantalla.

Solución: Antes de exportar, renombra todas las capas con nombres descriptivos.

Error 2: Usar resolución 1x para todos los recursos Las pantallas modernas de celular tienen alta densidad de píxeles. Un ícono exportado solo en 1x se ve borroso en dispositivos con pantalla Retina o similares.

Solución: Siempre exporta íconos en 1x, 2x y 3x para cubrir todos los dispositivos.

Error 3: Compartir el enlace de edición con el cliente Un cliente que tiene acceso de edición puede mover elementos, borrar capas o modificar colores sin querer.

Solución: Siempre usa el permiso Can view para clientes externos.

Error 4: Exportar JPG para íconos con fondo transparente El formato JPG no soporta transparencia. Si exportas un ícono en JPG, aparecerá con fondo blanco aunque en Figma no lo tenga.

Solución: Para íconos y elementos con transparencia, siempre usa PNG o SVG.

Lo que aprendiste en todo el curso

En estas ocho lecciones cubriste todo el ciclo básico de trabajo en Figma:

1. Entendiste qué es Figma y para qué sirve.
2. Aprendiste a navegar la interfaz y el canvas.
3. Creaste y usaste frames y capas correctamente.
4. Aplicaste colores, tipografías y estilos consistentes.
5. Construiste componentes reutilizables para ahorrar tiempo.
6. Organizaste tu archivo con páginas y auto layout.
7. Conectaste pantallas con prototipos interactivos.
8. Exportaste y compartiste tu trabajo de forma profesional.

Con estas habilidades puedes trabajar como diseñador junior o colaborar con equipos de desarrollo en México.

Siguientes pasos recomendados

• Practica con un proyecto real. Rediseña la pantalla de inicio de una app mexicana que uses: Rappi, Clip, Spin, BBVA México. Aplica todo lo que aprendiste.
• Aprende a usar variables y tokens de diseño. Son el siguiente nivel en Figma para manejar colores y tipografías a escala.
• Explora Figma Community. Hay miles de archivos gratuitos de otros diseñadores. Ábrelos, analiza cómo están construidos y adápta los componentes que necesitas.
• Conecta con otros diseñadores. Comunidades como Diseño MX o grupos de UX en LinkedIn México son buenos espacios para mostrar tu trabajo y recibir retroalimentación.

Figma se aprende haciendo. Cada proyecto que termines te dará más velocidad y criterio.