Este ensina a desenvolver dashboards profissionais utilizando o Figma, uma ferramenta de design de interfaces. Ele aborda desde a estruturação do layout até a aplicação de elementos visuais e interativos, proporcionando uma visão completa do processo de criação.
A criação de dashboards no Figma está diretamente relacionada à hospedagem de sites, pois um design bem elaborado facilita a implementação e integração do dashboard em plataformas web hospedadas. Ao planejar e prototipar o dashboard no Figma, é possível antecipar desafios técnicos e garantir que o design seja responsivo e compatível com diferentes ambientes de hospedagem. Isso resulta em uma experiência de usuário mais fluida e em um processo de desenvolvimento mais eficiente.
Se você está criando um layout no Figma, nesse artigo vai aprender como fazer isso em poucos passos. Neste artigo, vamos criar um dashboard simples usando Figma.
Um dashboard serve para várias coisas, mas o principal é mostrar informações visual e intuitivamente. Pode ser um dashboard de vendas, de usuário ou de administrador. O de administrador, por exemplo, junta todos os dados que os usuários estão colocando na plataforma.
Continue lendo e saiba mais. No entanto, se quiser começar do início, temos um artigo sobre os conceitos iniciais do Figma.
Conteúdo
1 – Criando layout no Figma: primeiro passo para um dashboard simples
Para começar o layout do seu dashboard, você aperta “F” para criar um frame. Automaticamente, abre do lado direito as resoluções que você pode usar. Por exemplo:
Se for um dashboard para web ou sistema, escolha “Desktop”. Se for para celular, no entanto, pode escolher uma resolução de iPhone 16, iPhone 15, ou outras, inclusive de Android.
O que não pode faltar no seu dashboard
Além do menu lateral, outra coisa que não pode faltar é o ícone de usuário. Quase todos os dashboards precisam de login para acessar, afinal, eles mostram informações de alguma coisa, seja vendas, acessos a sites etc. Então, é normal e esperado que precise fazer login.
Quando você trabalha com esse tipo de projeto, é bom pensar no login social. Você pode criar antes uma tela para login e cadastro, fica a seu critério. Você pode criá-lo manualmente, ou usar um PNG e/ou Favicon.
2 – Criando o menu e o cabeçalho
O menu e o cabeçalho são partes cruciais do seu dashboard, é por eles que vamos começar. Para que ele fique, por exemplo, assim:
3 – Criando os Retângulos
Use a tecla “R” para criar retângulos que vão ser o menu lateral e o cabeçalho. Mude a cor ou transparência dos retângulos que ficam um em cima do outro para você conseguir ver bem o tamanho de cada um.
4 – Definindo a largura do menu
No seu retângulo lateral (pode ser do lado esquerdo ou direito), defina a largura que cabe os ícones do menu. Por exemplo, vamos pensar num dashboard que mostra dados, com gráficos, filtros e outras coisas, e que tem algumas funções de administrador. Não precisamos definir quais são essas funções agora.
No seu projeto real, se ele for mais específico, você vai pensar nessas funções. Mas, por enquanto, vamos colocar só os retângulos de texto, onde ficariam essas funções.
Duplicando Elementos
Para copiar um elemento no Figma, clique nele (ele vai ficar com uma linha azul embaixo), aperte “Alt” e arraste com o botão esquerdo do mouse. Pode fazer isso quantas vezes precisar. Agora temos, por exemplo, cinco opções de texto, ou seja, cinco funções que o nosso menu teria.
Com o wireframe pronto, é hora de dar uma cara para o seu dashboard:
Inserindo Gráficos e Textos
Como estamos fazendo um wireframe por enquanto, vamos colocar os retângulos dos gráficos. Alinhe eles com a última caixa de texto. Podemos colocar também uns retângulos que parecem textos.
Estilizando o Dashboard
Com o wireframe pronto, agora você vai escolher as cores, o texto, o tipo de letra e o visual do seu dashboard. Isso é importante porque essa tela será a base para as outras.
Se você tem 3, 4 ou 5 ícones no menu lateral, então você vai ter mais 3, 4 ou 5 telas, dependendo de quantos ícones ou opções tiver no menu.
Mesmo que você possa copiar os elementos depois, usando o atalho de clicar, segurar e arrastar, é sempre bom já deixar tudo organizado. Isso deixa o trabalho mais automático e mais fácil.
Definir esses elementos desde o começo simplifica bastante o processo de replicação das telas e garante que o design fique consistente.
Artigos que podem interessar:
Trabalho em Home Office: 20 Segredos para Trabalhar por Conta Própria
Criando layout no Figma com os plugins e extensões para inserir gráficos
Para encontrar plugins, widgets ou extensões no Figma, siga os passos abaixo:
- Acesse a barra de ações pressionando
Ctrl + K. - Digite o nome do recurso que deseja encontrar.
- Escolha entre as opções Search Plugins and Widgets ou Search Assets For.
- Para uma busca mais eficiente, prefira pesquisar os termos em inglês.
2. Escolhendo e Instalando um Plugin de Gráficos
Após realizar a busca, você verá diversas opções de plugins. Para escolher o mais adequado, observe:
- Número de usuários;
- Avaliações e curtidas;
- Funcionalidades disponíveis.
Um dos plugins mais populares para criação de gráficos no Figma é o GraphPad. Também há alternativas como o Magical Graphics.
Passo a passo para instalar a extensão/plugin:
- Clique na opção desejada dentro da aba Plugins and Widgets.
- Selecione Run para executar o plugin.
- Aguarde a abertura da tela de configurações do GraphPad ou qualquer plugin que tenha escolhido.
3. Criando gráficos no Figma
Com o GraphPad ou outro plugin instalado, siga estas etapas para criar seu gráfico:
Escolha o tipo de gráfico desejado:
- Gráficos circulares (informações dentro de círculos);
- Gráficos retangulares (com formato de onda, por exemplo).
Ajuste as configurações conforme os dados que deseja exibir.
Teste diferentes formatos até encontrar o que melhor se encaixa no seu dashboard.
4. Testando outras extensões
Além do GraphPad, há várias outras opções de plugins para gráficos no Figma. Algumas exigem pequenos ajustes em código, enquanto outras são totalmente visuais, mas a há muita variedade. Experimente diferentes opções até encontrar a que melhor atende às suas necessidades.
Dicas de criação de dashboard
Agora, umas dicas extras para deixar seu dashboard ainda melhor:
- Pensa na hierarquia da informação: o que é mais importante tem que estar mais em destaque. Use tamanhos diferentes, cores que chamam mais atenção, para, assim, guiar o olhar da pessoa;
- Não polui muito: menos é mais, quase sempre. Se você coloca muita informação junta, vira uma bagunça e ninguém entende nada. Deixa espaço em branco, organiza as coisas em blocos, pra ficar limpo e fácil de ler;
- Usa grids e auto layout: isso salva muito tempo! O grid te ajuda a alinhar tudo certinho e o auto layout ajusta os elementos automaticamente quando você muda alguma coisa. Facilita muito a vida na hora de fazer alterações;
- Componentes para tudo: se você vai usar o mesmo botão várias vezes, ou um gráfico parecido, cria um componente! Assim, se você precisar mudar alguma coisa, muda só no componente principal e já atualiza em tudo quanto é lugar;
- Testa as cores: vê se as cores que você escolheu contrastam bem, pra quem tem daltonismo conseguir entender também. E testa em diferentes telas, para ver se fica bom em tudo quanto é lugar;
- Prototipação básica: mesmo que seja um wireframe, vale a pena fazer uma prototipação básica, tipo linkar os botões do menu com as telas correspondentes. Ajuda a ter uma ideia melhor de como vai ficar a navegação;
- De olho na usabilidade: pensa em quem vai usar o dashboard. Se for um pessoal mais técnico, pode ter mais detalhes. Se for um público mais geral, tem que ser mais simples e direto;
- Inspiração, mas com moderação: dá uma olhada em outros dashboards, vê o que te agrada, mas não copie totalmente. Tenta entender o porquê das escolhas e adapta para o seu projeto.
Conclusão: criando layout no Figma
Criar um dashboard no Figma é mais simples do que parece, principalmente se você seguir um passo a passo bem estruturado. Desde a construção do layout até a escolha dos plugins certos, cada detalhe faz diferença para um design funcional e intuitivo.
O segredo está em manter a organização, testar diferentes opções e focar na experiência do usuário. Agora é só colocar em prática e personalizar o seu dashboard do jeito que precisar!
Quer tornar o seu dashboard interativo? Então não perca nosso artigo sobre prototipagem interativa!
