Guia de Figma para iniciantes

No Figma, você pode projetar elementos de interface, criar sites interativos e protótipos de aplicativos, criar ilustrações e trabalhar com gráficos vetoriais. Muitos designers também o utilizam para criar layouts de sites para o Tilda.

• Interface para aplicativos móveis - FigmaiOS UI kit.
• Protótipo do painel de controle do Tesla Model 3 e seus elementos de interface.

Por exemplo, gerentes de projeto e empresários podem usar modelos de gráfico de Gantt para planejamento ou criar anúncios de mídia social usando predefinições para o Facebook e outras plataformas.

• Multiplataforma

• Baseado na nuvem

• Feedback incorporado

Qualquer pessoa com acesso pode comentar em um layout e receber feedback diretamente no design. Isso acelera o processo de aprovação e garante que as anotações importantes não fiquem perdidas nas linhas de e-mail.

Depois de se inscrever, você verá dois espaços de trabalho principais:

1. O gerenciador de arquivos, onde você pode criar projetos e ajustar as configurações do seu perfil.
2. O próprio editor gráfico.

A Comunidade Figma é um recurso relativamente novo que funciona como uma plataforma de mídia social de marca dentro da ferramenta principal. Ela permite que os usuários compartilhem e descubram recursos de design, como modelos, kits de interface do usuário e plug-ins. Para acessá-la, clique no ícone do globo.

Os plug-ins são essencialmente ferramentas e extensões de terceiros que ampliam a funcionalidade do Figma. Eles ajudam a acelerar os fluxos de trabalho, melhoram a eficiência e fornecem recursos adicionais, como bibliotecas de imagens, ícones etc.

Por exemplo, se você instalar o plug-in Unsplash, poderá inserir imagens de banco de imagens sem sair do Figma, enquanto o Iconify lhe dá acesso a mais de 40.000 ícones vetoriais.

Os próprios usuários podem desenvolver e adicionar plug-ins, adaptando a funcionalidade do Figma às suas necessidades específicas.

Desde que a Figma introduziu a Comunidade Figma, os plug-ins passaram a fazer parte dessa interface. Você pode encontrar e navegar por todos os plug-ins disponíveis lá.

Depois de conectar os plug-ins desejados, eles poderão ser acessados na barra de ferramentas inferior, na guia Plug-ins e widgets.

Uma nova tela de arquivo contém três áreas principais: A tela, a barra de ferramentas e duas barras laterais. A barra lateral esquerda contém o painel Layers (Camadas). Veja a seguir alguns itens importantes da interface:

Por padrão, todas as formas recém-adicionadas são coloridas em cinza. Para alterar a cor, selecione "Pick color" (Escolher cor) no menu suspenso Edit (Editar). Isso abrirá o seletor de cores, que permite que você escolha uma nova cor identificando qualquer cor já usada na tela.

"Selecionar tudo com..." destaca todos os elementos que compartilham as mesmas propriedades, preenchimento, fontes ou efeitos, facilitando as edições em lote.

Esse menu ajuda você a configurar a tela, facilitando a navegação pelo layout. Você pode ativar a grade de pixels, mostrar réguas, aumentar ou diminuir o zoom, etc.

Para maximizar o espaço de trabalho, você pode ocultar o painel Layers e a interface usando as opções correspondentes.

Os objetos colocados no quadro são listados como "camadas" à esquerda. Você também pode agrupar objetos (por exemplo, colocar um número de telefone e um e-mail no rodapé da página). Alinhe os elementos dentro do quadro usando o painel à direita ou agrupe-os com Object → Group Selection(Ctrl/Cmd + G).

Defina o número de colunas, ajuste a transparência de suas cores e personalize a largura da calha. Você também pode escolher o tipo de grade - exibindo-a como uma grade, colunas ou linhas.

• Use as configurações encontradas na parte superior do painel Properties (Propriedades) para mover e dimensionar objetos nos eixos X e Y.
• Use a configuração Corner radius (Raio do canto) em "Appearance" (Aparência) para arredondar os cantos de uma forma - por exemplo, para fazer com que as bordas superiores de um retângulo se pareçam com um marcador. Por padrão, o raio se aplica a todos os cantos. Para arredondar apenas cantos específicos, clique na configuração Cantos individuais ao lado dos campos de valor.

