Cómo hacer un gráfico circular en Figma

¿Quieres visualizar datos en Figma? Aprende a crear un gráfico circular usando formas, ángulos y plugins. Una guía sencilla para crear visuales limpios basados en datos.

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

Empieza gratis

Aquí tienes un desglose más detallado:

1. Crea una elipse: selecciona la herramienta de elipse y dibuja un círculo. Puedes mantener pulsado Shift mientras arrastras para asegurarte de que sea un círculo perfecto.
2. Accede a las opciones de arco: pasa el cursor sobre el círculo y verás que aparece un punto. Haz clic y arrastra este punto para mostrar los controles del arco.
3. Ajusta el barrido y el inicio: los controles del arco te permiten ajustar el "barrido" (tamaño de la porción) y el "inicio" (ángulo inicial) del arco.
4. Crea porciones: duplica el arco inicial (porción) para crear porciones adicionales para tu gráfico circular. Ajusta los ángulos de barrido e inicio de cada duplicado para crear las proporciones deseadas.
5. Colorea las porciones: rellena cada porción con un color distinto para diferenciarlas. También puedes añadir etiquetas a cada porción usando la herramienta de texto.
6. Organiza y perfecciona: organiza las porciones y las etiquetas según sea necesario. Puedes agrupar los elementos para mantener el gráfico ordenado.

Guía paso a paso: cómo hacer un gráfico circular en Figma

Paso 1

Haz clic en la sección 'Actions'.

Paso 2

Cuando aparezca la opción de gráfico circular, simplemente haz clic en ella para seleccionarla.

When the pie chart option appears, simply click on it to select.

Paso 3

El gráfico circular aparecerá ahora en tu pantalla. Además, verás una opción 'Edit'; haz clic en ella para continuar.

The pie chart will now appear on your screen. Additionally, you will notice an 'Edit' option; click on this to proceed.

Paso 4

En este paso, personaliza el gráfico circular para satisfacer tus necesidades específicas. Introduce las etiquetas que desees y, una vez completado,

In this step, customize the pie chart to meet your specific needs. Enter any desired labels and, once complete,

Paso 5

Pulsa en cualquier parte de la pantalla para salir del modo de edición.

Tap anywhere on the screen to exit editing mode.

Paso 6

Tus cambios se aplicarán al gráfico circular.

Your changes will be applied to the pie chart.

Consejos profesionales para crear un gráfico circular en Figma

Usa la herramienta Elipse para dibujar la base
Selecciona la herramienta Elipse (O), luego haz clic y arrastra en el lienzo mientras mantienes pulsada la tecla Mayús para dibujar un círculo perfecto. Esto servirá como la base completa de tu gráfico circular.
Convierte el círculo en un arco
Con el círculo seleccionado, ve al panel de propiedades y ajusta la configuración de "Arc". Habilítala cambiando los ángulos de "Inicio" y "Fin" para crear un efecto de segmento.
Duplica para varios segmentos
Para hacer más segmentos, duplica el círculo (Ctrl/Cmd + D) y luego ajusta los ángulos del arco de cada uno para representar distintos valores de datos. Usa colores diferentes para cada segmento.
Usa matemáticas para dividir el gráfico
Si tus datos están en porcentajes, multiplica 360 (grados en un círculo) por el porcentaje para obtener el ángulo de cada segmento. Por ejemplo, 25% = 90°.
Codifica por colores para mayor claridad
Usa la herramienta Relleno para asignar colores distintos a cada segmento. Esto mejora la legibilidad y el atractivo visual.

Errores comunes y cómo evitarlos

Los arcos no están alineados correctamente
Asegúrate de que cada segmento de arco comience donde termina el anterior para evitar huecos o superposiciones. Introduce manualmente los ángulos de inicio y fin para mayor precisión.
Perder la pista de los ángulos
Etiqueta tus capas con grados del segmento o etiquetas de datos para saber qué representa cada sección.
Etiquetas de texto desalineadas
Usa guías inteligentes o centra manualmente el texto sobre cada segmento para mantener una apariencia limpia y profesional.
Los segmentos se cubren entre sí
Presta atención al orden de las capas al añadir segmentos. Trae los segmentos al frente o al fondo según sea necesario para evitar ocultar otras partes.
Proporciones inexactas
Revisa bien tus cálculos al convertir porcentajes en ángulos para garantizar una representación precisa de los datos.

Preguntas frecuentes comunes sobre gráficos circulares en Figma

¿Puedo crear un gráfico circular en Figma sin complementos?
Sí, puedes usar la herramienta Elipse y la configuración de arco para crear manualmente gráficos circulares sin ningún complemento.
¿Hay un complemento para crear gráficos circulares en Figma?
Sí, hay complementos como "Chart" o "Pie Chart Maker" disponibles para automatizar el proceso usando entradas de datos.
¿Cómo hago una porción exacta del 25%?
Multiplica 360 por 0,25 (25 %), lo que te da 90 grados. Configura el ángulo del arco para que abarque 90° para una porción perfecta del 25 %.
¿Puedo animar gráficos circulares en Figma?
Aunque Figma admite animaciones sencillas de prototipos, las animaciones complejas basadas en datos tendrían que crearse fuera de Figma.
¿Puedo exportar gráficos circulares desde Figma?
Sí, selecciona el gráfico circular, ve al panel de exportación, elige tu formato preferido (PNG, SVG, PDF) y haz clic en Exportar.
¿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 hacer zoom de acercamiento y alejamiento 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 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 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 video?
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 hacer zoom durante una grabación de pantalla, usa los efectos de zoom en Trupeer AI, que te permiten acercar y alejar en momentos específicos, mejorando el impacto visual del contenido de tu video.