Cómo añadir iconos en Figma

Aprende a añadir iconos en Figma usando plugins, subidas de SVG y bibliotecas de diseño. Una guía paso a paso para mejorar tus diseños de interfaz de usuario con iconos personalizados y prediseñados.

Vídeos y documentación de producto con IA al instante a partir de grabaciones de pantalla en bruto

Empieza gratis

Uso de complementos de iconos:

Instala un complemento: Ve a "Complementos" en el menú de Figma,
selecciona "Explorar todos los complementos..." y busca el complemento de iconos que desees (por ejemplo, Iconify, Material Design Icons, Font Awesome).
Instala el complemento: Haz clic en "Instalar" para añadirlo a tu archivo de Figma.
Explora y añade: Ejecuta el complemento (clic derecho -> Complementos -> [Nombre del complemento]), explora la biblioteca de iconos y haz clic para importar o arrastra y suelta el icono en tu lienzo.
Personaliza: Al igual que los SVG importados, puedes personalizar los iconos del complemento según sea necesario.
Ejemplo: Usando Material Design Icons: Abre el complemento Material Design Icons, busca un icono (por ejemplo, "home") y haz clic para añadirlo a tu diseño.

Guía paso a paso: Cómo añadir iconos en Figma

Paso 1

Selecciona la opción "Acciones".

Paso 2

En la consola de búsqueda, escribe "Iconify" para encontrar el complemento necesario.

In the search console, enter "Iconify" to find the necessary plugin.

Paso 3

Después de que aparezcan los resultados de la búsqueda, haz clic en la opción "Iconify".

After the search results appear, click on the "Iconify" option.

Paso 4

Luego selecciona el icono,

Paso 5

Haz clic en la opción "Importar como componente".

Click the "Import as a component" option.

Paso 6

Ahora verás el icono añadido a tu marco. Ajusta el icono según sea necesario para cumplir con las especificaciones de tu proyecto.

You will now see the icon added to your frame. Adjust the icon as necessary to meet your project specifications.

Consejos profesionales para añadir iconos en Figma

Usa los complementos de iconos integrados
Figma tiene varios complementos gratuitos como “Iconify”, “Feather Icons” y “Material Design Icons”. Para usarlos, ve a la barra de menús, haz clic en “Resources”, selecciona la pestaña “Plugins” y busca el complemento de iconos que desees. Una vez instalado, puedes arrastrar y soltar iconos directamente en tu diseño.
Copia iconos de bibliotecas externas
Puedes visitar bibliotecas de iconos gratuitas como Font Awesome o Google Material Icons, luego copiar las versiones SVG de los iconos y pegarlas en tu archivo de Figma. Esto es útil cuando necesitas iconos específicos de una marca o universalmente reconocidos.
Importa archivos SVG
Si tienes iconos guardados como archivos SVG en tu ordenador, puedes importarlos en Figma simplemente arrastrándolos al lienzo. Figma conservará la calidad vectorial y permitirá redimensionarlos y ajustar su color fácilmente.
Usa componentes para mantener la coherencia
Convierte los iconos que uses con frecuencia en componentes. De esta manera, si alguna vez necesitas actualizar uno, se actualizará automáticamente en todas las instancias de tu diseño.
Organiza los iconos en una biblioteca
Crea una biblioteca compartida de componentes de iconos para tu equipo. Esto fomenta la coherencia y ahorra tiempo al hacer que los iconos de uso común estén accesibles desde una ubicación central.

Errores comunes y cómo evitarlos

No convertir a contornos
Algunos iconos pegados desde fuentes externas podrían no ser editables. Haz clic derecho sobre el icono y selecciona “Outline Stroke” o “Flatten” para convertirlos en formas editables.
Usar demasiados estilos
Evita mezclar distintos estilos de iconos (por ejemplo, relleno, contorno, duotono) en un mismo diseño. Mantén un solo estilo en todo el proyecto para lograr coherencia visual.
Importar imágenes de baja calidad
Usa siempre formatos SVG o vectoriales en lugar de PNG o JPG para mantener la nitidez a cualquier tamaño.
Escalar sin mantener pulsado Shift
Al redimensionar iconos, mantén pulsado Shift para conservar las proporciones y evitar la distorsión.
Olvidar nombrar las capas
Nombra siempre tus capas o componentes de iconos de forma clara. Ayuda a la organización y facilita la búsqueda, especialmente en archivos de diseño más grandes.

Preguntas frecuentes comunes sobre cómo añadir iconos en Figma

¿Puedo personalizar el color de los iconos en Figma?
Sí, si el icono es un vector (SVG), puedes cambiar fácilmente su color de relleno y de trazo en el panel de propiedades de la derecha.
¿Los plugins cuestan dinero?
La mayoría de los plugins de iconos, como Iconify, son gratis. Algunos plugins avanzados pueden incluir funciones de pago, pero las bibliotecas básicas de iconos suelen estar disponibles sin coste.
¿Puedo usar mis propios iconos personalizados?
Sí, puedes importar tus propios diseños de iconos en Figma subiéndolos o arrastrándolos a tu archivo.
¿Cómo mantengo la coherencia de los iconos en todo un proyecto?
Usa componentes y estilos. Crea un sistema de diseño en el que todos los iconos se basen en las mismas reglas de tamaño, grosor y color.
¿Puedo animar iconos en Figma?
Puedes aplicar transiciones básicas usando las funciones de prototipado de Figma, pero para animaciones avanzadas quizá necesites herramientas como Figmotion o exportar los iconos para usarlos en aplicaciones externas.
¿Cómo grabar la pantalla en un 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 locución y añadir zoom de acercamiento y alejamiento en el vídeo. Con la función de traducción de vídeo con IA de Trupeer, puedes traducir el vídeo a más de 30 idiomas.
¿Cómo añadir un avatar de IA a una grabación de pantalla?
Para añadir un avatar de IA a una grabación de pantalla, tendrás que 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 vídeos con varios avatares y también te ayuda a crear tu propio avatar para el vídeo.
¿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, locución, traducción, etc.
¿Cómo añadir una locución a un vídeo?
Para añadir locución a vídeos, descarga la extensión de Chrome de Trupeer AI. Una vez registrado, sube tu vídeo con voz, elige la locución deseada de Trupeer y exporta tu vídeo editado.
¿Cómo hago zoom en una grabación de pantalla?
Para acercar la imagen durante una grabación de pantalla, usa los efectos de zoom de Trupeer AI, que te permiten acercar y alejar en momentos específicos, mejorando el impacto visual de tu contenido de vídeo.