• Para ajustar a espessura do traço, use a configuração "Stroke" (Traço) - digite um valor ou arraste o controle deslizante. Para ocultar o preenchimento, clique no ícone de olho ou de menos em "Fill" (Preenchimento).

• Para fazer com que o retângulo se pareça com uma bandeira, estenda sua borda inferior. Clique duas vezes na forma para editar seus pontos.

• A ferramenta "Bend tool" permite que você suavize cantos ou curvas.
• O "balde de tinta" permite preencher um caminho fechado.

• Preenchimento: a imagem é dimensionada para cobrir completamente o quadro, garantindo que nenhum espaço vazio permaneça. Se a proporção da imagem for diferente da do quadro, partes da imagem poderão ser cortadas para manter a cobertura total.

• Ajustar: Exibe a imagem inteira dentro do quadro, preservando sua proporção original. Isso pode resultar em espaço vazio (preenchimento) se a imagem e o quadro tiverem proporções diferentes.

• Crop (Cortar): permite que você ajuste manualmente a parte da imagem que fica visível no quadro. Você pode reposicionar e redimensionar a imagem para focar em uma área específica, cortando o restante. As áreas cortadas ficam ocultas, mas não são excluídas, permitindo a edição não destrutiva.

• Tile: Repete a imagem como um padrão.

As configurações disponíveis também permitem que você faça correções fotográficas na imagem - ajustando o brilho, o contraste, a saturação, etc., ou até mesmo editando uma parte específica da foto.

1. Coloque uma camada de forma abaixo da camada de foto.
2. Selecione as duas camadas.
3. Vá para Object → Use as mask (atalho: Ctrl + Alt + M no Windows ou Cmd + Opt + M no macOS).

O Figma suporta a importação de arquivos SVG. Você pode arrastá-los do seu computador ou copiar e colar diretamente do Illustrator ou do Fresco. Esses arquivos geralmente são exibidos como quadros. No painel Layers (Camadas), você pode agrupar objetos vetoriais pressionando Ctrl + G (Windows) ou Cmd + G (macOS) e movê-los para cima da camada de moldura.

• Sólido: o tipo de preenchimento padrão, que aplica uma única cor ao objeto.
• Linear: Cria um gradiente ao longo de uma linha reta entre dois pontos.
• Radial: Gera um gradiente circular que se irradia a partir de um ponto central.
• Angular: Aplica um gradiente que gira em torno de um ponto central, criando um efeito de fatia de torta.
• Diamante: Produz um gradiente em um padrão em forma de diamante, irradiando a partir do centro.
• Imagem: Preenche o objeto com uma imagem (ou vídeo).

Ao modificar as posições dos pontos finais do gradiente, você pode controlar a direção e a intensidade da transição de cores.

Para obter opções mais criativas, experimente colocar formas em camadas e aplicar vários gradientes. Você pode usar modos de mesclagem para empilhar formas ou imagens de maneiras exclusivas.

Se o vínculo entre um componente pai e um componente filho for interrompido, você poderá restaurar a conexão selecionando o componente filho e clicando no ícone Redefinir ou Voltar. Essa ação reverte todos os parâmetros alterados manualmente, restabelecendo o vínculo com o componente pai.

Salve todas as variações em um quadro dedicado e, em seguida, aplique-as às suas camadas de texto conforme necessário.

• Desanexar a instância filha da instância pai usando a opção "Desanexar instância".
• Aplicar layout automático.

• Fixo: Mantém a largura/altura estática de acordo com os parâmetros inseridos manualmente.
• Abraço: O quadro é redimensionado automaticamente para se ajustar ao conteúdo.
• Preenchimento: o elemento preenche a largura ou a altura do contêiner pai.

• Envolvimento: Organiza os itens em várias linhas ou colunas em um quadro. Os objetos fluem horizontalmente e passam para a próxima linha quando o espaço é limitado.
• Mín/Máx: define as dimensões mínimas e máximas para quadros e elementos filhos, evitando que eles se tornem muito grandes ou muito pequenos.

