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 con iconos personalizados y predefinidos.

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

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

Crea gratis

Uso de plugins de iconos:

Instala un plugin: Ve a "Complementos" en el menú de Figma,
selecciona "Browse all plugins..." y busca el plugin de iconos que deseas (por ejemplo, Iconify, Material Design Icons, Font Awesome).
Instala el plugin: Haz clic en "Install" para añadirlo a tu archivo de Figma.
Explora y añade: Ejecuta el plugin (clic derecho -> Plugins -> [Nombre del plugin]), explora la biblioteca de iconos y haz clic para importar o arrastra y suelta el icono sobre tu lienzo.
Personaliza: Al igual que los SVG importados, puedes personalizar los iconos del plugin según sea necesario.
Ejemplo: Uso de Material Design Icons: abre el plugin 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 "Actions".

Paso 2

En la consola de búsqueda, introduce "Iconify" para encontrar el plugin 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 un 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 plugins de iconos integrados
Figma tiene varios plugins gratuitos como “Iconify”, “Feather Icons” y “Material Design Icons”. Para usarlos, ve a la barra de menú, haz clic en “Recursos”, selecciona la pestaña “Plugins” y busca el plugin 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 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á cambiar fácilmente el tamaño y ajustar los colores.
Usa componentes para mantener la coherencia
Convierte los iconos que uses con frecuencia en componentes. Así, 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 sean accesibles desde una ubicación central.

Errores comunes y cómo evitarlos

No convertir a contornos
Algunos iconos pegados desde fuentes externas pueden no ser editables. Haz clic derecho en el icono y selecciona “Contorno de trazo” o “Aplanar” para convertirlos en formas editables.
Usar demasiados estilos
Evita mezclar diferentes 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 en cualquier tamaño.
Escalar sin mantener pulsado Shift
Al cambiar el tamaño de los iconos, mantén pulsado Shift para conservar las proporciones y evitar deformaciones.
Olvidar nombrar las capas
Nombra siempre tus capas o componentes de iconos con claridad. Ayuda a la organización y facilita la búsqueda, especialmente en archivos de diseño 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 complementos cuestan dinero?
La mayoría de los complementos de iconos como Iconify son gratuitos. Algunos complementos avanzados pueden tener funciones de pago, pero las bibliotecas de iconos básicas suelen ser accesibles sin coste.
¿Puedo usar mis propios iconos personalizados?
Sí, puedes importar tus propios diseños de iconos en Figma cargándolos o arrastrándolos a tu archivo.
¿Cómo mantengo la coherencia de los iconos en 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, puede que necesites herramientas como Figmotion o exportar iconos para usarlos en aplicaciones externas.
¿Cómo grabar 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 narración y hacer zoom dentro y fuera del 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, 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 vídeos con múltiples avatares y también te ayuda a crear tu propio avatar para el vídeo.
¿Cómo grabar 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, narración, traducción, etc.
¿Cómo añadir narración a un vídeo?
Para añadir narración a vídeos, descarga la extensión de Chrome de trupeer ai. Una vez registrado, sube tu vídeo con voz, elige la narración deseada de trupeer y exporta tu vídeo editado.
¿Cómo acerco el zoom en una grabación de pantalla?
Para hacer zoom 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 del contenido de tu vídeo.