Como Criar um Gráfico Circular no Figma

Quer visualizar dados no Figma? Aprenda a criar um gráfico circular usando formas, ângulos e plugins. Um guia simples para criar visuais limpos e baseados em dados.

Crie vídeos e documentação de produto impressionantes com IA

Este tutorial foi criado com o Trupeer em menos de 5 minutos

Crie gratuitamente

Aqui está uma descrição mais detalhada:

1. Criar uma elipse: Selecione a ferramenta de elipse e desenhe um círculo. Pode manter premida a tecla Shift enquanto arrasta para garantir que é um círculo perfeito
2. Aceder às opções do arco: Passe o cursor sobre o círculo e verá aparecer um ponto. Clique e arraste este ponto para revelar os controlos do arco. 
3. Ajustar o varrimento e o início: Os controlos do arco permitem ajustar o "varrimento" (tamanho da fatia) e o "início" (ângulo inicial) do arco. 
4. Criar fatias: Duplique o arco inicial (fatia) para criar fatias adicionais para o seu gráfico circular. Ajuste os ângulos de varrimento e de início para cada duplicado para criar as proporções pretendidas. 
5. Colorir as fatias: Preencha cada fatia com uma cor distinta para as diferenciar. Também pode adicionar etiquetas a cada fatia usando a ferramenta de texto. 
6. Organizar e aperfeiçoar: Organize as fatias e etiquetas conforme necessário. Pode agrupar os elementos para manter o gráfico organizado. 

Guia Passo a Passo: Como Criar um Gráfico Circular no Figma

Passo 1

Clique na secção 'Actions'.

Click on the 'Actions' section.

Passo 2

Quando a opção de gráfico circular aparecer, basta clicar nela para a selecionar.

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

Passo 3

O gráfico circular irá agora aparecer no seu ecrã. Além disso, verá uma opção 'Editar'; clique nela para continuar.

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

Passo 4

Nesta etapa, personalize o gráfico circular para satisfazer as suas necessidades específicas. Introduza as etiquetas pretendidas e, quando terminar,

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

Passo 5

Toque em qualquer parte do ecrã para sair do modo de edição.

Tap anywhere on the screen to exit editing mode.

Passo 6

As suas alterações serão aplicadas ao gráfico circular.

Your changes will be applied to the pie chart.

Dicas profissionais para criar um gráfico circular no Figma

  1. Use a ferramenta Elipse para desenhar a base
    Selecione a ferramenta Elipse (O) e, em seguida, clique e arraste na tela enquanto mantém premida a tecla Shift para desenhar um círculo perfeito. Isto servirá como a base completa do seu gráfico circular.

  2. Converter o círculo em arco
    Com o círculo selecionado, vá ao painel de propriedades e ajuste as definições de "Arc". Ative-as alterando os ângulos de "Start" e "End" para criar um efeito de fatia.

  3. Duplique para vários segmentos
    Para criar mais fatias, duplique o círculo (Ctrl/Cmd + D) e, em seguida, ajuste os ângulos do arco de cada um para representar diferentes valores de dados. Use cores diferentes para cada fatia.

  4. Use matemática para dividir o gráfico
    Se os seus dados estiverem em percentagens, multiplique 360 (graus num círculo) pela percentagem para obter o ângulo de cada fatia. Por exemplo, 25% = 90°.

  5. Codifique por cores para maior clareza
    Use a ferramenta Preenchimento para atribuir cores distintas a cada fatia. Isto melhora a legibilidade e o aspeto visual.

