Crie um painel responsivo com FIGMA

Sep 15, 2025

Como

A FIGMA é uma ferramenta gráfica para designers da UI. Tem uma interface simples e permite que você colabore no trabalho com seus companheiros de equipe. Se você quiser trabalhar offline, você pode optar por usar o aplicativo de desktop. Alternativamente, a FIGMA funciona em qualquer sistema operacional (Olá, Windows), para que você não precise instalar nada. E começar é fácil - você pode importar seus projetos de layout anteriores do esboço.

Escolha um construtor de site: 16 top tops

No FIGMA, você pode criar tudo o que precisa para sua interface, desde ícones ilustrados do vetor para layouts personalizados. A edição multiplayer pode economizar muito tempo para equipes de design, pois isso significa que todos os membros da equipe podem trabalhar no mesmo layout ao mesmo tempo. E estes nem todos são ótimos recursos.

Neste tutorial, mostrarei a você como se instalar com a Figura, depois percorrer como criar uma tela de aplicativo móvel, passo a passo. Nesse caso, estaremos projetando o painel para um aplicativo de estatística fictício. Quando terminar, você poderá criar diferentes interfaces no FIGMA e trabalhar nelas com sua equipe em tempo real.

01. Inscreva-se

Primeiro de tudo, você precisa se inscrever em www.figma.com. . Decida se você deseja usar a ferramenta no seu navegador ou baixar o aplicativo da área de trabalho. Para baixar a versão da área de trabalho, vá para o menu Hamburger no canto superior esquerdo e clique em "Obter Desktop App".

02. Crie uma prancha e uma grade

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Adicione uma grade de linha de base para ajudá-lo a posicionar seus elementos harmoniosamente (clique para ampliar)

Acertar UMA para criar uma prancha. Você pode escolher uma das predefinições ou criar seu próprio tamanho personalizado. Para este projeto, vamos usar o telefone e GT; iPhone 7 (375x667px). Para criar uma grade, primeiro selecione a Artboard. Em seguida, na barra lateral direita, encontre 'Layout Grid' e pressione '+'. Configurar a contagem de colunas: 6, sarjeta: 16, margens: 8 e tipo: trecho.

03. Desenhe um retângulo para o fundo

Vamos começar com o fundo. Aperte R. Para trazer a ferramenta retângulo e desenhe um retângulo # 5f98fa sem bordas. Defina as dimensões para 375x363 usando o painel Propriedades no lado direito.

04. Adicione uma barra de status

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Defina o gradiente para a barra de status usando o painel Propriedades à direita na tela. Aqui você pode ajustar as opções de cor para criar um gradiente linear (clique para ampliar)

Em seguida, queremos colocar uma barra de status no topo da tela. Aperte R. Para definir a largura: 375, altura: 64, posição (x: 0; y: 0). Para nossa barra de navegação, vamos definir o preenchimento do gradiente usando o painel Inspetor de propriedades à direita. Encontre a opção 'Preencher', pressione a visualização de cores e selecione 'linear' no menu suspenso. A cor no topo deve ser # 77A6F7, e na parte inferior # 5A93F5 (opacidade 100 por cento para ambos).

05. Importe uma barra de status do IOS

Infelizmente, o FIGMA não inclui elementos da IOS UI por padrão. No entanto, há um arquivo chamado 'file de amostra', que é um design do aplicativo IOS, para que possamos emprestar a barra de status dessa. Copie a opção Barra de status de luz, cole-a no arquivo atual e coloque-a em (x: 0; y: 0). Usando a ferramenta de texto ( T. ), clique na sua prancheta para adicionar um cabeçalho à barra de navegação. Eu fui para Avenir Heavy, 15px, #ffffff. Alinhe o título pelo centro horizontal, Y: 33.

06. Crie um ícone de volta

