Cómo exportar un archivo SVG desde Figma

Aprende a exportar archivos SVG desde Figma con precisión. Sigue esta sencilla guía para descargar recursos vectoriales y usarlos en proyectos web, de diseño o de desarrollo.

Crea vídeos y documentación de producto impactantes con IA

Este tutorial se creó con Trupeer en menos de 5 minutos

Crea gratis

Pasos en detalle:

1. Selecciona los elementos: Elige el marco, grupo u objetos individuales específicos que deseas exportar como un SVG.
2. Localiza la sección de Exportar: Encuentra la sección "Exportar" en la barra lateral derecha de la interfaz de Figma.
3. Elige el formato: Haz clic en el botón "+" junto a "Exportar" para añadir un ajuste de exportación. Luego, selecciona "SVG" en el menú desplegable de formatos.
4. Exporta el archivo: Haz clic en el botón "Exportar" y elige dónde guardar el archivo SVG en tu ordenador.

Guía paso a paso: Cómo exportar un archivo SVG desde Figma

Paso 1

Selecciona la capa específica que deseas convertir en un archivo SVG.

Select the specific layer you wish to convert into an SVG file.

Paso 2

Haz clic en el icono de suma para continuar.

Paso 3

Haz clic en este menú desplegable,

Paso 4

Selecciona el formato SVG para tu archivo.

Consejos profesionales para exportar un archivo SVG desde Figma

Selecciona el objeto o marco
Haz clic en el objeto, icono o marco específico que deseas exportar como SVG. Asegúrate de que solo esté seleccionado el elemento deseado.
Ve a la sección de exportación en la barra lateral derecha
En la barra lateral derecha, desplázate hacia abajo para encontrar la sección “Exportar”. Es posible que tengas que expandirla si está contraída.
Haz clic en el icono “+” para añadir una configuración de exportación
Haz clic en el “+” junto a la etiqueta de exportación para activar las opciones de exportación del objeto o marco seleccionado.
Elige “SVG” en el menú desplegable de formato
En el menú desplegable del formato de exportación, selecciona “SVG” de la lista de formatos disponibles (PNG, JPG, PDF, SVG, etc.).
Haz clic en el botón “Exportar”
Después de seleccionar SVG, haz clic en el botón “Exportar [Nombre de la capa]”. Figma generará y descargará el archivo SVG en tu ordenador.

Errores comunes y cómo evitarlos

El SVG exportado no funciona correctamente
Si el SVG tiene efectos como desenfoques o fuentes no compatibles, puede que no se renderice correctamente. Simplifica el diseño antes de exportarlo.
El archivo se exporta como PNG u otro formato
Comprueba siempre que “SVG” esté seleccionado en el menú desplegable de formato. De forma predeterminada, puede mostrar PNG.
Elementos no deseados incluidos en la exportación
Asegúrate de seleccionar solo lo que quieres exportar. Usa grupos o marcos para aislar el objetivo de exportación.
Pérdida de calidad en el SVG exportado
Como SVG se basa en vectores, los problemas de calidad son raros, pero usa vectores aplanados y evita imágenes rasterizadas complejas dentro de tu archivo.
Tamaño del archivo SVG demasiado grande
Limpia las capas y rutas no utilizadas. Convierte el texto en contornos si es necesario para reducir el tamaño del archivo.

Preguntas frecuentes comunes sobre exportar SVG desde Figma

¿Cómo exporto un archivo SVG en Figma?
Selecciona el objeto o marco, ve a la barra lateral derecha, agrega una configuración de exportación, elige SVG como formato y luego haz clic en Exportar.
¿Puedo exportar varios SVG a la vez?
Sí, selecciona varios marcos o componentes y aplica la configuración de exportación a cada uno antes de exportarlos todos a la vez.
¿Mi texto seguirá siendo editable en el SVG?
De forma predeterminada, sí. Si quieres garantizar la compatibilidad, convierte el texto en contornos antes de exportarlo.
¿Cuál es la ventaja de usar SVG en lugar de PNG?
Los archivos SVG son escalables, ligeros y mantienen la calidad a cualquier resolución. Son ideales para iconos y recursos de interfaz.
¿Puedo usar el SVG exportado en un sitio web?
Sí, los SVG exportados desde Figma están listos para la web y pueden incrustarse directamente en HTML o usarse como recursos de imagen.
¿Cómo grabar la pantalla en Mac?
Para grabar la pantalla en un Mac, puedes usar Trupeer AI. Te permite capturar toda la pantalla y ofrece capacidades de IA como añadir avatares de IA, añadir voz en off y agregar zoom in y zoom out en el video. Con la función de traducción de video con IA de Trupeer, puedes traducir el video a más de 30 idiomas.
¿Cómo agregar un avatar de IA a una grabación de pantalla?
Para agregar un avatar de IA a una grabación de pantalla, necesitarás usar una herramienta de grabación de pantalla con IA. Trupeer AI es una herramienta de grabación de pantalla con IA, que te ayuda a crear videos con múltiples avatares y también te ayuda a crear tu propio avatar para el video.
¿Cómo grabar la pantalla en Windows?
Para grabar la pantalla en Windows, puedes usar la Barra de juegos integrada (Windows + G) o una herramienta avanzada de IA como Trupeer AI para funciones más avanzadas como avatares de IA, voz en off, traducción, etc.
¿Cómo añadir voz en off a un vídeo?
Para añadir voz en off a los videos, descarga la extensión de Chrome de trupeer ai. Una vez registrado, sube tu video con voz, elige la voz en off deseada de trupeer y exporta tu video editado.
¿Cómo hago zoom en una grabación de pantalla?
Para acercar durante una grabación de pantalla, usa los efectos de zoom en Trupeer AI, que te permite acercar y alejar en momentos específicos, mejorando el impacto visual de tu contenido de video.