Dominando a ferramenta de design Figma: dicas e procedimentos úteis

Todos que já trabalharam com o Google Docs sabem como é conveniente - fácil editar, colaborar e salvar seus arquivos na web. E se os web designers tivessem a mesma ferramenta para seus projetos? Bem, eles realmente têm um e é o Figma. Nesta revisão do Figma, iremos guiá-lo através dos recursos mais brilhantes da plataforma que a tornam a ferramenta de escolha dos designers.

O que é Figma

Figma é uma ferramenta de design baseada em nuvem que, ao contrário de outras ferramentas de design populares que funcionam exclusivamente no Mac OS ou Windows, também pode operar no Linux. Assim, esta plataforma permite a colaboração de designers que usam diferentes sistemas operacionais e precisam gerar código SVG, CSS e código iOS ou Android para seu trabalho.

A plataforma permite que seus usuários criem projetos, façam protótipos e coletem feedback, tudo em uma plataforma.

Por que usar Figma

Antes de entrarmos nas belezas da ferramenta de design Figma, vamos dar uma olhada no que torna esta plataforma tão atraente para designers.

1. É baseado na web. Figma é executado em seu navegador e você pode trabalhar em seus projetos sem ter que salvá-los como arquivos separados em seu computador - todas as edições são salvas automaticamente em sua nuvem. Mas lembre-se, você precisará de uma conexão ativa com a Internet para salvar todas as alterações.
2. Permite o trabalho em equipe . Com Figma, você pode ter uma equipe de dois a um número ilimitado de editores, tudo dependendo do seu plano de preços. Você sempre poderá ver quantos membros da equipe estão trabalhando em um único projeto e quais mudanças eles estão fazendo.
3. É gratuito para designers solo. Todos os recursos são absolutamente gratuitos para uso, sem períodos de teste.

No geral, a Figma tem três planos de preços. Vamos descobrir qual funcionalidade a plataforma oferece para cada um deles.

Planos de preços Figma

Introdução ao Figma

Após a inscrição, o usuário recebe um e-mail de boas-vindas com links necessários para a integração: centro de ajuda, tutoriais em vídeo, fórum e recursos úteis.

Além disso, quando os usuários começam a trabalhar com a ferramenta, eles recebem um rápido passo a passo da plataforma. Você pode trabalhar online e baixar a versão desktop Figma para definir seu fluxo de trabalho offline. Na verdade, a interface é bastante intuitiva, com o Painel de Camadas, que inclui os elementos do seu projeto, uma barra de ferramentas com ferramentas e opções disponíveis, e o Painel de Propriedades, tudo no lado direito.

Agora vamos delinear os recursos e opções mais importantes do Figma e ver como você pode aplicá-los.

Recursos e opções úteis do Figma

Prototipagem

Figma permite que você faça uma versão clicável de um site ou aplicativo criando quantas telas forem necessárias. Desta forma, você poderá testar, editar ou ajustar qualquer recurso - funcionalidade de botão, rollover de elementos, animação de janela modal - sem ter que alternar entre as guias. Você será capaz de criar conexões e pontos de acesso para o seu projeto para simular como ele ficará em um ambiente real.

Simplesmente mude para Prototype no Painel de Propriedades e comece a criar caminhos e interações.

Componentes

Esses são elementos da IU que podem ser reutilizados em seus projetos. Este recurso permite criar componentes simétricos invertendo-os ou repetir padrões colocando os componentes lado a lado. Você pode criar componentes a partir de botões, campos ou menus. Para criar um componente principal, clique no botão Criar componente no Menu de opções ou clique com o botão direito do mouse na camada e escolha a opção Criar componente.

Você pode reutilizar os componentes principais criando instâncias. Você também pode fazer esses componentes de elementos da IU, como cores, blocos, botões, formas e páginas de aterrissagem como componentes separados.

Para criar componentes de instância, escolha o componente principal, segure a tecla de atalho (Alt ou D para Windows e Mac OS respectivamente), arraste a instância do componente e copie e cole em outro local, se necessário.

Lembre-se de que as instâncias que você cria são vinculadas aos componentes principais, o que significa que todas as alterações feitas no último serão aplicadas a todos os anteriores. Por exemplo, atualizando a forma ou a cor do botão no Master Component, você atualizará seus componentes filhos no design do seu site.

Redes de vetores

Este recurso Figma permite que você crie formas vetoriais complexas, uma vez que você não está mais limitado por apenas duas linhas provenientes de dois pontos. Você pode usar a ferramenta caneta para desenhar linhas extras de qualquer ponto da forma que você criou.

Além disso, a Vector Networks pode facilitar sua rotina HTML, pois você pode copiar o código SVG de uma fonte externa e colá-lo como uma camada vetorial diretamente no Figma. Você também pode copiar vetores Figma como códigos SVG. Para fazer isso, basta clicar com o botão direito do mouse no elemento, escolher copiar como SVG e colar o código no HTML ou em qualquer projeto da web que você esteja criando.

Comentários, edição e compartilhamento integrados

Com o Figma, você pode criar uma equipe e selecionar o que cada membro da equipe tem permissão para fazer com seus projetos: visualizar ou visualizar e editar também. Você também pode observar como os membros da equipe atualizam ou alteram o design em tempo real.

Sua equipe pode deixar feedback ou discutir qualquer elemento do projeto diretamente na área de trabalho e fixá-lo em qualquer lugar da tela, assim como no Google Docs. Para deixar seus comentários, escolha o balão de fala no menu superior, clique no elemento que deseja comentar e escreva seu feedback.

Controle de versão

Com o Figma, você pode rastrear o histórico de cada colaborador e até mesmo voltar para a versão anterior. O serviço salva automaticamente as versões quando os usuários fecham a guia com o projeto ou se nenhuma alteração tiver sido feita em 30 minutos. Para obter acesso rápido a esta opção, selecione o ícone suspenso à esquerda do nome do projeto na barra de ferramentas. Você verá o histórico da versão à sua direita com a opção de nomear, restaurar ou duplicar uma versão específica.

Ferramenta de design Figma em ação

Ao nos familiarizarmos com a plataforma e sua funcionalidade, decidimos experimentar as opções de design do Figma e criar uma página simples para um eBook. Primeiro, clicamos no sinal “+” no menu superior. Em seguida, clicamos no ícone “Moldura” na barra de ferramentas para criar uma moldura e organizar nosso design na tela. Em seguida, preenchemos nosso projeto com as camadas necessárias - blocos de texto, retângulos e imagens - e configuramos todos os espaços entre os elementos.

Aqui está o que conseguimos criar:

Lembre-se de que você não conseguirá fazer uma impressão de qualidade, pois a plataforma carece da paleta principal para pintura - paleta CMYK - ou troca de tamanho entre milímetros e centímetros.

Tomada final

Figma parece uma ferramenta que foi cuidadosamente pensada por designers para designers. A plataforma permite que você

• trabalhe online e salve seus projetos em uma nuvem sem ter que depender do armazenamento do seu computador;
• criar designs em vários sistemas operacionais;
• colabore com a equipe em tempo real, comente, edite e compartilhe os arquivos;
• desfrute de funcionalidades úteis como prototipagem, redes vetoriais, criação de componentes e suas instâncias para editar, testar, ajustar seu projeto e expandir suas possibilidades.

Esperamos que nossa análise do Figma tenha esclarecido os truques internos da plataforma e você tenha se inspirado o suficiente para experimentá-la. Crie seus projetos com Figma e projetos de marketing com SendPulse. Vê você!