À esquerda da barra de navegação deve ser um ícone de "costas". Eu vou criar isso a partir do zero. Crie um retângulo 14x14px, adicione rotação de 45 graus, X: 14; Y: 43. Duplique este retângulo e coloque-o em X: 18; Y: 43. Selecione ambos os retângulos e sob o menu superior, vá para Grupos Booleanos e GT; Subtraia a seleção. Depois disso, volte para os grupos booleanos e GT; Achatar a seleção ou pressione CMD + E. .

07. Termine o ícone de seta

Nosso ícone de flecha está quase pronto. Agora, apenas precisamos definir a largura e a altura para valores numéricos - na minha largura do caso: 12px; Altura: 20px. A etapa final é definir a cor de preenchimento para #ffffff.

08. Crie um gráfico

Agora vamos criar um gráfico. Primeiro, vamos colocar em algumas diretrizes. Selecione a ferramenta Retângulo ( R. ) e definir x: 24 y: 147; Largura: 1; Altura: 166; Preencha a cor # B3DCFF e opacidade 20%.

Duplique este retângulo quatro vezes com as margens de 80px. Na parte inferior de cada diretriz, precisamos adicionar uma etiqueta de data usando camadas de texto ('2 de fevereiro', 'fev 9', 'fevereiro 16', 'fev 23', 'mar 1'). Eu usei a Avenir Medium, às 11px, # C1D8FF.

09. Faça a linha de dados

Usando a ferramenta Caneta ( P. ) Precisamos criar um vetor para representar a linha de dados. Clique e arraste para criar um ponto de Bézier. Esta forma deve ter um derrame 4px e sem preenchimento, #ffffff.

Vamos adicionar uma sombra para ajudar a linha se destacar: Clique no botão '+' na seção Efeitos e escolha 'Sombra'. Use as seguintes configurações para fazer uma sombra suave e elegante: Blur: 3px, Y: 7px, # 2951FF, opacidade: 100%.

10. Adicione detalhes ao gráfico

Use the Text tool to add values to the places the guidelines intersect with the data line — Use a ferramenta de texto para adicionar valores aos locais que as diretrizes se cruzam com a linha de dados

Nos pontos onde as diretrizes se cruzam com a linha de dados, vamos adicionar círculos. Desta vez vamos usar a ferramenta de elipse ( O. ), que você encontrará no menu suspenso que acompanha a ferramenta retângulo. Desenhe círculos 8x8px em cada interseção e defina a cor de preenchimento para # 5f98fa. Precisamos adicionar um curso: Clique no botão '+' ao lado da seção de traço, defina Peso: 2px e alinhe: Center.

11. toques finais

Para finalizar a seção do gráfico, só precisamos adicionar valores aos nossos pontos de interseção. Com a ferramenta de texto ( T. ) Selecione Avenir Preto, 11px, # 1f4991.

12. Três caixas informativas

Abaixo do gráfico de linha, vamos criar três células que exibem mais informações. Usando a ferramenta de texto ( T. ) Vamos criar nosso primeiro título: 'Valor estimado de suas ações': X: 16; Y: 391, Avenir Medium, 15px, # 5d7eb6. À direita da célula colocar o valor '$ 1.115', estilo de texto: Avenir pesado, 22px, # 5f98fa, alinhamento de texto: esquerda, x: 287; Y: 387.

13. Fazendo um separador

