Cómo crear un gráfico circular en Figma

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

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

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

Crea gratis

Aquí tienes un desglose más detallado:

1. Crear una elipse: Selecciona la herramienta de elipse y dibuja un círculo. Puedes mantener pulsada la tecla Shift mientras arrastras para asegurarte de que sea un círculo perfecto.
2. Acceder a las opciones de arco: Pasa el cursor sobre el círculo y verás aparecer un punto. Haz clic y arrastra este punto para mostrar los controles del arco.
3. Ajustar barrido e inicio: Los controles del arco te permiten ajustar el "sweep" (tamaño de la porción) y el "start" (ángulo inicial) del arco.
4. Crear 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 organizado.

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, notará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 adaptarlo a 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

Toca 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 sobre el lienzo mientras mantienes pulsada la tecla Shift 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 "Arco". Actívalo cambiando los ángulos "Inicio" y "Fin" para crear un efecto de porción.
Duplica para múltiples segmentos
Para hacer más porciones, duplica el círculo (Ctrl/Cmd + D) y luego ajusta los ángulos del arco de cada una para representar distintos valores de datos. Usa colores diferentes para cada porción.
Usa las 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 porción. Por ejemplo, 25 % = 90°.
Codifica por colores para mayor claridad
Usa la herramienta Relleno para asignar colores distintos a cada porción. 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 porción de arco empiece donde termina la 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 los grados de la porción o con etiquetas de datos para saber qué representa cada segmento.
Las etiquetas de texto no están alineadas
Usa las guías inteligentes o centra manualmente el texto sobre cada porción para mantener un aspecto limpio y profesional.
Las porciones se tapan entre sí
Presta atención al orden de las capas al añadir porciones. Trae las porciones al frente o envíalas al fondo según sea necesario para evitar ocultar otras partes.
Proporciones inexactas
Revisa tus cálculos al convertir porcentajes en ángulos para garantizar una representación precisa de los datos.

Preguntas frecuentes sobre gráficos circulares en Figma

¿Puedo crear un gráfico circular en Figma sin plugins?
Sí, puedes usar la herramienta Elipse y los ajustes de arco para crear manualmente gráficos circulares sin ningún plugin.
¿Hay un plugin para crear gráficos circulares en Figma?
Sí, hay plugins como "Chart" o "Pie Chart Maker" disponibles para automatizar el proceso usando datos de entrada.
¿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 simples 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 funciones de IA como añadir avatares de IA, añadir locución y hacer zoom y alejar 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, 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 varios avatares; además, 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 locución a un vídeo?
Para añadir locución a los 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 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 vídeo.