Esse plug-in permite que você navegue por mais de 40.000 ícones vetoriais do Iconify, incluindo coleções como Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, etc., e os insira rapidamente em seu design.

• Windows: Ctrl + Shift + E
• macOS: Cmd + Shift + E

• SVG: ideal para objetos vetoriais, como ícones e gráficos simples, devido à sua escalabilidade e nitidez em qualquer tamanho.
• JPEG: mais adequado para fotografias e imagens com gradientes, oferecendo boa compactação e equilíbrio de qualidade.
• PNG: preferível para imagens que exigem transparência ou imagens com texto e bordas nítidas, pois suporta compactação sem perdas.
• PDF: Útil para documentos e layouts que precisam preservar elementos vetoriais e ser escalonáveis sem perda de qualidade.

• Discuta projetos: Colabore em tempo real com bate-papos de voz e comentários, e até mesmo incorpore músicas. O FigJam oferece recursos de IA (atualmente em versão beta) como "Sort" (classificar), que organiza automaticamente as notas adesivas por tópico, e "Summarize" (resumir), que fornece uma visão geral rápida de todas as notas.
• Faça anotações e analise entrevistas com clientes: Os designers podem usar um modelo incorporado para registrar entrevistas com usuários e, em seguida, criar personas de usuários com base nos dados coletados.
• Crie mapas da jornada do cliente: Visualize os caminhos dos usuários - descreva as ações que eles realizam, suas expectativas, emoções e pontos problemáticos. Aprimore cada estágio da jornada do usuário usando ferramentas como notas adesivas, emojis e outros widgets.

• Requer reinicialização para adicionar fontes locais: A simples instalação de uma fonte em seu computador não é suficiente. Você precisará reiniciar o Figma para carregá-la.
• Possíveis imprecisões na exportação: Às vezes, o Figma adiciona aleatoriamente alguns pixels de traço ou distorce ilustrações lineares ao exportar arquivos PNG, JPG ou SVG.
• Não há proteção de direitos autorais incorporada: No plano gratuito Starter, não há como impedir que alguém duplique seu arquivo e edite sua própria cópia.
• Requer uma conexão estável com a Internet: Como o Google Docs ou qualquer outro serviço baseado em nuvem, o Figma não permite a edição off-line. Se você perder a conexão, as alterações não serão salvas até que você esteja on-line novamente.
• Não há atalhos de teclado personalizados: Os atalhos disponíveis no Figma são fixos, mas você pode usar ferramentas de terceiros, como o AutoHotkey, para remapear as teclas.
• Não há versões em vários idiomas: No momento, o Figma está disponível apenas em inglês e japonês. Se precisar dele em outro idioma, a única maneira é usar a extensão do Google Translate para o Chrome. Se você tiver experiência com editores gráficos como o Photoshop ou tiver seguido este guia, será mais fácil usar o Figma.

• Editor gráfico on-line: toda a sua equipe pode trabalhar no mesmo arquivo simultaneamente, com todas as atualizações salvas na nuvem.
• Histórico de versões: O Figma armazena todas as alterações de versão, para que você possa reverter facilmente, se necessário.
• Sem restrições de sistema operacional: O Figma é executado diretamente em um navegador, portanto, não é necessária nenhuma configuração complexa e funciona mesmo em laptops modestos. Entretanto, se preferir, você também pode instalar o aplicativo para desktop.
• Modelo Freemium: O plano gratuito Starter suporta até dois editores - perfeito para muitos freelancers ou equipes pequenas.
• Ideal para protótipos simples: O conceito geral e a interface são projetados para a criação de interfaces de aplicativos e da Web. No entanto, para ilustrações mais avançadas ou edição de fotos, talvez seja necessário usar uma ferramenta diferente.
• Ecossistema de plug-ins: Com centenas de plug-ins disponíveis (e a possibilidade de criar os seus próprios), o Figma pode se adaptar à maioria dos fluxos de trabalho.