Desenhe um retângulo que seja 1px em altura e abrange a largura total da tela (# F5F5F5; X: 0; Y: 435) - Isso atuará como o separador entre as células. Selecione o cabeçalho, valor e separador e crie um grupo ( cmd + g. ).

14. Adicionando cabeçalhos

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Por baixo do gráfico será três células mostrando as principais peças de dados (clique para ampliar)

Duplique este grupo para que você tenha três grupos com distância vertical 24px entre eles. Altere o segundo cabeçalho para 'Total de membros' e o terceiro grupo que se dirige para 'amigos inscritos' e atualizar os valores relevantes.

15. Desenhe e alinhe outro retângulo

Agora vamos adicionar uma chamada à ação. Desenhe um retângulo abaixo da última célula, largura: 195; Altura: 44, distância de eixo y do último separador 21px.

Usando as ferramentas Align, alinhe o retângulo pelo centro horizontal. Em seguida, defina a cor de preenchimento para # 5f98fa e redondeza para 22 (você encontrará este campo depois de 'rotação' no painel Propriedades). Depois disso, adicione um efeito de sombra (cor: #abdaff; opacidade: 100%; Y: 5; Blur: 11).

16. Coloque um pouco de texto no botão

Adicione o texto ao botão usando a ferramenta de texto ( T. ): 'Obtenha mais ações!' Defina isso no Avenir Black, 15px, #FFFFFF. Alinhe o texto pelo centro do botão. Finalmente, grupo todos os elementos juntos e nomeie-os corretamente.

17. Faça responsivo

Agora vamos ajustar nosso layout, por isso é responsivo a diferentes iPhones (320x568, 375x667 e 414x736). Para fazer isso, temos que usar restrições, que você encontrará no menu Propriedades à direita.

18. Obtendo o layout direito

Se você selecionar "Esquerda" ou "Direita" na lista suspensa horizontal, o grupo irá pin para o lado escolhido da tela e não se esticará. Se você selecionar 'Center', o grupo ou camada será esticado para preencher a largura da tela. Precisamos fazer a barra de status flutuar no lugar, então queremos a opção 'Direita & AMP; esquerda' (ou segurar 'cmd' e clique nas barras esquerda e direita no diagrama).

19. Teste isso

Vamos tentar isso. Com a barra de status selecionada, pressione a opção 'Direita & Amp; Esquerda'. Selecione um Artboard e, em vez do iPhone 7, escolha iPhone 7 Plus. Ele funciona corretamente mesmo se você selecionar o tamanho do iPhone.

20. Verifique cada camada

Vamos considerar o resto das camadas. Para o fundo da barra de navegação, queremos usar "direito + esquerdo". Para o título da barra de navegação: 'centro'. Para o ícone de seta para trás, é melhor usar a opção "esquerda" - desta forma, a seta será fixada no lado esquerdo da tela.

21. Defina o gráfico de linha

Agora vamos definir o gráfico da linha. Para as diretrizes, datas e círculos de interseção, queremos usar o "centro". Para a linha de dados e o fundo, usamos "direita e amp; esquerda". Na seção Extra de Dados, queremos usar "esquerda" para cada título, 'direito' para cada valor, e 'direita & amp; esquerda' para as linhas separadoras. Para o grupo CTA, vamos definir 'Center'.

22. Defina as restrições verticais

O passo final é definir as restrições verticais. A barra de status, barra de navegação, linha de dados e círculos de interseção e títulos associados devem ser definidos como 'top'. O fundo de gráfico, datas e diretrizes deve ser definido como 'Center'. Cada grupo de dados extras deve ser definido para o "centro" vertical, e o grupo de botão CTA deve ser definido como 'Bottom'.

23. Faça funcionar para cada tamanho de tela

Vamos duplicar a Artboard duas vezes e definir um para o tamanho de um iPhone 7 Plus e outro para o tamanho em um iPhone SE. Na versão mais, você precisará reduzir a lacuna entre a última célula de informações extras e o botão CTA selecionando o grupo de células e aumentando sua altura de 195 para 225. Na versão SE, você verá que as células da informação estão transbordando O botão CTA, portanto, temos que selecionar o grupo de células e reduzir sua altura a 150.

24. Tudo feito!

Ei, parabéns! Nós terminamos toda a tela do aplicativo em Figura. Por enquanto, basta verificar tudo é feito e você pode sentar e se sentir como um especialista.

Este artigo foi originalmente destaque em Revista Net. Edição 288; compre aqui.

Artigos relacionados:

Novo conceito de Behance parece um aplicativo assassino
Projetando para o impacto social
8 dicas para entrevistas de empregos de tecnologia ACE