Erros comuns e como evitá-los

  1. Arcos não alinhados corretamente
    Certifique-se de que cada fatia de arco começa onde a anterior termina para evitar lacunas ou sobreposições. Introduza manualmente os ângulos de início e fim para maior precisão.

  2. Perder o controlo dos ângulos
    Etiquete as suas camadas com os graus das fatias ou com etiquetas de dados para saber que segmento representa cada coisa.

  3. Etiquetas de texto desalinhadas
    Use Guias Inteligentes ou centre manualmente o texto sobre cada fatia para manter uma aparência limpa e profissional.

  4. Segmentos a sobrepor-se
    Preste atenção à ordem das camadas ao adicionar fatias. Traga os segmentos para a frente ou para trás conforme necessário para evitar ocultar outras partes.

  5. Proporções imprecisas
    Verifique novamente os seus cálculos ao converter percentagens em ângulos para garantir uma representação precisa dos dados.

Perguntas frequentes comuns sobre gráficos circulares no Figma

  1. Posso criar um gráfico circular no Figma sem plugins?
    Sim, pode usar a Ferramenta Elipse e as definições de Arco para criar manualmente gráficos circulares sem quaisquer plugins.

  2. Existe um plugin para criar gráficos circulares no Figma?
    Sim, existem plugins como "Chart" ou "Pie Chart Maker" para automatizar o processo com base em dados de entrada.

  3. Como faço uma fatia exata de 25%?
    Multiplique 360 por 0,25 (25%), o que dá 90 graus. Defina o ângulo do arco para abranger 90° para uma fatia perfeita de 25%.

  4. Posso animar gráficos circulares no Figma?
    Embora o Figma suporte animações simples de protótipos, as animações complexas baseadas em dados teriam de ser criadas fora do Figma.

  5. Posso exportar gráficos circulares do Figma?
    Sim, selecione o gráfico circular, vá ao painel de exportação, escolha o formato pretendido (PNG, SVG, PDF) e clique em Exportar.

  6. Como gravar o ecrã no Mac? 
    Para gravar o ecrã num Mac, pode usar o Trupeer AI. Permite capturar o ecrã inteiro e oferece capacidades de IA, como adicionar avatares de IA, adicionar locução, e adicionar zoom de aproximação e afastamento no vídeo. Com a funcionalidade de tradução de vídeo por IA do trupeer, pode traduzir o vídeo para mais de 30 idiomas. 

  7. Como adicionar um avatar de IA a uma gravação de ecrã?
    Para adicionar um avatar de IA a uma gravação de ecrã, terá de usar uma ferramenta de gravação de ecrã com IA. O Trupeer AI é uma ferramenta de gravação de ecrã com IA, que ajuda a criar vídeos com vários avatares e também ajuda a criar o seu próprio avatar para o vídeo.

  8. Como gravar o ecrã no Windows?
    Para gravar o ecrã no Windows, pode usar a Game Bar integrada (Windows + G) ou uma ferramenta avançada de IA como o Trupeer AI para funcionalidades mais avançadas, como avatares de IA, locução, tradução, etc.

  9. Como adicionar locução a um vídeo?
    Para adicionar locução a vídeos, descarregue a extensão do Chrome do Trupeer AI. Depois de se registar, carregue o seu vídeo com voz, escolha a locução pretendida no Trupeer e exporte o seu vídeo editado. 

  10. Como faço zoom numa gravação de ecrã?
    Para fazer zoom durante uma gravação de ecrã, use os efeitos de zoom no Trupeer AI, que permitem aproximar e afastar em momentos específicos, aumentando o impacto visual do conteúdo do seu vídeo.

Leituras sugeridas

Gerador de documentação técnica

Guia do manual do utilizador

Software de base de conhecimentos

Como ocultar nomes de frames no Figma

Como guardar um ficheiro Figma

Como criar uma grelha no Figma

Como criar uma grelha no Figma

Como desfocar o fundo no Figma

Precisa de um editor de vídeo, tradutor e argumentista?

Experimente o Trupeer gratuitamente

Marcar uma demonstração

Precisa de um editor de vídeo, tradutor e argumentista?

Experimente o Trupeer gratuitamente

Marcar uma demonstração

Precisa de um editor de vídeo, tradutor e argumentista?

Experimente o Trupeer gratuitamente

Marcar uma demonstração