Introdução
Criar produtos digitais vem sendo um tópico extremamente relevante nos últimos anos, principalmente por conta da popularização da área User experience (ou Experiência do usuário, em português). Essa área, visa olhar para um produto de uma empresa, e por meio de análises, pesquisas e testes, fornecer a melhor experiência durante o uso desse sistema, reduzindo pontos negativos e solucionando os problemas do público-alvo.
Em paralelo à área de experiência, temos a User interface (ou Interface do usuário, em português), que atua em conjunto com a pessoa que realiza pesquisas e testes, convertendo esses resultados em interfaces digitais, fornecendo um meio dessas pessoas interagirem com o produto a fim de completar seus objetivos.
Para possibilitar essa interação, o Figma é um dos caminhos utilizado na criação de telas para produtos como aplicativos, sites ou softwares, permitindo que a pessoa designer crie todo o fluxo, estrutura e composição do projeto. É sobre essa ferramenta que iremos falar neste artigo.
Figma — O que é?
O Figma é uma plataforma colaborativa para construção de design de interfaces e protótipos, pertencente a empresa Figma, Inc., lançada em 2016 por Dylan Field e Evan Wallace. O objetivo era o de criar uma ferramenta gratuita que trouxesse colaboração entre pessoas e times, permitindo criar um produto para as mais diversas plataformas, mantendo a acessibilidade do sistema.
Para que serve o Figma?
Com essa ferramenta, designers e demais profissionais de todo o mundo têm a chance de construir o design de produtos digitais inteiros, como sites, aplicativos para dispositivos móveis (tais como tablets, smartphones ou até mesmo smartwatches), e se quiser, até mesmo as pequenas telas como temporizador de micro-ondas. Independente do nível de complexidade, seja simples ou complexo, com o Figma é possível explorar o máximo do design de interface e da *criação de fluxos inteiros.
Você pode ler mais sobre a história do Figma na página About Figma.
Como usar o Figma?
Para acessá-lo no navegador, basta seguir os passos de login no site oficial. Após a verificação das informações de login, você será redirecionado/a para o painel da sua conta no Figma, onde poderá acessar seus projetos, colaborar com equipes e explorar as funcionalidades da ferramenta.
Além da possibilidade de acessar o Figma online, é possível fazer o download para usá-la diretamente no seu computador ou notebook. A maneira mais segura de baixar o Figma é através do site oficial da ferramenta, na seção de download. Geralmente, as opções para download para Desktop são para Windows e macOS. Já para Mobile, as opções são iOS, Android e iPadOS. Após o download, siga as instruções para instalar o Figma em seu dispositivo seguindo as orientações na tela.
O Figma é gratuito?
Atualmente o Figma é uma ferramenta totalmente gratuita que você pode acessar, criar uma conta e começar a usar sem custos. Embora haja limitações na versão gratuita, ela oferece tudo necessário para construir produtos digitais. Se você desejar recursos adicionais para equipes, compartilhamentos e outras funções, pode fazer um upgrade no plano, que está disponível tanto para profissionais individuais quanto para equipes de pequenas a grandes empresas.
Uma coisa interessante é que se você for professor, professora, aluno ou aluna de universidade, você pode garantir o plano Professional do Figma sem pagar absolutamente nada por dois anos, apenas seguindo os passos para se verificar no plano Figma for education.
Design no Figma - funcionalidades
Criar produtos digitais no Figma é bem fácil, imersivo, e a cada atualização, muito mais ágil, já que a equipe está constantemente implementando ferramentas e recursos que permitem a você projetar interfaces com mais praticidade. Vamos falar um pouco sobre os principais, a seguir.
Aprenda a transformar design em código
Aprenda a transformar design em código com o Figma | #AluraMais
Colaboração
Design é uma área que está ativamente atuando em colaboração, seja com outras pessoas do mesmo segmento, ou profissionais correlacionados, como pessoas programadoras. Para isso, o Figma permite que você convide novas pessoas para interagir com você no mesmo projeto, seja por meio de edição ou apenas visualização. Não só isso, mas também é possível conversar por voz dentro da ferramenta, melhorando a comunicação com outras pessoas.
Ferramentas básicas e personalização
Como toda plataforma de design de interface, mas também design num geral, o Figma conta com as ferramentas comuns que geralmente designers utilizam, como formas geométricas, imagens, vetores, caixas de texto, dentre outras. Você sabe ou imagina o que cada um desses recursos executam, mas o ponto relevante é que no Figma, cada coisa exerce mais funções do que aparenta.
Como fazer estilos locais mais rapidamente no Figma? | #AluraMais
Trabalhando com cada um desses itens, o Figma permite personalizações de cores, utilizando tanto com cores sólidas, quanto diferentes tipos de gradiente, níveis e estilos de traçados, efeitos de sombra e desfoque, sem contar as opções de textos, que são mais de 30 opções para trabalhar com tipografias.
Componentes
Ouso dizer que o recurso de componentização é o mais importante de todos no Figma, e provavelmente o mais usado por designers ao longo dos seus projetos. Ele permite que você crie apenas um elemento, e o multiplique várias vezes ao longo do produto, dando ao elemento diversas propriedades de personalização e edição rápida.
Não só isso, mas uma vez que um elemento sejacomponentizado, a edição é extremamente prática, já que você vai precisar mexer apenas uma vez no componente, e em todos os lugares que você aplicou, ele será atualizado automaticamente.
Auto layout
Outro recurso muito útil e tão importante quanto os componentes, é o Auto layout. Ele automatiza a forma como trabalhar com interfaces num produto digital, fazendo ajustes de altura e largura de forma automática, sendo uma maneira brilhante para se trabalhar com design responsivo.
Leia também: 10 truques incríveis e pouco conhecidos no Figma | Alura
Auto layout 3.0
O Auto layout 3.0 é uma ferramenta que permite criar elementos adaptáveis para diferentes dispositivos, como botões e input de texto. Com a nova propriedade Wrap, é possível "envelopar" os elementos da interface e definir intervalos horizontais e verticais desejados. Além disso, agora podemos definir padrões de largura máxima e mínima redimensionável de um item, que podem ser usados em combinação com o flexible resizing.
Outra propriedade interessante do Auto layout 3.0 é o Text Truncation, que pode ser utilizado para acomodar o texto dentro de um frame. Ele oculta parte do texto, deixando fora da exibição do frame e adiciona reticências para indicar que o texto continua. A configuração do Text Truncation pode ser encontrada nas configurações de texto, onde também é possível definir um número máximo de linhas.
Variáveis
No Figma, as variáveis são usadas para armazenar valores, como cores de preenchimento e visibilidade, que podem ser reutilizadas em todos os projetos da empresa. Se trata de uma ferramenta importante para garantir a consistência do design, assim como os tokens de design.
Assim como os estilos e componentes, as variáveis no Figma podem ser publicadas nas bibliotecas do time de designers. Ao atualizar o valor de uma variável, é possível atualizar um componente facilmente, o que ajuda a criar produtos consistentes e torna as atualizações do design system mais eficientes. Além disso, as variáveis podem ser usadas para criar diferentes "modos", como o modo escuro e o modo claro, definindo linguagens, estilos de espaçamento e muito mais.
Prototipagem
Criar as interfaces digitais de um produto é algo incrível de se fazer no Figma, e que pode ficar melhor ainda com os recursos de prototipagem da plataforma, que permitem criar uma imersão com o fluxo de navegação que você irá projetar, sem que o produto tenha sido desenvolvido no código.
Protótipo simplificado
Com o uso de variáveis, condicionais e expressões matemáticas, a prototipação se tornou mais simples e flexível. Antes dessas propriedades, os protótipos com estados variáveis precisavam ter frames e conexões duplicadas para imitar o fluxo desejado. Agora, podemos definir e modificar os valores das variáveis para criar protótipos dinâmicos com apenas um frame e poucas interações.
Assim, você pode compartilhar o link com outras pessoas e deixá-las navegar pelo seu produto. Veja os pontos relevantes desse sistema:
É importante destacar que o uso de variáveis e condicionais está disponível apenas nos planos profissional ou superiores. Com essas ferramentas, é possível eliminar as conhecidas "teias azuis" e criar modos personalizados para a prototipação.
Criação de fluxos
É super comum que um único produto tenha diversos fluxos diferentes, afinal, quanto mais funções e níveis de responsabilidade, mais processos vão acabar nascendo internamente. Com o Figma, é possível definir diversos fluxos diferentes usando o recurso Flow, e coletar o link de início para cada fluxo para separar informações diferentes.
Interações, transições e animações
Se existe algo que chama muito a atenção das pessoas num produto digital é a forma como um produto interage com a pessoa que está utilizando, de diferentes maneiras. Com o Figma, você consegue definir diferentes interações ao longo dos componentes, páginas e fluxos criados.
Precisa de uma interação que simula arrastar um objeto na tela? O Figma tem! Precisa de uma transição que uma tela empurra outra para a esquerda? Sem problemas, o Figma também tem isso. Precisa ser uma animação inteligente em que um elemento se modifica, mas sem precisar usar código e nem mesmo ter conhecimento sobre motion? Para a sua sorte, o Figma comporta também esse tipo de função.
Leia também: Como criar micro-interações no Figma | Alura
Visualização mobile
A ferramenta em si já traz muita imersão, permitindo compartilhar os links dos seus fluxos para que pessoas acessem de forma online, e utilizem como se fosse a versão final programada. Mas, e se eu te contar que eles possuem um aplicativo que permite que você abra seus protótipos mobile e simule como se fosse um app real? Isso existe e é totalmente possível e fácil de ser feito.
Criando as interfaces do seu produto, você pode ir à loja de apps do seu sistema operacional, pesquisar por “Figma”, instalar o aplicativo da empresa, entrar na sua conta e buscar pelo seu protótipo.
Dev Mode
O Dev Mode é uma função do Figma que facilita a vida das pessoas desenvolvedoras, permitindo que elas encontrem rapidamente as informações necessárias para começar a construir o produto e visualizar o que já está pronto para ser implementado. Com ele, é possível ver medidas, espaçamentos, especificações, estilos e o código pronto para começar o trabalho, tudo em um só lugar.
Além disso, o Dev Mode mantém designers e pessoas desenvolvedoras na mesma página, garantindo que detalhes importantes não sejam perdidos na etapa de handoff. O Dev Mode pode ser utilizado para:
- Visualizar e copiar propriedades, valores e código dos componentes do design;
- Ver o que mudou desde a última vez que você visualizou um arquivo comparando versões de quadro;
- Inspecionar e navegar nos arquivos de design com interações simples que exibem informações importantes da camada;
- Encontrar rapidamente projetos prontos para desenvolvimento com status de seção;
- Simplificar seu fluxo de trabalho com integrações focadas no desenvolvedor, como Jira, Storybook e GitHub;
- Adicionar links relevantes e recursos do desenvolvedor aos componentes.
Recursos para programadores e programadoras
O Figma é uma ferramenta com foco para designers, mas não significa que se limita somente a tais profissionais. Designers de interface estão o tempo todo trabalhando ativamente com pessoas programadoras, pois são quem vão desenvolver as telas que serão criadas.
Para facilitar esse trabalho, a ferramenta disponibiliza o Dev Mode que contém uma área de inspeção, possibilitando ver todos os detalhes de um elemento, tais como: valores de largura, altura, espaçamentos, cor, tipografia, e até mesmo uma pré-visualização de código que o programa gera para CSS, Android e iOS, o que melhora a sua comunicação na hora de realizar o handoff do projeto, e também facilita o trabalho das pessoas programadoras.
Além disso, o Figma disponibiliza uma extensão para o Visual Studio Code (VS Code) que permite as pessoas programadoras navegarem, inspecionarem arquivos de design, colaborarem com designers, rastrearem alterações e agilizarem a implementação do design - tudo isso sem sair do ambiente de desenvolvimento. Com o Figma for VS Code é possível ver quais projetos estão prontos para desenvolvimento, navegar facilmente por frames, exibir trechos de código, ver quais seções estão prontas para iniciar o desenvolvimento e muito mais.
Desenvolvimento front-end sincronizado
Para quem é dev, o Figma atua como uma ponte eficaz entre design e desenvolvimento. A geração automática de estilos, dimensões e assets a partir do Figma simplifica a implementação front-end. Isso garante que a visão da pessoa designer seja preservada durante o processo de codificação.
Veja também: Convertendo projetos Figma em Flutter | #AluraMais — YouTube
Figma Community e recursos
A forma de colaboração do Figma não se reflete apenas em duas ou mais pessoas mexendo simultaneamente no mesmo arquivo. A empresa criou uma forma de seu público colaborar ativamente com a evolução da ferramenta, por meio da divulgação e liberação de acesso em projetos prontos e funcionalidades novas que podem ser aplicadas ao seu perfil, que, por padrão, não existem nativamente no programa.
Dessa forma, nasceu o Figma Community (ou Comunidade Figma, em português), que é o meio como todas as pessoas publicam e compartilham arquivos dentro da ferramenta. Bem semelhante aos fóruns, mas é muito mais simples.
Nele, você pode pesquisar por diversos materiais que sejam da sua necessidade, como templates, componentes e canvas de processos de design totalmente prontos, e tanto a própria equipe da ferramenta quanto outras pessoas (inclusive você), podem publicar e baixar objetos da comunidade, e nisso incluem-se arquivos, plugins e widgets.
Config 2023
Com foco na comunidade e para apresentar o que há de novo na ferramenta, o Figma realiza anualmente uma conferência chamada Config, que é um evento voltado para designers, pessoas desenvolvedoras e outros profissionais interessados em design e tecnologia.
Durante o evento, são apresentadas as novidades e atualização sobre o Figma, além de palestras e workshops com profissionais renomados da área. Além disso, a Config é uma oportunidade para a comunidade de design se conectar, aprender e compartilhar conhecimentos e experiências sobre as tendências e desafios do mercado.
Arquivos
Digamos que uma designer esteja produzindo um site novo, mas sempre que começa neste fluxo, alguns processos e elementos são sempre iguais. Utilizar objetos já construídos agilizaria o seu trabalho, não é mesmo? Pelo Figma Community, é possível pesquisar por sites, apps ou até mesmo design systems totalmente prontos, que pode ser duplicado para a sua conta (sem precisar pagar nada), e ficar livre para editar da maneira que preferir, e utilizar da forma como precisar.
Plugins no Figma
Os plugins são aplicações instaláveis da comunidade que adicionam funções novas, que nativamente não existem no Figma. É certo dizer que o Figma é um dos programas de design de interface e prototipagem mais completos do mercado, mas para determinadas situações, é comum sentir falta de uma função ou outra. Por essa razão que pessoas que utilizam da ferramenta e atuam com programação, desenvolvem plugins que criam novas funcionalidades, ou melhoram e agilizam recursos já existentes.
E a instalação é super fácil, uma vez que você só precisa pesquisar por algo na comunidade, e clicar no botão de instalar. Em pouquíssimos segundos, já pode começar a usar o plugin.
Não só isso, talvez uma das coisas mais interessantes é que a instalação de plugins não é vinculada ao seu computador, mas sim a sua conta Figma. Isso significa que independente do computador que você estiver acessando, você não precisará reinstalar o plugin, pois ele sempre estará vinculado ao seu perfil, a não ser que você desinstale.
Leia também:
- Top 5 plugins no Figma para trabalhar com Design System | Alura
- Figma Community Awards 2022: confira os plugins e templates favoritos da comunidade do Figma | Alura
Widgets
Os widgets são semelhantes aos plugins. Você pode pesquisar pela necessidade que precisar, e ele trará um recurso novo que não existe nativamente no Figma. Contudo, ele não precisa ser instalado, pois ele atua como se fosse um elemento criado dentro do próprio arquivo, podendo ser interagido por você e outras pessoas que estão colaborando, diferente dos plugins que são externos ao arquivo, e só você pode interagir com ele, sem colaboração.
Plataformas
Outra vantagem do Figma é sua facilidade de ser utilizado por qualquer pessoa em qualquer sistema operacional. Se você estiver lendo isso por um computador com Windows, saiba que você pode baixar o Figma tranquilamente. Se estiver num Mac, você não terá problemas, pois o programa também atende a este sistema. Entretanto, estando num sistema operacional diferente desses dois, como o Linux, por exemplo, você não poderá baixar o programa, mas não significa que seu mundo está perdido.
O Figma é um programa baseado na web, isso significa que você pode entrar no site, fazer login na sua conta, e utilizar a ferramenta pelo próprio navegador, da mesma forma que usaria se tivesse usando o software instalável, o que torna ele extremamente acessível e um destaque entre os seus concorrentes.
Aprenda mais sobre Figma
Acesse gratuitamente as primeiras aulas da Formação Figma, feita pela Escola de UX & Design da Alura e continue aprendendo sobre temas como:
Apostila de UX e USABILIDADE da Alura
Mergulhe na Apostila: UX e Usabilidade aplicados em Mobile e Web e aprenda tópicos importantes como:
- Experiência do Usuário;
- Design de Interação;
- Pesquisa;
- Personas;
- Usabilidade;
- Teste de Usabilidade, Padrões de interface, a Web.
Baixe ela completa em: Apostilas da Alura - Conteúdo livre para o seu aprendizado
Conclusão
Neste artigo você conheceu a importância do Figma, uma plataforma colaborativa para design de interfaces e protótipos, que permite a criação de produtos digitais completos, desde sites até aplicativos para dispositivos móveis. Viu que ele oferece recursos de colaboração, personalização, componentização e prototipagem, tornando-o uma ferramenta versátil para designers e programadores. Além disso, o Figma Community permite que os usuários compartilhem recursos e plugins, expandindo ainda mais as possibilidades da plataforma.
Você também viu que o Figma é gratuito, o que o torna acessível a todos, com opções de assinatura para recursos adicionais. Sua capacidade de funcionar em diferentes sistemas operacionais, juntamente com sua ênfase na colaboração, fazem do Figma uma ferramenta valiosa para profissionais que buscam criar produtos digitais eficazes e de alta qualidade. A prática e o estudo contínuos são recomendados para aproveitar ao máximo essa poderosa ferramenta de design de interface.
A gente se vê por aí, valeu!
Créditos
Apoio didático: Cinthia Bregola
